專案中大多都會有很多的分類，且左右滑動，如美團首頁（下圖）：

不難發現包含2部分內容：1.左右滑動的頁面，2.指示器。

大度一般都會想到，viewPager+GridView，這裡介紹另外的的一種方法，也做下記錄；

GridViewPager+MagicIndicator(萬能指示器)

一，引入build.gradle

compile 'com.yhy:gvp:1.1.0'
    compile 'com.github.hackware1993:MagicIndicator:1.5.0'

如果報錯,在專案build.gradle中加入：

repositories {
    ...
    maven {
        url "https://jitpack.io"
    }
}
 

二，佈局程式碼

<LinearLayout
            android:gravity="center_horizontal"
            android:layout_gravity="center_horizontal"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">


            <com.yhy.gvp.widget.GridViewPager
                android:paddingLeft="15dp"
                android:paddingRight="15dp"
                android:id="@+id/grid_viewpager"
                android:layout_width="match_parent"
                android:layout_height="150dp"
                app:num_columns="5"
                app:page_size="10"></com.yhy.gvp.widget.GridViewPager>

            <net.lucode.hackware.magicindicator.MagicIndicator
                android:id="@+id/indicator_container"
                android:layout_width="wrap_content"
                android:layout_height="30dp">    
           </net.lucode.hackware.magicindicator.MagicIndicator>
        </LinearLayout>
 

屬性說明：

三，關鍵程式碼：

  @InjectView(R.id.grid_viewpager)
    GridViewPager gridViewpager;
    @InjectView(R.id.indicator_container)
    MagicIndicator indicatorContainer;  使用ButterKnife這裡不多介紹

indexTypeAdapter=new IndexTypeAdapter(getActivity(),R.layout.item_index_type,typeDatas);//頁面內容介面卡
        gridViewpager.setGVPAdapter(indexTypeAdapter);

        Log.i("datas",(int) Math.ceil(typeDatas.size() / 10)+"");
        CommonNavigator commonNavigator = new CommonNavigator(context);//指示器
        commonNavigator.setAdapter(new CommonNavigatorAdapter() {
            @Override
            public int getCount() {
                int num=typeDatas.size()/10;
                if(typeDatas.size() % 10>0){
                    num++;
                }
                return typeDatas==null?0:num;
            }

            @Override
            public IPagerTitleView getTitleView(Context mContext, final int i) {
                CommonPagerTitleView commonPagerTitleView = new CommonPagerTitleView(context);
                View view=View.inflate(context,R.layout.single_image_layout,null);
                final ImageView iv_image=view.findViewById(R.id.iv_image);
                iv_image.setImageResource(R.drawable.point_unfocused);

                commonPagerTitleView.setContentView(view);//指示器引入外部佈局，可知指示器內容可根據需求設定，多樣化
                commonPagerTitleView.setOnPagerTitleChangeListener(new CommonPagerTitleView.OnPagerTitleChangeListener() {
                    @Override
                    public void onSelected(int i, int i1) {
                        iv_image.setImageResource(R.drawable.point_focused);
                    }

                    @Override
                    public void onDeselected(int i, int i1) {
                        iv_image.setImageResource(R.drawable.point_unfocused);
                    }

                    @Override
                    public void onLeave(int i, int i1, float v, boolean b) {

                    }

                    @Override
                    public void onEnter(int i, int i1, float v, boolean b) {

                    }
                });
                return commonPagerTitleView;
            }

            @Override
            public IPagerIndicator getIndicator(Context context) {
                return null;
            }
        });
        indicatorContainer.setNavigator(commonNavigator);
        ViewPagerHelper.bind(indicatorContainer, gridViewpager);//頁面內容與指示器關聯
 

四，左右滑動頁面內容介面卡adapter

public class IndexTypeAdapter extends GVPAdapter<IndexAllTypeBean.TypeListBean> {
    private Context context;
    public IndexTypeAdapter(Context context,int layoutResId, @Nullable List<IndexAllTypeBean.TypeListBean> data) {
        super(layoutResId, data);
        this.context=context;
    }

    @Override
    public void bind(View item, int position, IndexAllTypeBean.TypeListBean data) {
        CircleImageView iv_image=item.findViewById(R.id.iv_image);
        TextView tv_type_name=item.findViewById(R.id.tv_type_name);
        Picasso.with(context).load(data.getImageUrl()).into(iv_image);
       
            tv_type_name.setText(data.getName());
       
    }
}
//IndexAllTypeBean.TypeListBean 為資料內容實體類，不做介紹

五,內容item佈局

 <LinearLayout
        android:orientation="vertical"
        android:paddingBottom="5dp"
        android:layout_marginLeft="5dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
//自定義圓形圖片，可用ImageView 替代
        <com.example.administrator.takeout.ui.widght.CircleImageView
            android:id="@+id/iv_image"
            android:gravity="center_horizontal"
            android:layout_gravity="center_horizontal"
            android:layout_width="40dp"
            android:layout_height="40dp" />
        <TextView
            android:layout_marginTop="5dp"
            android:gravity="center_horizontal"
            android:layout_gravity="center_horizontal"
            android:id="@+id/tv_type_name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </LinearLayout>