原文鏈接：http://www.itdecent.cn/p/f3dd827147db

分頁菜單圖

想做一個如上圖的橫向分頁菜單欄，最先在網(wǎng)上找了一圈，看到這個使用RecyclerView實現(xiàn)多行水平分頁的GridView效果和ViewPager效果還不錯，但感覺要自定義四個文件，要復(fù)制一大堆，我懶，所以就沒怎么仔細(xì)看它的分頁自定義了。所以我打算還是用ViewPager來分頁吧，每頁用一個RecyclerView來裝載固定的數(shù)據(jù)就可以了。

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   所有數(shù)據(jù)
     * @param rowNum  行數(shù)
     * @param spanNum 列數(shù)
     */
    private void initViewPager(ArrayList<MenuItem> datas, int rowNum, int spanNum) {
        //1.根據(jù)數(shù)據(jù)的多少來分頁，每頁的數(shù)據(jù)為rw
        int singlePageDatasNum = rowNum * spanNum;//每個單頁包含的數(shù)據(jù)量：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.截取每個頁面包含數(shù)據(jù)
            ArrayList<MenuItem> menuItems = new ArrayList<>(datas.subList(fromIndex, toIndex));
            //b.設(shè)置每個頁面的適配器數(shù)據(jù)
            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.動態(tài)設(shè)置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.創(chuàng)建指示器
        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));//就是指示器的寬度，然后通過頁數(shù)來評分
                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產(chǎn)生綁定
        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就是菜單的類，每個人不同，自己寫吧。關(guān)鍵點就是根據(jù)行數(shù)和列數(shù)得到每頁總數(shù)，然后根據(jù)數(shù)據(jù)量的數(shù)目算出有好多頁就行了。
還有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);
    }
}

感覺比自定義簡單，最后的效果就出來了：

分頁菜單