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

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页