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

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

<?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"/> 

接下來(lái)就是RecyclerView的菜單項(xiàng)的布局文件 

<?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)建好了，接下來(lái)我們一起來(lái)看看里面的具體實(shí)現(xiàn)代碼了。由于我們的菜單項(xiàng)有一個(gè)icon和名稱(chēng)name，為了方便管理，我們可以創(chuàng)建一個(gè)菜單項(xiàng)實(shí)體類(lèi)ModelHomeEntrance.class

/** 
 * Author: Mr.xiao on 2017/5/23 
 * 
 * @mail:xhb_199409@163.com 
 * @github:https://github.com/xiaohaibin 
 * @describe:菜單項(xiàng)實(shí)體類(lèi) 
 */ 
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; 
    } 
 
} 

由于我們分頁(yè)效果是以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：  首頁(yè)分類(lèi)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: 首頁(yè)分頁(yè)菜單項(xiàng)列表適配器 
 */ 
public class EntranceAdapter extends RecyclerView.Adapter<EntranceAdapter.EntranceViewHolder> { 
 
    private List<ModelHomeEntrance> mDatas; 
 
    /** 
     * 頁(yè)數(shù)下標(biāo),從0開(kāi)始(通俗講第幾頁(yè)) 
     */ 
    private int mIndex; 
 
    /** 
     * 每頁(yè)顯示最大條目個(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ù)首頁(yè)菜單項(xiàng)的數(shù)據(jù)源進(jìn)行分頁(yè)顯示，首頁(yè)確定單頁(yè)菜單顯示數(shù)量，總數(shù)除以單頁(yè)顯示數(shù)量取整就是顯示頁(yè)數(shù)，我們?cè)俑鶕?jù)頁(yè)數(shù)來(lái)創(chuàng)建RecyclerView將其添加到ViewPager的適配器中，下面就讓我們一起來(lái)看看具體是如何的。 

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;//首頁(yè)菜單單頁(yè)顯示數(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("汽車(chē)服務(wù)", R.mipmap.ic_category_7)); 
        homeEntrances.add(new ModelHomeEntrance("攝影寫(xiě)真", R.mipmap.ic_category_8)); 
        homeEntrances.add(new ModelHomeEntrance("休閑娛樂(lè)", 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)購(gòu)", R.mipmap.ic_category_14)); 
        homeEntrances.add(new ModelHomeEntrance("景點(diǎn)", R.mipmap.ic_category_16)); 
        homeEntrances.add(new ModelHomeEntrance("全部分類(lèi)", R.mipmap.ic_category_15)); 
    } 
 
    private void init() { 
        LinearLayout.LayoutParams layoutParams12 = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, (int) ((float) ScreenUtil.getScreenWidth() / 2.0f)); 
 
        //首頁(yè)菜單分頁(yè) 
        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; 
        //一共的頁(yè)數(shù)等于 總數(shù)/每頁(yè)數(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è)頁(yè)面都是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)首頁(yè)分頁(yè)菜單效果的主要實(shí)現(xiàn)代碼，這種分頁(yè)菜單效果在我們的應(yīng)用中也比較常見(jiàn)，說(shuō)不定啥時(shí)候公司產(chǎn)品汪就拿手機(jī)過(guò)來(lái)讓你照著美團(tuán)之類(lèi)實(shí)現(xiàn)這種效果。