GridViewPager3.0 组件：采用 RecycleView + FlexBoxLayout + PagerSnapHelper 实现方式，轻松实现类似美团首页分类多页展示。也可用于表情面板的展示。 链式调用，属性配置，几行代码轻松搞定。

v3.3.0 开始采用 viewpager2 + FlexBoxLayout 实现

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

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

GridViewPager 组件效果

内置了 3 个覆盖翻页的效果（这是其中一）

如何使用 GridViewPager 组件

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

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

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

dependencies {
            implementation 'com.github.mtjsoft:GridPager:v3.7.0'
    }

3、在需要使用的布局 xml 中添加 GridViewPager 组件，根据需要设置相关属性

    <cn.mtjsoft.www.gridviewpager_recycleview.GridViewPager
        android:id="@+id/gridviewpager"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:pager_MarginTop="10dp"
        app:pager_MarginBottom="0dp"
        app:verticalSpacing="10dp"
        app:img_width="44dp"
        app:img_height="44dp"
        app:text_color="@color/white"
        app:text_size="12sp"
        app:imgtext_margin="5dp"
        app:row_count="2"
        app:column_count="4"
        app:pager_loop="true"
        app:point_is_show="true"
        app:point_width="15dp"
        app:point_height="2dp"
        app:point_is_circle="false"
        app:point_margin="2dp"
        app:point_normal_color="@color/white"
        app:point_select_color="#f00"
        app:point_margin_page="10dp"
        app:point_margin_bottom="10dp"
        app:background_color="@color/white">
    </cn.mtjsoft.www.gridviewpager_recycleview.GridViewPager>

    <cn.mtjsoft.www.gridviewpager_recycleview.GridViewPager
        android:id="@+id/gridviewpager2"
        android:layout_marginTop="10dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
    </cn.mtjsoft.www.gridviewpager_recycleview.GridViewPager>

4、GridViewPager 组件的版本及属性说明

V3.7.0

新增方法 setAlignContent() 设置 Item 行的对齐方式。等同 FLEX 布局的 AlignContent，可设置以下 6 个值：

AlignContent.FLEX_START //（默认值）
AlignContent.FLEX_END
AlignContent.CENTER
AlignContent.SPACE_BETWEEN
AlignContent.SPACE_AROUND
AlignContent.STRETCH

新增属性	属性说明
text_is_show	是否需要显示文本，默认 true 显示（一般作为表情面板时，可以直接设置 false 不显示）。也可通过方法 setIsShowText()设置

V3.6.0

新增方法 setGridItemLongClickListener() 设置 Item 长按监听

3.6.0 新增属性	属性说明
pager_loop	是否开启无限循环滑动 默认 false 不开启

V3.5.0

修复已知问题

新增 setTopOrDownPageTransformer(TopOrDownPageTransformer.ModeType.MODE_DOWN)方法，设置内置的上下进入翻页效果

新增 setGalleryPageTransformer()方法，设置内置的画廊翻页效果

V3.4.0

修复已知问题

新增 setCoverPageTransformer()方法，设置内置的覆盖渐变翻页效果

新增 setCustomPageTransformer()方法，用于设置自定义的翻页效果

V3.3.0

更换 viewpager2 + FlexBoxLayout 实现

V3.2.0

修复已知问题

V3.1.0

修复布局设置 margin 显示不全的问题

V3.0.0

3.0.0 属性	属性说明
pager_MarginTop	设置每页的上边距 默认 10dp 单位 dp
pager_MarginBottom	设置每页的下边距 默认 10dp 单位 dp
verticalSpacing	设置 item 的纵向间距 默认 10dp 单位 dp
img_width	设置图片宽度 默认 50dp 单位 dp
img_height	设置图片高度 默认 50dp 单位 dp
text_color	设置文字颜色 默认黑色
imgtext_margin	设置文字与图片的间距 默认 5dp 单位 dp
text_size	设置文字大小 默认 10sp 单位 sp
row_count	设置每页行数 默认 2
column_count	设置每页列数 默认 4
point_is_show	是否展示指示器,默认 true 展示
point_width	设置指示器的 item 宽度 默认 8dp 单位 dp
point_height	设置指示器的 item 高度 默认 8dp 单位 dp
point_margin	设置指示器的 item 的间距 默认 8dp 单位 dp
point_normal_color	指示器 item 未选中的颜色 默认灰色
point_select_color	指示器 item 选中的颜色 默认红色
point_is_circle	指示器的 item 是否为圆形，默认圆形直径取宽高的最小值
point_margin_page	设置指示器与 page 的间距,默认是 verticalSpacing 的值
point_margin_bottom	设置指示器与底部的间距,默认是 verticalSpacing 的值
background_color	设置组件背景颜色，默认白色
notifyItemChanged(int position)	刷新指定页数据

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

        GridViewPager gridViewPager = findViewById(R.id.gridviewpager);
        gridViewPager
                // 设置数据总数量
                .setDataAllCount(titles.length)
                // 设置背景图片(此时设置的背景色无效，以背景图片为主)
                .setBackgroundImageLoader(new GridViewPager.BackgroundImageLoaderInterface() {
                    @Override
                    public void setBackgroundImg(ImageView bgImageView) {
                        bgImageView.setImageResource(R.drawable.ic_launcher_background);
                    }
                })
                // 数据绑定
                .setImageTextLoaderInterface(new GridViewPager.ImageTextLoaderInterface() {
                    @Override
                    public void displayImageText(ImageView imageView, TextView textView, int position) {
                        // 自己进行数据的绑定，灵活度更高，不受任何限制
                        imageView.setImageResource(iconS[position]);
                        textView.setText(titles[position]);
                    }
                })
                // Item 点击
                .setGridItemClickListener(new GridViewPager.GridItemClickListener() {
                    @Override
                    public void click(int position) {
                        Toast.makeText(getBaseContext(), "点击了" + titles[position] + position, Toast.LENGTH_SHORT).show();
                    }
                })
                .show();

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

        GridViewPager gridViewPager2 = findViewById(R.id.gridviewpager2);
        gridViewPager2
                // 设置数据总数量
                .setDataAllCount(titles.length)
                // 设置背景色，默认白色
                .setGridViewPagerBackgroundColor(ContextCompat.getColor(getBaseContext(), R.color.white))
                // 设置 item 的纵向间距
                .setVerticalSpacing(10)
                // 设置上边距
                .setPagerMarginTop(10)
                // 设置下边距
                .setPagerMarginBottom(10)
                // 设置图片宽度
                .setImageWidth(50)
                // 设置图片高度
                .setImageHeight(50)
                // 设置文字与图片的间距
                .setTextImgMargin(5)
                // 设置文字颜色
                .setTextColor(ContextCompat.getColor(getBaseContext(), R.color.white))
                // 设置文字大小
                .setTextSize(12)
                // 设置每页行数
                .setRowCount(2)
                // 设置每页列数
                .setColumnCount(5)
                // 设置无限循环
                .setPageLoop(true)
                // 设置是否显示指示器
                .setPointIsShow(true)
                // 设置指示器与 page 的间距
                .setPointMarginPage(10)
                // 设置指示器与底部的间距
                .setPointMarginBottom(10)
                // 设置指示器的 item 宽度
                .setPointChildWidth(8)
                // 设置指示器的 item 高度
                .setPointChildHeight(8)
                // 设置指示器的 item 的间距
                .setPointChildMargin(8)
                // 指示器的 item 是否为圆形，默认圆形直径取宽高的最小值
                .setPointIsCircle(true)
                // 指示器 item 未选中的颜色
                .setPointNormalColor(ContextCompat.getColor(getBaseContext(), R.color.white))
                // 指示器 item 选中的颜色
                .setPointSelectColor(ContextCompat.getColor(getBaseContext(), R.color.black_text))
                // 设置背景图片(此时设置的背景色无效，以背景图片为主)
                .setBackgroundImageLoader(new GridViewPager.BackgroundImageLoaderInterface() {
                    @Override
                    public void setBackgroundImg(ImageView bgImageView) {
                        bgImageView.setImageResource(R.drawable.ic_launcher_background_red);
                    }
                })
                // 数据绑定
                .setImageTextLoaderInterface(new GridViewPager.ImageTextLoaderInterface() {
                    @Override
                    public void displayImageText(ImageView imageView, TextView textView, int position) {
                        // 自己进行数据的绑定，灵活度更高，不受任何限制
                        imageView.setImageResource(iconS[position]);
                        textView.setText(titles[position]);
                    }
                })
                // Item 点击
                .setGridItemClickListener(new GridViewPager.GridItemClickListener() {
                    @Override
                    public void click(int position) {
                        Toast.makeText(getBaseContext(), "点击了" + titles[position] + position, Toast.LENGTH_SHORT).show();
                    }
                })
                // 设置 Item 长按
                .setGridItemLongClickListener(new GridViewPager.GridItemLongClickListener() {
                    @Override
                    public void longClick(int position) {
                        Toast.makeText(getBaseContext(), "长按了" + titles[position].split("_")[0], Toast.LENGTH_SHORT).show();
                    }
                })
                .show();

7、刷新数据

设置新属性，刷新

                gridViewPager
                // 数据大小有变化时，得设置
                        .setDataAllCount(titles.length)
            // 动态改变其他属性
                        .setRowCount(3)
                        .setColumnCount(3)
            // 再次 show()，gridViewPager 不为空时，走 notifyDataSetChanged()刷新数据
                        .show();

刷新指定页码数据（每页行列数、数据总数不变，只有某个数据的值改变时使用）

                // 页码从 0 开始，例如下面是只刷新第二页数据
                gridViewPager.notifyItemChanged(1)

实现就是如此简单

添加我个人微信号交流，记得添加时备注一下哦

本人公众号，也可关注一波，共同交流吧。