引言

现如今很多app都在使用顶部导航栏效果，用于多界面的频繁切换，今天我们就来使用TabLayout+ViewPager实现类似的导航栏效果。

效果展示

TabLayout.gif

用法

第一步：添加依赖

因为它是MD风格下的控件，所以先引入material，design.

//matrial design
    implementation "com.google.android.material:material:1.1.0-alpha07"
    implementation 'com.android.support:design:29.1.1'

第二步：布局文件

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/gray"
    tools:context=".show.Case14"
    tools:ignore="MissingConstraints">

    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@color/green"
        android:gravity="center"
        app:title="TabLayout示例"
        app:titleTextColor="@color/white" />

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tablayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/pink"
        app:layout_constraintTop_toBottomOf="@id/toolbar"
        app:tabGravity="fill"
        app:tabIndicatorColor="@color/white"
        app:tabIndicatorHeight="2dp"
        app:tabMode="scrollable"
        app:tabSelectedTextColor="@color/white"
        app:tabTextColor="@color/white" />


    <androidx.viewpager.widget.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toBottomOf="@id/tablayout" />

</androidx.constraintlayout.widget.ConstraintLayout>

第三步：创建Fragment+Layout

(1)HotRecommendFragment
R.layout.fragment_hot_recommend
(2)HotCollectionFragment
R.layout.fragment_hot_collection

注明：两个xxxFragment.java文件中什么都不做，就只加载布局，布局中我只用了一个ImageView控件来显示不同的Fragment。

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".fragment.HotRecommendFragment">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/meizi"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

另一个android:src="@drawable/meizi2"只有这处做修改就好。

第四步：创建适配器PublicTabAdapter

public class PublicTabAdapter extends FragmentPagerAdapter {

    private List<Fragment> list_fragment; // fragment列表
    private List<String> list_Title; // tab名的列表

    public PublicTabAdapter(FragmentManager fm,List<Fragment> list_fragment,List<String> list_Title){
        super(fm);
        this.list_fragment = list_fragment;
        this.list_Title = list_Title;
    }

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

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

    // 此方法用来显示tab上的名字
    @Nullable
    @Override
    public CharSequence getPageTitle(int position) {
        return list_Title.get(position % list_Title.size());
    }
}

第五步：在Acvitity中写的代码

public class Case14 extends AppCompatActivity {
    private List<Fragment> list_fragment; //定义要装frament的列表
    private List<String> list_title; //tab名称列表
    private ViewPager viewPager;
    private TabLayout tabLayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_case14);
        initView();
        //设置Tablayout的模式
        tabLayout.setTabMode(TabLayout.MODE_FIXED);
        //为tablayout添加tab名称
        tabLayout.addTab(tabLayout.newTab().setText(list_title.get(0)));
        tabLayout.addTab(tabLayout.newTab().setText(list_title.get(1)));
        PublicTabAdapter adapter = new PublicTabAdapter(this.getSupportFragmentManager(), list_fragment, list_title);
        //viewpager设置适配器
        viewPager.setAdapter(adapter);
        //tabLayout加载viewpager
        tabLayout.setupWithViewPager(viewPager);
    }

    //初始化
    private void initView(){
        //定义fragment
        HotRecommendFragment hotRecommendFragment = new HotRecommendFragment();
        HotCollectionFragment hotCollectionFragment = new HotCollectionFragment();
        //将fragment装进列表
        list_fragment = new ArrayList<>();
        list_fragment.add(hotRecommendFragment);
        list_fragment.add(hotCollectionFragment);
        //将名称加载tab列表
        list_title = new ArrayList<>();
        list_title.add("热门推荐");
        list_title.add("热门收藏");
        //控件初始化
        tabLayout = findViewById(R.id.tablayout);
        viewPager = findViewById(R.id.view_pager);
    }
}