TabLayout和ViewPager实现顶部标签页

一、简介

1. 需求：实现一个像知乎顶部标签页，来展现3个页面。
2. 解决办法：TabLayout是Design包中推出的控件，可以配合着ViewPager和Fragment来实现顶部标签和底部菜单栏。

二、效果图

效果图.jpg

三、实现步骤

1. 添加依赖：implementation 'com.android.support:design:27.1.1'
2. 创建多个Fragment.java文件，并绑定XML布局文件。
3. 创建FragmentPagerAdapter适配器文件。
4. 在布局中使用TabLayout控件和Viewpager控件。
5. 在代码中实现Viewpager与Fragment的绑定，和TabLayout的绑定。

四、具体步骤

1. 添加依赖

implementation 'com.android.support:design:27.1.1'

2. 创建多个Fragment.java文件，并绑定XML布局文件。

/**
 * Created by SongSong on 2018/11/9
 * 这是TabLayout展示的其中一个页面
 */
public class Fragment1 extends Fragment {
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                           Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment1, container, false);
    }
}

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="218dp"
        android:text="Page:"
        android:textSize="20sp"
        android:textStyle="bold"/>
    <TextView
        android:id="@+id/titile"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/textView"
        android:layout_centerHorizontal="true"
        android:textSize="50sp"
        android:text="1"/>
</RelativeLayout>

3. 创建FragmentPagerAdapter适配器文件

public class MyFragmentPagerAdapter extends FragmentPagerAdapter {
    private String[] mTitles = new String[]{"Tab 1", "Tab 2", "Tab 3"};
    public MyFragmentPagerAdapter(FragmentManager fm) {
        super(fm);
    }
    @Override
    public Fragment getItem(int position) {
        if (position == 1)
            return new Fragment2();
        else if (position == 2)
            return new Fragment3();
        return new Fragment1();
    }
    @Override
    public int getCount() {
        return mTitles.length;
    }
    //用来设置tab的标题
    @Override
    public CharSequence getPageTitle(int position) {
        return mTitles[position];
    }
}

4. 在布局中使用TabLayout控件和Viewpager控件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <android.support.design.widget.TabLayout
        android:id="@+id/tab_main"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary"
        app:tabIndicatorColor="#94ec9d"
        app:tabIndicatorHeight="4dp"
        app:tabMode="fixed"
        app:tabSelectedTextColor="#FFFFFF"
        app:tabTextColor="#FFFFFF">
    </android.support.design.widget.TabLayout>
    <android.support.v4.view.ViewPager
        android:id="@+id/vp_main"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">
    </android.support.v4.view.ViewPager>
</LinearLayout>

5. 在代码中实现Viewpager与Fragment的绑定，和TabLayout的绑定

public class MainActivity extends AppCompatActivity {
    private TabLayout mTabLayout;
    private ViewPager mViewPager;
    private MyFragmentPagerAdapter myFragmentPagerAdapter;
    private TabLayout.Tab one;
    private TabLayout.Tab two;
    private TabLayout.Tab three;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mTabLayout = findViewById(R.id.tab_main);
        mViewPager = findViewById(R.id.vp_main);
        myFragmentPagerAdapter = new MyFragmentPagerAdapter(getSupportFragmentManager());
        //使用适配器将ViewPager与Fragment绑定在一起
        mViewPager.setAdapter(myFragmentPagerAdapter);
        //将TabLayout和ViewPager绑定在一起，相互影响，解放了开发人员对双方变动事件的监听
        mTabLayout.setupWithViewPager(mViewPager);
        //指定Tab的位置
        one = mTabLayout.getTabAt(0);
        two = mTabLayout.getTabAt(1);
        three = mTabLayout.getTabAt(2);
        //给tab设置图标
        one.setIcon(R.mipmap.ic_launcher);
        two.setIcon(R.mipmap.ic_launcher);
        three.setIcon(R.mipmap.ic_launcher);
    }
}

五、项目地址

https://github.com/WangXianSong/TabLayoutDemo

六、留下的问题

在三个Fragment的ViewPager中，由于ViewPager默认会预加载左右两个Fragment页面。(顺序：左右Fragment再到当前Fragment)

每次加载都需要消耗一定的内存和网络的话，是非常不友善的，所以为了优化这个问题，我在网上找到了关于setUserVisibleHint方法的详解，在后续再更新。

Fragment的setUserVisibleHint方法

public void setUserVisibleHint(boolean isVisibleToUser) {
    super.setUserVisibleHint(isVisibleToUser);
    Log.d(TAG, "setUserVisibleHint: Fragment1");
}

七、参考文章

• 实践：https://www.jianshu.com/p/51f3a17df49d
• 详细：https://www.jianshu.com/p/bbefb97cccdd
• 样式：https://www.jianshu.com/p/116f87abdaea
• 相关阅读：https://www.cnblogs.com/wangle12138/p/8419496.html