原文鏈接：http://www.reibang.com/p/f3dd827147db
分頁菜單圖
想做一個如上圖的橫向分頁菜單欄寨昙，最先在網(wǎng)上找了一圈页屠，看到這個使用RecyclerView實現(xiàn)多行水平分頁的GridView效果和ViewPager效果還不錯竞滓，但感覺要自定義四個文件搅吁，要復制一大堆蝗拿，我懶额港，所以就沒怎么仔細看它的分頁自定義了御铃。所以我打算還是用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ù)據(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)設置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就是菜單的類，每個人不同逼侦，自己寫吧匿辩。關鍵點就是根據(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);
}
}
感覺比自定義簡單铲球，最后的效果就出來了：
分頁菜單
