Android通过Tablayout+viewpager实现顶部导航栏

我们需要先添加依赖

implementation 'org.xutils:xutils:3.5.0'
implementation 'com.androidkun:XTabLayout:1.1.4'

①首先呢，还是新建几个blankfragment文件。需要几个导航栏就建立几个。还要有对应的layout文件，为每个顶部导航显示的内容。
具体创建方法参考另一篇博客。
Android使用RadioGroup + ViewPager制作底部导航栏
②在fragmen对应layout布局文件中，添加tablayou和viewpager

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".Fragment1">

     <com.androidkun.xtablayout.XTabLayout
         android:id="@+id/xtl"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
         android:layout_marginTop="100dp"
        android:layout_weight="1"/>

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/vp_top"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="15"/>

LinearLayout>

③每个图片对应的背景图片，为新建的selector文件，设置选中和未选中显示的图片。
该图片为selector类型的，但是其中的item中的不能用state_checked，而是应该用state_selected

<selector xmlns:android="http://schemas.android.com/apk/res/android">
     <item android:state_selected="false" android:drawable="@drawable/zhuyeqianse"/>
     <item android:state_selected="true"  android:drawable="@drawable/zhuyeshense"/>
selector>

④主页对应的java代码，为了方便，我所有栏目的图片使用的相同的图片。

public class Fragment1 extends Fragment {
    private ViewPager viewPager;
    private XTabLayout xTabLayout;
    private List<Fragment> pages;
    private List<String>  mtitle;
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        View view = inflater.inflate(R.layout.fragment_1, container, false);
        viewPager=view.findViewById(R.id.vp_top);
        xTabLayout=view.findViewById(R.id.xtl);
        init();
        return view;
    }
    private void init(){
        mtitle=new ArrayList<>();
        mtitle.add("top_1");
        mtitle.add("top_2");
        mtitle.add("top_3");

        pages=new ArrayList<>();
        pages.add(new Fragment_top1());
        pages.add(new Fragment_top2());
        pages.add(new Fragment_top3());

        //设置适配器
        viewPager.setAdapter(new FragmentPagerAdapter(getActivity().getSupportFragmentManager()) {
            @NonNull
            @Override
            public Fragment getItem(int position) {
                return pages.get(position);
            }
            @Override
            public int getCount() {
                return pages.size();
            }
            @Nullable
            @Override
            public CharSequence getPageTitle(int position) {
                return mtitle.get(position);
            }
        });
        //关联起来
        xTabLayout.setupWithViewPager(viewPager);


        //为每一个tab设置图片
        //该图片为selector类型的，但是其中的item中的不能用state_checked，而是应该用state_selected
        for(int i=0;i<xTabLayout.getTabCount();i++){
            XTabLayout.Tab tab=xTabLayout.getTabAt(i);   //得到当前tab
            Drawable drawable=null;   //图片位置
            switch (i){
                case 0:drawable=getResources().getDrawable(R.drawable.tab_top_selector);break;
                case 1:drawable=getResources().getDrawable(R.drawable.tab_top_selector);break;
                case 2:drawable=getResources().getDrawable(R.drawable.tab_top_selector);break;
            }
            tab.setIcon(drawable);
        }
    }
}