《第一行代码》阅读笔记（十五）——ViewPager的最佳案例（TabLayout+ViewPager+Fragment）

Tablayout

使用TabLayout需要导入最新的包
implementation 'com.google.android.material:material:1.1.0'

参考文献：
https://www.jianshu.com/p/fde38f367019
https://blog.csdn.net/qq_34773981/article/details/82022647

案例

这是一个TabLayout+ViewPager+Fragment的页面，在Fragment中内嵌了一个网格RecycleView。

第一步：先画主页的布局

<?xml version="1.0" encoding="utf-8"?>
<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=".activity.BookChooseActivity">

    <TextView
        android:id="@+id/unit_list_title"
        android:text="选书"
        android:layout_marginRight="0dp"
        style="@style/ToolBarCustom" />

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <com.google.android.material.tabs.TabItem
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="新起点" />

        <com.google.android.material.tabs.TabItem
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="PEP" />

        <com.google.android.material.tabs.TabItem
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="精通" />

    </com.google.android.material.tabs.TabLayout>

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/vp_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    </androidx.viewpager.widget.ViewPager>

</LinearLayout>

很简单，就是顶部一个标签，下面加入一个TabLayout，最后加上一个ViewPager。

第二步：定义Fragment
Fragment的XML文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="5dp">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/book_recycler"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>

Fragment的Java文件

public class BookChooseFragment extends Fragment {

    private List<Unit> mListUnit;
    private View view;
    private RecyclerView recyclerView;

    public BookChooseFragment(List<Unit> mListUnit) {
        this.mListUnit = mListUnit;
    }

    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        view = inflater.inflate(R.layout.book_choose_fragment, container, false);

        recyclerView = view.findViewById(R.id.book_recycler);
        GridLayoutManager gridLayoutManager = new GridLayoutManager(getActivity(), 3);
        recyclerView.setLayoutManager(gridLayoutManager);
        BookAdapter bookAdapter = new BookAdapter(mListUnit);
        recyclerView.setAdapter(bookAdapter);

        return view;
    }
}

第三步：RecycleView的适配器
需要提前准备一个Unit类，需要UnitID、UnitName和Pic属性

public class BookAdapter extends RecyclerView.Adapter<BookAdapter.ViewHolder> {

    private List<Unit> mUnit = new ArrayList();

    public BookAdapter(List<Unit> mUnit) {
        this.mUnit = mUnit;
    }

    class ViewHolder extends RecyclerView.ViewHolder {
        TextView textView;
        ImageView imageView;

        public ViewHolder(@NonNull View itemView) {
            super(itemView);
            textView = itemView.findViewById(R.id.book_name);
            imageView = itemView.findViewById(R.id.book_pic);
        }      
    }

    @NonNull
    @Override
    public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.book_item, parent, false);
        BookAdapter.ViewHolder viewHolder = new BookAdapter.ViewHolder(view);
        return viewHolder;
    }

    @Override
    public void onBindViewHolder(@NonNull ViewHolder holder, int position) {
        Unit unit = mUnit.get(position);
        //图片
        holder.imageView.setResources(unit.getPic())
        holder.textView.setText(unit.getSeriesName());
    }

    @Override
    public int getItemCount() {
        return mUnit.size();
    }

}

第四步：viewPager的适配器

public class BookFragmentAdapter extends FragmentPagerAdapter {

    private List<Fragment> mList;
    private List<String> mTitle;

    public BookFragmentAdapter(@NonNull FragmentManager fm, List<Fragment> mList) {
        super(fm);
        this.mList = mList;

        mTitle = new ArrayList<>();
        mTitle.add("新起点");
        mTitle.add("PEP");
        mTitle.add("精通");
    }

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

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

    @Nullable
    @Override
    public CharSequence getPageTitle(int position) {
        return mTitle.get(position);
    }
}

除了FragmentPagerAdapter必须重写的getItem和getCount，还提供了getPageTitle方法来设置TabLayout的标题。

第五步：在Activity中使用ViewPager

public class BookChooseActivity extends BaseActivity<BookChooseActivityBinding> {

    private Context mContext;

    List<Fragment> fragments = new ArrayList<>();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        mContext = this;

        fragments.add(new BookChooseFragment(SqlUtil.selectUnitByBookId("313")));
        fragments.add(new BookChooseFragment(SqlUtil.selectUnitByBookId("314")));
        fragments.add(new BookChooseFragment(SqlUtil.selectUnitByBookId("315")));

        BookFragmentAdapter adapter = new BookFragmentAdapter(getSupportFragmentManager(), fragments);
        viewBinding.vpContent.setAdapter(adapter);
        viewBinding.tabLayout.setupWithViewPager(viewBinding.vpContent);
    }

}

其实连接TabLayout和ViewPager的关键就在于setupWithViewPager()方法。