ViewPager+GridView组合控件实现网格布局分页效果

前言

大多数app首页界面一般貌似可以滑动切换上下页的网格布局,这种效果用得挺多,可惜Android原生是没有这样的控件的。在工作中,我也用到过几次。但每次实现都是按ctrl+A+C+V,代码写得也不优雅,就是再次重新复制粘贴,也避免不了看上几眼,修改修改,特别不爽快。每次吐槽的同时在想,下次我要再用到这种效果,我就将这些代码关进小黑屋。拒绝再写重复代码,虽然大多数只是按ctrl+A+C+V。这次,我终于要将自己吐槽时的想法付之行动的。再写之前,为了避免重复造轮子。在网上搜了好多次,嗯,没有意外,我还是没有发现到惊喜。那就开始行动了。这种效果用ViewPager+GridView实现,那我就叫它PageGridView吧(其实名字我也想了好久)star一下也是不错的,嘿嘿!!!

PageGridView 特点

  • 可自由定制Item布局
  • 无需写adapter适配器,直接调用setData()方法填充数据
  • 只需实体类继承ItemModel即可
  • 可显示本地图、网络图、资源ID图标,由开发者实现
  • 动态计算PageGridView高度,不需要在布局里面写固定高度
  • 可重复setData()方法刷新数据
  • 不需要复制粘贴(重点)

PageGridView自定义属性

属性名 说明 默认值
pageSize 每页大小 8
numColumns 列数 4
isShowIndicator 是否显示指示器 true
selectedIndicator 选中指示点资源ID R.mipmap.ic_dot_selected
unSelectedIndicator 未选中指示点资源ID R.mipmap.ic_dot_normal
indicatorGravity 指示器位置 center
indicatorPaddingLeft 指示器左内边距 0px
indicatorPaddingRight 指示器右内边距 0px
indicatorPaddingTop 指示器上内边距 0px
indicatorPaddingBottom 指示器下内边距 0px
indicatorPadding 指示器内边距 0px
indicatorBackground 指示器背景颜色 Color.WHITE
itemView Item布局 R.layout.item_view

约定规则

  1. Item布局必须给定具体高度,默认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.drawable.selector_item_view_bg
  5. Item点击颜色值:R.color.item_view_selected_color
  6. Item背景颜色值:R.color.item_view_normal_color

效果图

ViewPager+GridView组合控件实现网格布局分页效果_第1张图片
9098B4087FFDE82EB1B4CF6CF662C260.png

PageGridView使用

Gradle 依赖库


implementation 'com.wihaohao:PageGridView:1.0.0'


默认布局

一般默认参数即可满足需求


          

一行4列的布局


  


两行4列的布局


    

自定义Item布局


 


ItemModel


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

        /**
         * 设置图标
         *
         * @param imageView
         */
        protected abstract void setIcon(ImageView imageView);

        /**
         * 特殊需求,重写该方法,设置item
         *
         * @param itemView
         */
        protected void setItemView(View itemView) {

        }
    }


Model

继承VpGridView.ItemModel 为item赋值和设置图标


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 设置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 mList;
    List mList2;

    private PageGridView mPageGridView;
    private PageGridView 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("测试"+i,R.mipmap.ic_launcher));
            mList2.add(new CustomModel("标题"+i));
        }
    }
}

你可能感兴趣的:(ViewPager+GridView组合控件实现网格布局分页效果)