前言

大多數(shù)app首頁(yè)界面一般貌似可以滑動(dòng)切換上下頁(yè)的網(wǎng)格布局，這種效果用得挺多，可惜Android原生是沒(méi)有這樣的控件的。在工作中，我也用到過(guò)幾次。但每次實(shí)現(xiàn)都是按ctrl+A+C+V，代碼寫(xiě)得也不優(yōu)雅，就是再次重新復(fù)制粘貼，也避免不了看上幾眼，修改修改，特別不爽快。每次吐槽的同時(shí)在想，下次我要再用到這種效果，我就將這些代碼關(guān)進(jìn)小黑屋。拒絕再寫(xiě)重復(fù)代碼，雖然大多數(shù)只是按ctrl+A+C+V。這次，我終于要將自己吐槽時(shí)的想法付之行動(dòng)的。再寫(xiě)之前，為了避免重復(fù)造輪子。在網(wǎng)上搜了好多次，嗯，沒(méi)有意外，我還是沒(méi)有發(fā)現(xiàn)到驚喜。那就開(kāi)始行動(dòng)了。這種效果用ViewPager+GridView實(shí)現(xiàn)，那我就叫它PageGridView吧(其實(shí)名字我也想了好久）star一下也是不錯(cuò)的，嘿嘿!!!

PageGridView 特點(diǎn)

• 可自由定制Item布局
• 無(wú)需寫(xiě)adapter適配器,直接調(diào)用setData()方法填充數(shù)據(jù)
• 只需實(shí)體類(lèi)繼承ItemModel即可
• 可顯示本地圖、網(wǎng)絡(luò)圖、資源ID圖標(biāo)，由開(kāi)發(fā)者實(shí)現(xiàn)
• 動(dòng)態(tài)計(jì)算PageGridView高度，不需要在布局里面寫(xiě)固定高度
• 可重復(fù)setData()方法刷新數(shù)據(jù)
• 不需要復(fù)制粘貼（重點(diǎn)）

PageGridView自定義屬性

約定規(guī)則

1. Item布局必須給定具體高度，默認(rèn)itemView布局的高度為@dimen/item_height=80dp
2. Item布局 TextView的id 為R.id.tv_item_name
3. Item布局 ImageView的id 為R.id.iv_item_icon
4. Item默認(rèn)點(diǎn)擊效果R.drawable.selector_item_view_bg
5. Item點(diǎn)擊顏色值：R.color.item_view_selected_color
6. Item背景顏色值：R.color.item_view_normal_color

效果圖

9098B4087FFDE82EB1B4CF6CF662C260.png

PageGridView使用

Gradle 依賴(lài)庫(kù)

implementation 'com.wihaohao:PageGridView:1.0.0'

默認(rèn)布局

一般默認(rèn)參數(shù)即可滿(mǎn)足需求

<com.pagegridviewlibrary.PageGridView
          android:id="@+id/vp_grid_view"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          />
          

一行4列的布局

  <com.pagegridviewlibrary.PageGridView
          android:id="@+id/vp_grid_view"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          app:numColumns="4"
          app:pageSize="4"
          app:selectedIndicator="@mipmap/ic_dot_selected"
          app:unSelectedIndicator="@mipmap/ic_dot_normal"
          app:isShowIndicator="true"
          />

兩行4列的布局

    <com.pagegridviewlibrary.PageGridView
        android:id="@+id/vp_grid_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:indicatorPadding="10dp"
        app:isShowIndicator="true"
        app:itemView="@layout/my_item_view"
        app:numColumns="4"
        app:pageSize="8"
        app:selectedIndicator="@mipmap/ic_dot_selected"
        app:unSelectedIndicator="@mipmap/ic_dot_normal" />

自定義Item布局

 <com.pagegridviewlibrary.PageGridView
        android:id="@+id/p_grid_view2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:indicatorGravity="right"
        app:indicatorPaddingRight="@dimen/padding_10"
        app:isShowIndicator="true"
        app:itemView="@layout/item_custom"
        app:indicatorBackground="@color/colorPrimary"
        app:numColumns="5"
        app:pageSize="5"/>

ItemModel

public abstract static class ItemModel {
        /**
         * 返回item名字
         *
         * @return
         */
        protected abstract String getItemName();

        /**
         * 設(shè)置圖標(biāo)
         *
         * @param imageView
         */
        protected abstract void setIcon(ImageView imageView);

        /**
         * 特殊需求，重寫(xiě)該方法，設(shè)置item
         *
         * @param itemView
         */
        protected void setItemView(View itemView) {

        }
    }

Model

繼承VpGridView.ItemModel 為item賦值和設(shè)置圖標(biāo)

public class MyIconModel extends PageGridView.ItemModel {
    private String name;


    private int iconId;


    public String getName() {
        return name;
    }

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

    public int getIconId() {
        return iconId;
    }

    public void setIconId(int iconId) {
        this.iconId = iconId;
    }

    public MyIconModel(String name, int iconId) {
        this.name = name;
        this.iconId = iconId;
    }

    @Override
    protected String getItemName() {
        return name;
    }

    @Override
    protected void setIcon(ImageView imageView) {
        imageView.setImageResource(iconId);
    }
}

特殊需求，繼承VpGridView.ItemModel 設(shè)置ItemView

public class CustomModel extends PageGridView.ItemModel {

    public String title;

    public CustomModel(String title) {
        this.title = title;
    }

    @Override
    protected String getItemName() {
        return null;
    }

    @Override
    protected void setIcon(ImageView imageView) {

    }

    @Override
    protected void setItemView(View itemView) {
        TextView textView= (TextView) itemView;
        textView.setText(title);
    }
}

PageGridView的使用

public class MainActivity extends AppCompatActivity {

    List<MyIconModel> mList;
    List<CustomModel> mList2;

    private PageGridView<MyIconModel> mPageGridView;
    private PageGridView<CustomModel> mPageGridView2;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mPageGridView =findViewById(R.id.vp_grid_view);
        initData();
        mPageGridView.setData(mList);
        mPageGridView.setOnItemClickListener(new PageGridView.OnItemClickListener() {
            @Override
            public void onItemClick(int position) {
                Toast.makeText(MainActivity.this,position+"",Toast.LENGTH_SHORT).show();
            }
        });

        //自定義item
        mPageGridView2=findViewById(R.id.p_grid_view2);
        mPageGridView2.setData(mList2);


    }

    private void initData() {
        mList=new ArrayList<>();
        mList2=new ArrayList<>();
        for(int i=0;i<30;i++){
            mList.add(new MyIconModel("測(cè)試"+i,R.mipmap.ic_launcher));
            mList2.add(new CustomModel("標(biāo)題"+i));
        }
    }
}