GridPager 组件，类似美团 APP 的多分类分页显示，链式调用，极简接入

GridPager

项目地址：mtjsoft/GridPager 

简介： GridPager 组件，类似美团 APP 的多分类分页显示，链式调用，极简接入

更多：作者   提 Bug   

标签：

分页girdview-

GridPager 组件：ViewPager 结合 GridView，轻松实现类似美团首页分类多页展示。也可用于表情面板的展示。 链式调用，属性配置，几行代码轻松搞定。

① 应用的首页经常需要用到这样的分类多页展示的效果，还有些消息输入框需要这样的表情面板。

② 既然是常用的，作为懒惰的我，肯定不会每次都去写一遍。网上也找了很多类似的例子，但始终不是我想要的简洁接入使用的方式。要么就是加载图片有限制，要么就是样式限制的太死，还得改源码，我不喜欢，我得造一个轮子。。。必须封装一个简单好用的组件，做到几行代码就可实现效果才行。于是乎，GridPager 组件就诞生了。

先看效果

如何使用

1、在根目录 build.gradle 添加:

allprojects {
        repositories {
            ...
            maven { url 'https://jitpack.io' }
        }
    }

2、在 app 项目下的 build.gradle 中添加：

dependencies {
            implementation 'com.github.mtjsoft:GridPager:v1.1.0'
    }

3、在需要使用的布局 xml 中添加 GridPager 组件

<cn.mtjsoft.www.gridpager.GridPager
        android:id="@+id/gridpager"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:verticalSpacing="10dp"
        app:img_width="50dp"
        app:img_height="50dp"
        app:text_color="@color/colorPrimary"
        app:text_size="10sp"
        app:imgtext_margin="10dp"
        app:row_count="2"
        app:column_count="4"
        app:point_width="15dp"
        app:point_height="2dp"
        app:point_is_circle="false"
        app:point_margin="3dp"
        app:point_normal_color="@color/colorPrimary"
        app:point_select_color="@color/colorAccent">
    </cn.mtjsoft.www.gridpager.GridPager>

4、GridPager 组件的属性说明

属性	说明
verticalSpacing	设置 item 的纵向间距 默认 10dp
img_width	设置图片宽度 默认 50dp
img_height	设置图片高度 默认 50dp
text_color	设置文字颜色 默认黑色
imgtext_margin	设置文字与图片的间距 默认 5dp
text_size	设置文字大小 默认 10sp
row_count	设置每页行数 默认 2
column_count	设置每页列数 默认 4
point_width	设置指示器的 item 宽度 默认 8dp
point_height	设置指示器的 item 高度 默认 8dp
point_margin	设置指示器的 item 的间距 默认 8dp
point_normal_color	指示器 item 未选中的颜色 默认灰色
point_select_color	指示器 item 选中的颜色 默认红色
point_is_circle	指示器的 item 是否为圆形，默认圆形直径取宽高的最小值

5、代码实现。链式调用，只需要设置总数量即可。数据绑定完全自定义，不受任何图片加载框架限制，更加自由。

GridPager gridPager = findViewById(R.id.gridpager);
        gridPager
                // 设置数量总条数
                .setDataAllCount(titles.length)
                // 数据绑定
                .setItemBindDataListener(new GridPager.ItemBindDataListener() {
                    @Override
                    public void BindData(ImageView imageView, TextView textView, int position) {
                        // 自己进行数据的绑定，灵活度更高，不受任何限制
                        imageView.setImageResource(iconS[position]);
                        textView.setText(titles[position]);
                    }
                })
                // Item 点击
                .setGridItemClickListener(new GridPager.GridItemClickListener() {
                    @Override
                    public void click(int position) {
                        Toast.makeText(getBaseContext(), "点击了" + titles[position], Toast.LENGTH_SHORT).show();
                    }
                })
                .show();

6、代码中也可直接设置属性（如果 xml 与代码都设置了， 最终以代码设置为准）

        gridPager
                // 设置数量总条数
                .setDataAllCount(titles.length)
                // 设置 item 的纵向间距
                .setVerticalSpacing(20)
                // 设置图片宽度
                .setImageWidth(80)
                // 设置图片高度
                .setImageHeight(80)
                // 设置文字与图片的间距
                .setTextImgMargin(10)
                // 设置文字颜色
                .setTextColor(ContextCompat.getColor(getBaseContext(),R.color.colorPrimaryDark))
                // 设置文字大小
                .setTextSize(12)
                // 设置每页行数
                .setRowCount(2)
                // 设置每页列数
                .setColumnCount(4)
                // 设置指示器的 item 宽度
                .setPointChildWidth(15)
                // 设置指示器的 item 高度
                .setPointChildHeight(3)
                // 设置指示器的 item 的间距
                .setPointChildMargin(5)
                // 指示器的 item 是否为圆形，默认圆形直径取宽高的最小值
                .setPointIsCircle(false)
                // 指示器 item 未选中的颜色
                .setPointNormalColor(ContextCompat.getColor(getBaseContext(),R.color.colorPrimary))
                // 指示器 item 选中的颜色
                .setPointSelectColor(ContextCompat.getColor(getBaseContext(),R.color.colorAccent))
                // 数据绑定
                .setItemBindDataListener(new GridPager.ItemBindDataListener() {
                    @Override
                    public void BindData(ImageView imageView, TextView textView, int position) {
                        // 自己进行数据的绑定，灵活度更高，不受任何限制
                        imageView.setImageResource(iconS[position]);
                        textView.setText(titles[position]);
                    }
                })
                // Item 点击
                .setGridItemClickListener(new GridPager.GridItemClickListener() {
                    @Override
                    public void click(int position) {
                        Toast.makeText(getBaseContext(), "点击了" + titles[position], Toast.LENGTH_SHORT).show();
                    }
                })
                .show();