GridViewPager组件,短短几行代码即可实现美团首页分类多页展示效果,也可用于表情面板的展示

GridViewPager3.x

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

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

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

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

GridViewPager组件效果

在这里插入图片描述

内置了覆盖翻页的效果

覆盖的翻页效果

如何使用GridViewPager组件

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

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

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

dependencies {
	        implementation 'com.github.mtjsoft:GridPager:v3.4.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: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.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)
                // 设置是否显示指示器
                .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();
                    }
                })
                .show();

7、刷新数据

设置新属性,刷新

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

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

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

实现就是如此简单

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

在这里插入图片描述

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

在这里插入图片描述

PageGridViewViewPager 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每页大小8numColumns列数4isShowIndicator是否显示指示器trueselectedIndicator选中指示点资源IDR.mipmap.ic_dot_selectedunSelectedIndicator未选中指示点资源IDR.mipmap.ic_dot_normalindicatorGravity指示器位置centerindicatorPaddingLeft指示器左内边距0pxindicatorPaddingRight指示器右内边距0pxindicatorPaddingTop指示器上内边距0pxindicatorPaddingBottom指示器下内边距0pxindicatorPadding指示器内边距0pxindicatorBackground指示器背景颜色Color.WHITEitemViewItem布局R.layout.item_view约定规则Item布局必须给定具体高度,默认itemView布局的高度为@dimen/item_height=80dpItem布局 TextView的id 为R.id.tv_item_nameItem布局 ImageView的id 为R.id.iv_item_iconItem默认点击效果R.drawable.selector_item_view_bgItem点击颜色值:R.color.item_view_selected_colorItem背景颜色值:R.color.item_view_normal_color一行四列效果图两行四列效果图自定义Item布局效果图PageGridView使用Gradle 依赖库implementation 'com.wihaohao:PageGridView:1.0.1'默认布局一般默认参数即可满足需求<com.wihaohao.PageGridView           android:id="@ id/vp_grid_view"           android:layout_width="match_parent"           android:layout_height="wrap_content"           />一行4列的布局  <com.wihaohao.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.wihaohao.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.wihaohao.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"/>ItemModelpublic 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 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) {         }     }继承VpGridView.ItemModel 设置ItemViewpublic 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);     } }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("测试" i,R.mipmap.ic_launcher));             mList2.add(new CustomModel("标题" i));         }     } }
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

帅气的铅笔

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值