Android 走近Fragment碎片使用（NavigationFragment）篇

1.原生使用

1)、ViewPage + Fragment + RadioGroup 篇

1.布局如下

2.控制元件引數說明：

    @BindView(R.id.a1_view)
    ViewPager a1View; 
    @BindView(R.id.gr_btn)
    RadioGroup grBtn; //單選按鈕組
    private List<Fragment> fragments;

3.基本用法：PageAdapter + Fragment

  //初始化四個界面
    public class MyViewPageAdapter extends FragmentPagerAdapter {

        private List<Fragment> fragmentList;

        public MyViewPageAdapter(@NonNull FragmentManager fm) {
            super(fm);
        }

        public MyViewPageAdapter(FragmentManager fm, List<Fragment> fragmentList) {
            super(fm);
            this.fragmentList = fragmentList;
        }

        @NonNull
        @Override
        public Fragment getItem(int position) {
            return fragmentList.get(position);
        }

        @Override
        public int getCount() {
            return fragmentList.size();
        }

   				...
    }

4.配合RadioGroup聯動

     ((RadioButton)(grBtn.getChildAt(0))).setChecked(true);  //通過代碼設定第一個默認選擇
        a1View.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
                ((RadioButton)(grBtn.getChildAt(position))).setChecked(true);  //根據索引改變選中
            }

 				...
        });

2)、ViewPage + TabHost 篇

說明：與ViewPage + Fragment不同的是設定聯動以及標題

1.布局如下：

2.引數說明：

    @BindView(R.id.sm3_tab)
    TabLayout sm3Tab; 
    @BindView(R.id.sm3_pager)
    ViewPager sm3Pager;
    private List<Fragment> fragmentList;
    private String[] name = {"頁面A","頁面B","頁面C","頁面D"};

3.TabLayout設定聯動以及配接器設定標題

   sm3Tab.setupWithViewPager(sm3Pager); //tabLayout + viewPager設定聯動  

    public class MyPagerAdapter extends FragmentPagerAdapter{
				 
				        ...				   
       
        @Nullable
        @Override
        public CharSequence getPageTitle(int position) {
            return name[position];  //回傳標題
        }
    }

2.導航使用 （NavigationXML檔案配置使用）

1.創建AB兩個Fragment頁面以及布局

布局A:

布局B：

2.在navigation_xml中添加布局AB

添加后形成關聯

代碼如下：

<?xml version="1.0" encoding="utf-8"?>
<navigation xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/navigation"
    app:startDestination="@id/fragmentA">

    <fragment
        android:id="@+id/fragmentA"
        android:name="fatcats.top.navigationdemo.fragment.FragmentA"
        android:label="FragmentA" >
        <action
            android:id="@+id/action_fragmentA_to_fragmentB" 
            app:destination="@id/fragmentB" />
    </fragment>
    <fragment
        android:id="@+id/fragmentB"
        android:name="fatcats.top.navigationdemo.fragment.FragmentB"
        android:label="FragmentB" >
        <action
            android:id="@+id/action_fragmentB_to_fragmentA"
            app:destination="@id/fragmentA" />
    </fragment>
</navigation>

3.MainActivity系結控制元件

    NavController navController;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
      				 ...
         navController = Navigation.findNavController(this, R.id.fragment);//MainActivity下的xml中的控制元件ID
         NavigationUI.setupActionBarWithNavController(this,navController);
    }

FragmentAB都生成了自己的ID，我們可以通過這個ID實作頁面跳轉

4.界面A切換頁面

   @BindView(R.id.fma_skip_btn)
    Button fmaSkipBtn;

    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        return View.inflate(getActivity(), R.layout.fragment_a, null);
    }

    @Override
    public void onActivityCreated(@Nullable Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);
        ButterKnife.bind(this,getView());
        fmaSkipBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                NavController navController = Navigation.findNavController(v); //系結按鈕
      		    navController.navigate(R.id.action_fragmentA_to_fragmentB); //跳轉視圖需要注意目標ID

            }
        });
    }

補充：我們選擇要跳轉的ID應該是指向的ActionId或者指明fragmentId

5.設定AppBar回傳箭頭（從B 回傳 A）

在MainActivity中補充：

...
//  navController = Navigation.findNavController(this, R.id.fragment);

 @Override
    public boolean onSupportNavigateUp() {
        return navController.navigateUp();
    }

補充：（注意要設定AppTheme 否則是沒有AppBar設定回傳箭頭的 ）報錯資訊如下：

2020-11-26 21:26:41.559 7026-7026/fatcats.top.navigationdemo E/AndroidRuntime: FATAL EXCEPTION: main
    Process: fatcats.top.navigationdemo, PID: 7026
    java.lang.RuntimeException: Unable to start activity ComponentInfo{fatcats.top.navigationdemo/fatcats.top.navigationdemo.MainActivity}: java.lang.IllegalStateException: You need to use a Theme.AppCompat theme (or descendant) with this activity.
        ...
     Caused by: java.lang.IllegalStateException: You need to use a Theme.AppCompat theme (or descendant) with this activity.
      ...

添加之后效果展示

原始碼已放入GitHub中，感興趣的朋友可以查看，地址：https://github.com/NoMessages/Navigation_Fragment