前段時(shí)間公司移動(dòng)端App新增一個(gè)模塊伍绳，類似美團(tuán)團(tuán)購的功能，首頁有個(gè)類似美團(tuán)的分頁菜單的功能只怎，用過美團(tuán)和餓了么的app的童鞋應(yīng)該清楚這一功能袜瞬。首頁菜單可以分頁切換，類似我們的banner廣告切換效果身堡，只不過只能手動(dòng)切換邓尤。所以整個(gè)分頁效果，我們可以采用Viewpager實(shí)現(xiàn)贴谎，里面的菜單項(xiàng)我們則可以采用RecyclerView實(shí)現(xiàn)汞扎，動(dòng)態(tài)改變里面的菜單項(xiàng)，以后產(chǎn)品汪要改需求也是一兩行代碼能搞定的事擅这，是不是很機(jī)智澈魄。所以今天我們這個(gè)首頁分頁菜單效果，可以采用ViewPager+RecyclerView實(shí)現(xiàn)仲翎，思路既然已經(jīng)有了痹扇，那我們就開整吧。首先我們先看下實(shí)現(xiàn)的效果圖溯香。

最終實(shí)現(xiàn)效果

美團(tuán)首頁分頁菜單

餓了么首頁分頁菜單

首頁布局文件鲫构，分頁指示器是單獨(dú)封裝的一個(gè)控件，后面會(huì)把代碼貼出來
activity_main.xml

<?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:id="@+id/home_entrance"
              android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:orientation="vertical">

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

    <com.stx.xhb.meituancategorydemo.widget.IndicatorView
        android:id="@+id/main_home_entrance_indicator"
        android:layout_width="match_parent"
        android:layout_height="32dp"
        android:layout_marginLeft="16dp"
        android:layout_gravity="bottom"
        android:layout_marginRight="16dp"
        app:gravity="0"
        app:indicatorColor="#668b8989"
        app:indicatorColorSelected="#FF5722"
        app:indicatorWidth="6"/>

</LinearLayout>

ViewPager中的子控件RecyclerView
item_home_entrance_vp.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.RecyclerView xmlns:android="http://schemas.android.com/apk/res/android"
                                        android:layout_width="match_parent"
                                        android:layout_height="wrap_content"/>

接下來就是RecyclerView的菜單項(xiàng)的布局文件
item_home_entrance.xml

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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center_horizontal"
        android:orientation="vertical"
        android:padding="6dp">

        <ImageView
            android:id="@+id/entrance_image"
            android:layout_width="wrap_content"
            android:layout_height="0dp"
            android:layout_margin="2dp"
            android:layout_weight="1"
            android:scaleType="fitCenter"/>

        <TextView
            android:id="@+id/entrance_name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="2dp"
            android:singleLine="true"
            android:textColor="#80000000"
            android:textSize="12dp"/>
    </LinearLayout>

    <View
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/selector_trans_divider"/>

</FrameLayout>

布局都創(chuàng)建好了玫坛，接下來我們一起來看看里面的具體實(shí)現(xiàn)代碼了结笨。由于我們的菜單項(xiàng)有一個(gè)icon和名稱name，為了方便管理湿镀，我們可以創(chuàng)建一個(gè)菜單項(xiàng)實(shí)體類ModelHomeEntrance.class

/**
 * Author: Mr.xiao on 2017/5/23
 *
 * @mail:xhb_199409@163.com
 * @github:https://github.com/xiaohaibin
 * @describe:菜單項(xiàng)實(shí)體類
 */
public class ModelHomeEntrance {
    private String name = "";
    private int image;

    public ModelHomeEntrance(String name, int image) {
        this.image = image;
        this.name = name;
    }


    public int getImage() {
        return image;
    }

    public String getName() {
        return name;
    }

}

由于我們分頁效果是以ViewPager實(shí)現(xiàn)的禀梳，所以我們要?jiǎng)?chuàng)建一個(gè)ViewPager的適配器，CagegoryViewPagerAdapter.Class

package com.stx.xhb.meituancategorydemo.adapter;

import android.support.v4.view.PagerAdapter;
import android.view.View;
import android.view.ViewGroup;

import java.util.List;

/**
 * Created by jxnk25 on 2016/9/21.
 *
 * @link https://xiaohaibin.github.io/
 * @email： xhb_199409@163.com
 * @github: https://github.com/xiaohaibin
 * @description：  首頁分類ViewPager適配器
 */
public class CagegoryViewPagerAdapter extends PagerAdapter {

    private List<View> mViewList;
    public CagegoryViewPagerAdapter(List<View> mViewList) {
        this.mViewList = mViewList;
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        container.removeView(mViewList.get(position));
    }

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        container.addView(mViewList.get(position));
        return (mViewList.get(position));
    }

    @Override
    public int getCount() {
        if (mViewList == null)
            return 0;
        return mViewList.size();
    }

    @Override
    public boolean isViewFromObject(View view, Object object) {
        return view == object;
    }
}

ViewPager的適配器有了肠骆，我們還得再創(chuàng)建一個(gè)RecyclerView的菜單項(xiàng)列表適配器算途，EntranceAdapter.Class

package com.stx.xhb.meituancategorydemo.adapter;

import android.content.Context;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

import com.stx.xhb.meituancategorydemo.R;
import com.stx.xhb.meituancategorydemo.model.ModelHomeEntrance;
import com.stx.xhb.meituancategorydemo.utils.ScreenUtil;

import java.util.List;

/**
 * Author: Mr.xiao on 2017/5/23
 *
 * @mail:xhb_199409@163.com
 * @github:https://github.com/xiaohaibin
 * @describe: 首頁分頁菜單項(xiàng)列表適配器
 */
public class EntranceAdapter extends RecyclerView.Adapter<EntranceAdapter.EntranceViewHolder> {

    private List<ModelHomeEntrance> mDatas;

    /**
     * 頁數(shù)下標(biāo),從0開始(通俗講第幾頁)
     */
    private int mIndex;

    /**
     * 每頁顯示最大條目個(gè)數(shù)
     */
    private int mPageSize;

    private Context mContext;

    private final LayoutInflater mLayoutInflater;

    private List<ModelHomeEntrance> homeEntrances;

    public EntranceAdapter(Context context, List<ModelHomeEntrance> datas, int index, int pageSize) {
        this.mContext = context;
        this.homeEntrances = datas;
        mPageSize = pageSize;
        mDatas = datas;
        mIndex = index;
        mLayoutInflater = LayoutInflater.from(context);

    }

    @Override
    public EntranceViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        return new EntranceViewHolder(mLayoutInflater.inflate(R.layout.item_home_entrance, null));
    }

    @Override
    public void onBindViewHolder(EntranceViewHolder holder, final int position) {
        /**
         * 在給View綁定顯示的數(shù)據(jù)時(shí)，計(jì)算正確的position = position + mIndex * mPageSize蚀腿，
         */
        final int pos = position + mIndex * mPageSize;
        holder.entranceNameTextView.setText(homeEntrances.get(pos).getName());
        holder.entranceIconImageView.setImageResource(homeEntrances.get(pos).getImage());
        holder.itemView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                ModelHomeEntrance entrance = homeEntrances.get(pos);
                // TODO: 2017/5/24 點(diǎn)擊事件處理
            }
        });
    }

    @Override
    public int getItemCount() {
        return mDatas.size() > (mIndex + 1) * mPageSize ? mPageSize : (mDatas.size() - mIndex * mPageSize);
    }

    @Override
    public long getItemId(int position) {
        return position + mIndex * mPageSize;
    }

    class EntranceViewHolder extends RecyclerView.ViewHolder {

        private TextView entranceNameTextView;
        private ImageView entranceIconImageView;

        public EntranceViewHolder(View itemView) {
            super(itemView);
            entranceIconImageView = (ImageView) itemView.findViewById(R.id.entrance_image);
            entranceNameTextView = (TextView) itemView.findViewById(R.id.entrance_name);
            LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, (int) ((float) ScreenUtil.getScreenWidth() / 4.0f));
            itemView.setLayoutParams(layoutParams);
        }
    }
}

最后就是我們的MainActivity的代碼實(shí)現(xiàn)了嘴瓤，我們整體的思路其實(shí)就是需要根據(jù)首頁菜單項(xiàng)的數(shù)據(jù)源進(jìn)行分頁顯示，首頁確定單頁菜單顯示數(shù)量莉钙，總數(shù)除以單頁顯示數(shù)量取整就是顯示頁數(shù)廓脆，我們再根據(jù)頁數(shù)來創(chuàng)建RecyclerView將其添加到ViewPager的適配器中，下面就讓我們一起來看看具體是如何的磁玉。

package com.stx.xhb.meituancategorydemo;

import android.os.Bundle;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.GridLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.FrameLayout;
import android.widget.LinearLayout;

import com.stx.xhb.meituancategorydemo.adapter.CagegoryViewPagerAdapter;
import com.stx.xhb.meituancategorydemo.adapter.EntranceAdapter;
import com.stx.xhb.meituancategorydemo.model.ModelHomeEntrance;
import com.stx.xhb.meituancategorydemo.utils.ScreenUtil;
import com.stx.xhb.meituancategorydemo.widget.IndicatorView;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {
    public static final int HOME_ENTRANCE_PAGE_SIZE = 10;//首頁菜單單頁顯示數(shù)量
    private ViewPager entranceViewPager;
    private LinearLayout homeEntranceLayout;
    private List<ModelHomeEntrance> homeEntrances;
    private IndicatorView entranceIndicatorView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initData();
        initView();
        init();
    }


    private void initView() {
        homeEntranceLayout = (LinearLayout) findViewById(R.id.home_entrance);
        entranceViewPager = (ViewPager) findViewById(R.id.main_home_entrance_vp);
        entranceIndicatorView = (IndicatorView) findViewById(R.id.main_home_entrance_indicator);
    }


    private void initData() {
        homeEntrances = new ArrayList<>();
        homeEntrances.add(new ModelHomeEntrance("美食", R.mipmap.ic_category_0));
        homeEntrances.add(new ModelHomeEntrance("電影", R.mipmap.ic_category_1));
        homeEntrances.add(new ModelHomeEntrance("酒店住宿", R.mipmap.ic_category_2));
        homeEntrances.add(new ModelHomeEntrance("生活服務(wù)", R.mipmap.ic_category_3));
        homeEntrances.add(new ModelHomeEntrance("KTV", R.mipmap.ic_category_4));
        homeEntrances.add(new ModelHomeEntrance("旅游", R.mipmap.ic_category_5));
        homeEntrances.add(new ModelHomeEntrance("學(xué)習(xí)培訓(xùn)", R.mipmap.ic_category_6));
        homeEntrances.add(new ModelHomeEntrance("汽車服務(wù)", R.mipmap.ic_category_7));
        homeEntrances.add(new ModelHomeEntrance("攝影寫真", R.mipmap.ic_category_8));
        homeEntrances.add(new ModelHomeEntrance("休閑娛樂", R.mipmap.ic_category_10));
        homeEntrances.add(new ModelHomeEntrance("麗人", R.mipmap.ic_category_11));
        homeEntrances.add(new ModelHomeEntrance("運(yùn)動(dòng)健身", R.mipmap.ic_category_12));
        homeEntrances.add(new ModelHomeEntrance("大保健", R.mipmap.ic_category_13));
        homeEntrances.add(new ModelHomeEntrance("團(tuán)購", R.mipmap.ic_category_14));
        homeEntrances.add(new ModelHomeEntrance("景點(diǎn)", R.mipmap.ic_category_16));
        homeEntrances.add(new ModelHomeEntrance("全部分類", R.mipmap.ic_category_15));
    }

    private void init() {
        LinearLayout.LayoutParams layoutParams12 = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, (int) ((float) ScreenUtil.getScreenWidth() / 2.0f));

        //首頁菜單分頁
        FrameLayout.LayoutParams entrancelayoutParams = new FrameLayout.LayoutParams(FrameLayout.LayoutParams.MATCH_PARENT, (int) ((float) ScreenUtil.getScreenWidth() / 2.0f + 70));
        homeEntranceLayout.setLayoutParams(entrancelayoutParams);
        entranceViewPager.setLayoutParams(layoutParams12);
        LayoutInflater inflater = LayoutInflater.from(this);
        //將RecyclerView放至ViewPager中：
        int pageSize = HOME_ENTRANCE_PAGE_SIZE;
        //一共的頁數(shù)等于 總數(shù)/每頁數(shù)量停忿，并取整。
        int pageCount = (int) Math.ceil(homeEntrances.size() * 1.0 / pageSize);
        List<View> viewList = new ArrayList<View>();
        for (int index = 0; index < pageCount; index++) {
            //每個(gè)頁面都是inflate出一個(gè)新實(shí)例
            RecyclerView recyclerView = (RecyclerView) inflater.inflate(R.layout.item_home_entrance_vp, entranceViewPager, false);
            recyclerView.setLayoutParams(layoutParams12);
            recyclerView.setLayoutManager(new GridLayoutManager(MainActivity.this, 5));
            EntranceAdapter entranceAdapter = new EntranceAdapter(MainActivity.this, homeEntrances, index, HOME_ENTRANCE_PAGE_SIZE);
            recyclerView.setAdapter(entranceAdapter);
            viewList.add(recyclerView);
        }
        CagegoryViewPagerAdapter adapter = new CagegoryViewPagerAdapter(viewList);
        entranceViewPager.setAdapter(adapter);
        entranceIndicatorView.setIndicatorCount(entranceViewPager.getAdapter().getCount());
        entranceIndicatorView.setCurrentIndicator(entranceViewPager.getCurrentItem());
        entranceViewPager.addOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() {
            @Override
            public void onPageSelected(int position) {
                entranceIndicatorView.setCurrentIndicator(position);
            }
        });
    }
}

以上就是實(shí)現(xiàn)首頁分頁菜單效果的主要實(shí)現(xiàn)代碼蚊伞，這種分頁菜單效果在我們的應(yīng)用中也比較常見席赂，說不定啥時(shí)候公司產(chǎn)品汪就拿手機(jī)過來讓你照著美團(tuán)之類實(shí)現(xiàn)這種效果吮铭，demo地址如下，如果幫到了你颅停，可以點(diǎn)個(gè)start谓晌，支持一個(gè)哦~~~~~~~
https://github.com/xiaohaibin/MeiTuanCategaryDemo