Android 仿美團網，探索使用ViewPager+GridView實現左右滑動查看更多分類的功能

不記得什麼時候，我留意到到美團網首頁有使用ViewPager+GridView實現左右滑動查看更多分類的一個功能，感覺它很有趣，於是想着自己動手也實現這樣一個功能，和往常一樣，主要是想總結一下我在學習過程中的一些筆記以及需要注意的地方。
其中需要注意的有如下幾個點：
一：使用GridView作爲每個ViewPager的頁面，也就是說每個ViewPager的頁面都是inflate出一個GridView新實例
二：如何將GridView和ViewPager關聯起來：在剛剛第一點所說的，有多少個ViewPager的頁面就會inflate出多少個GridView作爲每頁的VIew加入集合中，並將這個集合作爲ViewPager的數據源傳給ViewPager的Adapter

//總的頁數=總數/每頁數量，並取整
        pageCount = (int) Math.ceil(mDatas.size() * 1.0 / pageSize);
        mPagerList = new ArrayList<View>();
        for (int i = 0; i < pageCount; i++) {
            // 每個頁面都是inflate出一個新實例
            GridView gridView = (GridView) inflater.inflate(R.layout.gridview, mPager, false);
            gridView.setAdapter(new GridViewAdapter(this, mDatas, i, pageSize));
            mPagerList.add(gridView);

            gridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
                @Override
                public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                    Toast.makeText(MainActivity.this, mDatas.get((int) id).getName(), Toast.LENGTH_SHORT).show();
            });
        }

三：在ViewPager翻頁時，如何讓GridView顯示正確的數據：
（1）給GridView設置Adapter時，除了需要傳入總數據集mDatas之外，還需要傳入當前頁數以及每一頁顯示的個數，然後經過計算得出正確的count和應該顯示的View的數據
（2）在GridView中Adapter中修改getCount()方法：

 /**
     * 先判斷數據集的大小是否足夠顯示滿本頁,如果夠，則直接返回每一頁顯示的最大條目個數pageSize,如果不夠，則有幾項就返回幾,(也就是最後一頁的時候就顯示剩餘item)
     */
    @Override
    public int getCount() {
        return mDatas.size() > (curIndex + 1) * pageSize ? pageSize : (mDatas.size() - curIndex * pageSize);

    }

（3）修改getView()方法：
在給View綁定顯示的數據時，根據當前下標curIndex和每頁顯示最大數pageSize ，計算一下正確的position = position + curIndex * pageSize

 @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        ViewHolder viewHolder = null;
        if (convertView == null) {
            convertView = inflater.inflate(R.layout.item_gridview, parent, false);
            viewHolder = new ViewHolder();
            viewHolder.tv = (TextView) convertView.findViewById(R.id.textView);
            viewHolder.iv = (ImageView) convertView.findViewById(R.id.imageView);
            convertView.setTag(viewHolder);
        } else {
            viewHolder = (ViewHolder) convertView.getTag();
        }
        /**
         * 在給View綁定顯示的數據時，計算正確的position = position + curIndex * pageSize
         */
        int pos = position + curIndex * pageSize;
        viewHolder.tv.setText(mDatas.get(pos).name);
        viewHolder.iv.setImageResource(mDatas.get(pos).iconRes);
        return convertView;
    }

（4）修改getItem()和getItemId()方法

   @Override
    public Object getItem(int position) {
        return mDatas.get(position + curIndex * pageSize);
    }

    @Override
    public long getItemId(int position) {
        return position + curIndex * pageSize;
    }

四、如何在ViewPager翻頁時，正確顯示目前選中的是那一頁呢，也就是說在左右滑動時，下面小圓點的狀態也要相應地做出改變：

/**
     * 設置圓點
     */
    public void setOvalLayout() {
        for (int i = 0; i < pageCount; i++) {
            mLlDot.addView(inflater.inflate(R.layout.dot, null));
        }
        // 默認顯示第一頁
        mLlDot.getChildAt(0).findViewById(R.id.v_dot)
                .setBackgroundResource(R.drawable.dot_selected);
        mPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            public void onPageSelected(int position) {
                // 取消圓點選中
                mLlDot.getChildAt(curIndex)
                        .findViewById(R.id.v_dot)
                        .setBackgroundResource(R.drawable.dot_normal);
                // 圓點選中
                mLlDot.getChildAt(position)
                        .findViewById(R.id.v_dot)
                        .setBackgroundResource(R.drawable.dot_selected);
                curIndex = position;
            }

            public void onPageScrolled(int arg0, float arg1, int arg2) {
            }

            public void onPageScrollStateChanged(int arg0) {
            }
        });
    }

五、在初始化數據源時，如何動態獲取資源ID：

 /**
     * 初始化數據源
     */
    private void initDatas() {
        mDatas = new ArrayList<Model>();
        for (int i = 0; i < titles.length; i++) {
            //動態獲取資源ID，第一個參數是資源名，第二個參數是資源類型例如drawable，string等，第三個參數包名
            int imageId = getResources().getIdentifier("ic_category_" + i, "mipmap", getPackageName());
            mDatas.add(new Model(titles[i], imageId));
        }
    }

就這五點吧，現在我們先來看看美團網首頁使用ViewPager+GridView實現左右滑動查看更多分類的效果圖：

再來看一下我們最終效果圖：

現在我們來看下項目結構圖

現在我把完整的代碼貼出來，由於代碼都有註釋，下面就不進行一一解釋啦
1、MainActivity

package per.lijuan.meituan;

import android.os.Bundle;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.AdapterView;
import android.widget.GridView;
import android.widget.LinearLayout;
import android.widget.Toast;

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

public class MainActivity extends AppCompatActivity {

    private String[] titles = {"美食", "電影", "酒店住宿", "休閒娛樂", "外賣", "自助餐", "KTV", "機票/火車票", "周邊遊", "美甲美睫",
            "火鍋", "生日蛋糕", "甜品飲品", "水上樂園", "汽車服務", "美髮", "麗人", "景點", "足療按摩", "運動健身", "健身", "超市", "買菜",
            "今日新單", "小吃快餐", "面膜", "洗浴/汗蒸", "母嬰親子", "生活服務", "婚紗攝影", "學習培訓", "家裝", "結婚", "全部分配"};
    private ViewPager mPager;
    private List<View> mPagerList;
    private List<Model> mDatas;
    private LinearLayout mLlDot;
    private LayoutInflater inflater;
    /**
     * 總的頁數
     */
    private int pageCount;
    /**
     * 每一頁顯示的個數
     */
    private int pageSize = 10;
    /**
     * 當前顯示的是第幾頁
     */
    private int curIndex = 0;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mPager = (ViewPager) findViewById(R.id.viewpager);
        mLlDot = (LinearLayout) findViewById(R.id.ll_dot);

        //初始化數據源
        initDatas();
        inflater = LayoutInflater.from(this);
        //總的頁數=總數/每頁數量，並取整
        pageCount = (int) Math.ceil(mDatas.size() * 1.0 / pageSize);
        mPagerList = new ArrayList<View>();
        for (int i = 0; i < pageCount; i++) {
            // 每個頁面都是inflate出一個新實例
            GridView gridView = (GridView) inflater.inflate(R.layout.gridview, mPager, false);
            gridView.setAdapter(new GridViewAdapter(this, mDatas, i, pageSize));
            mPagerList.add(gridView);

            gridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
                @Override
                public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                    Toast.makeText(MainActivity.this, mDatas.get((int) id).getName(), Toast.LENGTH_SHORT).show();
                }
            });
        }
        //設置適配器
        mPager.setAdapter(new ViewPagerAdapter(mPagerList));
        //設置圓點
        setOvalLayout();
    }

    /**
     * 初始化數據源
     */
    private void initDatas() {
        mDatas = new ArrayList<Model>();
        for (int i = 0; i < titles.length; i++) {
            //動態獲取資源ID，第一個參數是資源名，第二個參數是資源類型例如drawable，string等，第三個參數包名
            int imageId = getResources().getIdentifier("ic_category_" + i, "mipmap", getPackageName());
            mDatas.add(new Model(titles[i], imageId));
        }
    }

    /**
     * 設置圓點
     */
    public void setOvalLayout() {
        for (int i = 0; i < pageCount; i++) {
            mLlDot.addView(inflater.inflate(R.layout.dot, null));
        }
        // 默認顯示第一頁
        mLlDot.getChildAt(0).findViewById(R.id.v_dot)
                .setBackgroundResource(R.drawable.dot_selected);
        mPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            public void onPageSelected(int position) {
                // 取消圓點選中
                mLlDot.getChildAt(curIndex)
                        .findViewById(R.id.v_dot)
                        .setBackgroundResource(R.drawable.dot_normal);
                // 圓點選中
                mLlDot.getChildAt(position)
                        .findViewById(R.id.v_dot)
                        .setBackgroundResource(R.drawable.dot_selected);
                curIndex = position;
            }

            public void onPageScrolled(int arg0, float arg1, int arg2) {
            }

            public void onPageScrollStateChanged(int arg0) {
            }
        });
    }
}

2、activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#D4D3D3"
    android:orientation="vertical">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="180dp"
        android:background="#FFFFFF">

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

        <LinearLayout
            android:id="@+id/ll_dot"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_marginBottom="8dp"
            android:gravity="center"
            android:orientation="horizontal" />
    </RelativeLayout>
</LinearLayout>

分析下佈局結構：
（1）首先是一個ViewPager，用於結合GridView實現左右滑動查看更多分類；
（2）下面是一個LinearLayout，有多少個ViewPager的頁面就會inflate出多少個小圓點，並且在ViewPager翻頁時，也就是說在左右滑動時，下面小圓點的狀態也要相應地做出改變

3、GridViewAdapter

package per.lijuan.meituan;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;

import java.util.List;

/**
 * Created by lijuan on 2016/9/12.
 */
public class GridViewAdapter extends BaseAdapter {
    private List<Model> mDatas;
    private LayoutInflater inflater;
    /**
     * 頁數下標,從0開始(當前是第幾頁)
     */
    private int curIndex;
    /**
     * 每一頁顯示的個數
     */
    private int pageSize;

    public GridViewAdapter(Context context, List<Model> mDatas, int curIndex, int pageSize) {
        inflater = LayoutInflater.from(context);
        this.mDatas = mDatas;
        this.curIndex = curIndex;
        this.pageSize = pageSize;
    }

    /**
     * 先判斷數據集的大小是否足夠顯示滿本頁,如果夠，則直接返回每一頁顯示的最大條目個數pageSize,如果不夠，則有幾項就返回幾,(也就是最後一頁的時候就顯示剩餘item)
     */
    @Override
    public int getCount() {
        return mDatas.size() > (curIndex + 1) * pageSize ? pageSize : (mDatas.size() - curIndex * pageSize);

    }

    @Override
    public Object getItem(int position) {
        return mDatas.get(position + curIndex * pageSize);
    }

    @Override
    public long getItemId(int position) {
        return position + curIndex * pageSize;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        ViewHolder viewHolder = null;
        if (convertView == null) {
            convertView = inflater.inflate(R.layout.item_gridview, parent, false);
            viewHolder = new ViewHolder();
            viewHolder.tv = (TextView) convertView.findViewById(R.id.textView);
            viewHolder.iv = (ImageView) convertView.findViewById(R.id.imageView);
            convertView.setTag(viewHolder);
        } else {
            viewHolder = (ViewHolder) convertView.getTag();
        }
        /**
         * 在給View綁定顯示的數據時，計算正確的position = position + curIndex * pageSize
         */
        int pos = position + curIndex * pageSize;
        viewHolder.tv.setText(mDatas.get(pos).name);
        viewHolder.iv.setImageResource(mDatas.get(pos).iconRes);
        return convertView;
    }


    class ViewHolder {
        public TextView tv;
        public ImageView iv;
    }
}

4、ViewPagerAdapter

package per.lijuan.meituan;

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

import java.util.List;

/**
 * Created by lijuan on 2016/9/12.
 */
public class ViewPagerAdapter extends PagerAdapter {
    private List<View> mViewList;

    public ViewPagerAdapter(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;
    }
}

5、Model

package per.lijuan.meituan;

/**
 * Created by lijuan on 2016/9/12.
 */
public class Model {
    public String name;
    public int iconRes;

    public Model(String name, int iconRes) {
        this.name = name;
        this.iconRes = iconRes;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public int getIconRes() {
        return iconRes;
    }

    public void setIconRes(int iconRes) {
        this.iconRes = iconRes;
    }
}

佈局文件就不一一貼出來啦，大家可以點擊源碼下載：Android 仿美團網，探索利用ViewPager+GridView實現左右滑動查看更多分類的功能

好了，本篇文章已經全部寫完了，有什麼疑問的，請在下面留言，存在總結不到位的地方還望指導，感謝^_^

Android 仿美團網，探索使用ViewPager+GridView實現左右滑動查看更多分類的功能

MySQL 核心模塊揭祕 | 18 期 | 鎖在內存里長什麼樣*

使用perf工具生成火焰圖

HttpSecurity 是如何組裝過濾器鏈的

數說海南——近6年海南各市縣人口簡單看

長序列中Transformers的高級注意力機制總結

WebStorm 創建 Vue 項目

大齡程序員思考

響應式界面控件DevExtreme * 更強的數據分析和可視化功能

Android Design新控件之TextInputLayout（文本輸入佈局）

使用FileInputStream和FileOutputStream實現本地文件讀寫操作

Android 探索Bottom sheets的使用

Android 軟鍵盤彈出時，EditText固定在鍵盤上方

Android Animation之TranslateAnimation（平移動畫）

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結