安卓仿美团viewpager分类导航栏

我们在很多一些app上面都能看到这种版面的商品分类的选项，然后我们可以左右切换。今天我们就来学学如何实现的。这是美团的app。

我们先看一下效果图：

---

实现原理

实现原理其实就是一个viewpager嵌套一个gridview，我们都知道viewpager和gridview都是需要adapter。我想你们都很了解了。那就不多作说明了。
首先，
我们现在主布局添加一个viewpager。

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent">    <android.support.v4.view.ViewPager        android:layout_marginTop="5dp"        android:id="@+id/viewpager"        android:layout_width="match_parent"        android:layout_height="150dp"></android.support.v4.view.ViewPager></RelativeLayout>

再创建一个gridview布局文件。

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:orientation="vertical" android:layout_width="match_parent"    android:layout_height="match_parent">    <GridView        android:numColumns="4"        android:id="@+id/gridview"        android:layout_width="match_parent"        android:layout_height="match_parent"></GridView></LinearLayout>

为了代码的简洁性，我们将图片的文字和图片放到arrays.xml这个文件里。

<?xml version="1.0" encoding="utf-8"?><resources>    <array name="home_labels">        <item>美食</item>        <item>电影</item>        <item>酒店</item>        <item>休闲娱乐</item>        <item>自助餐</item>        <item>KTV</item>        <item>蛋糕甜点</item>        <item>旅游</item>        <item>购物</item>        <item>摄影写真</item>        <item>丽人</item>        <item>生活服务</item>        <item>门票</item>        <item>抽奖公益</item>        <item>今日新单</item>        <item>全部分类</item>    </array>    <array name="home_icon">        <item>@mipmap/icon_home_food_99</item>        <item>@mipmap/icon_home_movie_29</item>        <item>@mipmap/icon_home_hotel_300</item>        <item>@mipmap/icon_home_happy_2</item>        <item>@mipmap/icon_home_self_189</item>        <item>@mipmap/icon_home_ktv_31</item>        <item>@mipmap/icon_home_93</item>        <item>@mipmap/icon_home_400</item>        <item>@mipmap/icon_home_3</item>        <item>@mipmap/icon_home_37</item>        <item>@mipmap/icon_home_42</item>        <item>@mipmap/icon_home_life_46</item>        <item>@mipmap/icon_home_18</item>        <item>@mipmap/icon_home_16</item>        <item>@mipmap/icon_home_999</item>        <item>@mipmap/icon_home_all_0</item>    </array></resources>

创建一个bean类用于存放图片和文字信息。

public class ItemInfo {    //图片对应下的文字    String iconName;    //图片    int iconId;    public ItemInfo(String iconName, int iconId) {        this.iconName = iconName;        this.iconId = iconId;    }    public String getIconName() {        return iconName;    }    public void setIconName(String iconName) {        this.iconName = iconName;    }    public int getIconId() {        return iconId;    }    public void setIconId(int iconId) {        this.iconId = iconId;    }}

我们需要初始化数据。一个是gridview还有一个是viewpager

private void initView() {        mViewPager= (ViewPager) findViewById(R.id.viewpager);        //绑定布局，通过inflate加载gridview的布局        View pagerOne = getLayoutInflater().inflate(R.layout.gridvie_main, null);        View pagerTwo = getLayoutInflater().inflate(R.layout.gridvie_main, null);        //初始化gridview的控件并绑定        GridView gridView_one = (GridView) pagerOne.findViewById(R.id.gridview);        GridView gridView_two = (GridView) pagerTwo.findViewById(R.id.gridview);        //为gridview设置适配器        gridView_one.setAdapter(new MyGridViewAdapter(MainActivity.this,mOneData));        gridView_two.setAdapter(new MyGridViewAdapter(MainActivity.this,mTwoData));        //往list集合里添加gridview        mList.add(pagerOne);        mList.add(pagerTwo);        //为viewpager设置适配器        mViewPager.setAdapter(new MyPagerAdapter(mList));    }

然后在MainActivity中获取xml中的数据。通过for循环遍历文字的信息

private void initData() {        /**         * 从arrays.xml文件中拿到对应的图片和文字         */        String[] iconName = getResources().getStringArray(R.array.home_labels);        TypedArray array=getResources().obtainTypedArray(R.array.home_icon);        //循环遍历文字的信息        for (int i = 0; i <iconName.length; i++) {            if(i<8){                mOneData.add(new ItemInfo(iconName[i],array.getResourceId(i,0)));            }else{                mTwoData.add(new ItemInfo(iconName[i],array.getResourceId(i,0)));            }        }    }

viewPager和Gridview适配器

public class MyPagerAdapter extends PagerAdapter {    private List<View> mList=new ArrayList<>();    public MyPagerAdapter(List<View> mList) {        this.mList = mList;    }    @Override    public int getCount() {        return mList.size();    }    @Override    public boolean isViewFromObject(View view, Object object) {        return view == object;    }    @Override    public Object instantiateItem(ViewGroup container, int position) {        View view = mList.get(position);        container.addView(view);        return view;    }    @Override    public void destroyItem(ViewGroup container, int position, Object object) {        container.removeView(mList.get(position));    }}

public class MyGridViewAdapter extends BaseAdapter {    private Context mContext;    private List<ItemInfo> itemData = new ArrayList<>();    public MyGridViewAdapter(Context mContext, List<ItemInfo> itemData) {        this.mContext = mContext;        this.itemData = itemData;    }    @Override    public int getCount() {        return itemData.size();    }    @Override    public Object getItem(int i) {        return null;    }    @Override    public long getItemId(int i) {        return 0;    }    @Override    public View getView(int i, View view, ViewGroup viewGroup) {        //加载gridView中的子布局        View inflate = LayoutInflater.from(mContext).inflate(R.layout.grid_item, null);        //初始化控件        ImageView imageView= (ImageView) inflate.findViewById(R.id.iv);        TextView textView= (TextView) inflate.findViewById(R.id.tv);        //为gridView子布局布局中添加图片        imageView.setImageResource(itemData.get(i).getIconId());        //为gridView子布局中添加文字        textView.setText(itemData.get(i).getIconName());        return inflate;    }}

效果就出来了。