ViewPager+RecyclerView分页菜单栏

原文链接：https://www.jianshu.com/p/f3dd827147db

分页菜单图

想做一个如上图的横向分页菜单栏，最先在网上找了一圈，看到这个使用RecyclerView实现多行水平分页的GridView效果和ViewPager效果还不错，但感觉要自定义四个文件，要复制一大堆，我懒，所以就没怎么仔细看它的分页自定义了。所以我打算还是用ViewPager来分页吧，每页用一个RecyclerView来装载固定的数据就可以了。

1.布局：

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical">

                <android.support.v4.view.ViewPager
                    android:id="@+id/view_pager"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content" />

                <net.lucode.hackware.magicindicator.MagicIndicator
                    android:id="@+id/tab_layout"
                    android:layout_width="66dp"
                    android:layout_height="8dp"
                    android:layout_gravity="center"
                    android:background="@drawable/round_orange_rim_white_bg" />

            </LinearLayout>

其中用到了MagicIndicator这款指示器，可以自定义非常灵活，尽管我懒得自定义。

2.初始化ViewPager

public class CoordinatorLayoutTestFragment extends BaseFragment {
    @BindView(R.id.view_pager)
    ViewPager viewPager;
    @BindView(R.id.magic_indicator)
    MagicIndicator magicIndicator;
    @Override
    public int setLayout() {
        return R.layout.fragment_coordinatorlayout_test;
    }
    @Override
    protected void onBindView(View view, ViewGroup container, Bundle savedInstanceState) {
        initViewPager(getData(), 2, 4);
    }
    /**
     * @param datas   所有数据
     * @param rowNum  行数
     * @param spanNum 列数
     */
    private void initViewPager(ArrayList<MenuItem> datas, int rowNum, int spanNum) {
        //1.根据数据的多少来分页，每页的数据为rw
        int singlePageDatasNum = rowNum * spanNum;//每个单页包含的数据量：2*4=8；
        int pageNum = datas.size() / singlePageDatasNum;//算出有几页菜单：20%8 = 3;
        if (datas.size() % singlePageDatasNum > 0) pageNum++;//如果取模大于0，就还要多一页出来，放剩下的不满项
        ArrayList<RecyclerView> mList = new ArrayList<>();
        for (int i = 0; i < pageNum; i++) {
            RecyclerView recyclerView = new RecyclerView(_mActivity);
            GridLayoutManager gridLayoutManager = new GridLayoutManager(_mActivity, spanNum);
            recyclerView.setLayoutManager(gridLayoutManager);
            int fromIndex = i * singlePageDatasNum;
            int toIndex = (i + 1) * singlePageDatasNum;
            if (toIndex > datas.size()) toIndex = datas.size();
            //a.截取每个页面包含数据
            ArrayList<MenuItem> menuItems = new ArrayList<>(datas.subList(fromIndex, toIndex));
            //b.设置每个页面的适配器数据
            MainMenuAdapter menuAdapter = new MainMenuAdapter();
            menuAdapter.setNewData(menuItems);
            //c.绑定适配器，并添加到list
            menuAdapter.bindToRecyclerView(recyclerView);
            recyclerView.setAdapter(menuAdapter);
            mList.add(recyclerView);
        }
        //2.ViewPager的适配器
        MenuViewPagerAdapter menuViewPagerAdapter = new MenuViewPagerAdapter(mList);
        viewPager.setAdapter(menuViewPagerAdapter);
        //3.动态设置ViewPager的高度，并加载所有页面
        int height = DpPxUtils.dp2px(80);//这里的80为MainMenuAdapter中布局文件高度
        LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, datas.size()<=spanNum?height:height * rowNum);
        viewPager.setLayoutParams(layoutParams);
        viewPager.setOffscreenPageLimit(pageNum - 1);
        //4.创建指示器
        CommonNavigator commonNavigator = new CommonNavigator(_mActivity);
        commonNavigator.setAdjustMode(true);
        int finalPageNum = pageNum;
        commonNavigator.setAdapter(new CommonNavigatorAdapter() {
            @Override
            public int getCount() {
                return finalPageNum;
            }

            @Override
            public IPagerTitleView getTitleView(Context context, int index) {
                return new DummyPagerTitleView(context);
            }

            @Override
            public IPagerIndicator getIndicator(Context context) {
                LinePagerIndicator indicator = new LinePagerIndicator(context);
                indicator.setMode(LinePagerIndicator.MODE_EXACTLY);
                indicator.setLineHeight(UIUtil.dip2px(context, 8));//就是指示器的高
                indicator.setLineWidth(UIUtil.dip2px(context, 66/finalPageNum));//就是指示器的宽度，然后通过页数来评分
                indicator.setRoundRadius(UIUtil.dip2px(context, 8));
                indicator.setStartInterpolator(new AccelerateInterpolator());
                indicator.setEndInterpolator(new DecelerateInterpolator(3));
                indicator.setColors(ContextCompat.getColor(context,R.color.colorAccent));
                return indicator;
            }
        });
        //5.配置指示器，并和ViewPager产生绑定
        magicIndicator.setNavigator(commonNavigator);
        ViewPagerHelper.bind(magicIndicator, viewPager);
    }
    private ArrayList<MenuItem> getData() {
        ArrayList<MenuItem> list = new ArrayList<>();
        for (int i = 0; i < 22; i++) {
            list.add(new MenuItem(R.mipmap.ic_launcher_round, "SmallCake" + (i+1)));
        }
        return list;
    }
}

其中的MenuItem就是菜单的类，每个人不同，自己写吧。关键点就是根据行数和列数得到每页总数，然后根据数据量的数目算出有好多页就行了。
还有ViewPager的分页适配器为：MenuViewPagerAdapter:

public class MenuViewPagerAdapter extends PagerAdapter {
    private ArrayList<RecyclerView> mList;
    public MenuViewPagerAdapter(ArrayList<RecyclerView> mList) {
        this.mList = mList;
    }
    @Override
    public int getCount() {
        return mList.isEmpty() ? 0 : mList.size();
    }
    @Override
    public boolean isViewFromObject(@NonNull View view, @NonNull Object o) {
        return view==o;
    }
    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        container.removeView(mList.get(position));
    }
    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        container.addView(mList.get(position));
        return mList.get(position);
    }
}

感觉比自定义简单，最后的效果就出来了：

分页菜单