android-Tablayout与viewpager实现顶部导航栏的使用

一、首先在xml文件添加tablayout控件和viewpager控件

 <com.google.android.material.tabs.TabLayout
        android:id="@+id/main_tablayout"
        android:layout_width="match_parent"
        //字体颜色
        app:tabTextColor="@android:color/black"
        //下划线颜色
        app:tabIndicatorColor="@android:color/holo_orange_dark"
        	//选中的文字颜色
       	app:tabSelectedTextColor="@android:color/holo_orange_dark"
        android:layout_height="50dp"/>

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

二、拿到控件

三、添加几个fragment，给viewpager设置适配器

添加fragment集合

设置适配器，并且将数据传过来

四、绑定两个控件，并且在适配器中给tab条目设置title

mian_viewpager.setAdapter(adapter);
        //绑定两个控件
        main_tablayout.setupWithViewPager(mian_viewpager);
        //设置排列方式，目前的方式是平均分配整个条目，不可滚动
        main_tablayout.setTabMode(TabLayout.MODE_FIXED);

效果如下：