最简单实现网格布局分页效果 (recyclerview + snaphelper)

最新推荐文章于 2024-05-26 09:44:14 发布
置顶 最新推荐文章于 2024-05-26 09:44:14 发布
阅读量3.6k 收藏 7
点赞数 2
分类专栏： 自定义View recyclerview 文章标签： Gridpager recyclerview  snaphelper android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33635618/article/details/94739741
版权

运行截图

　　　　　　　　　　　　　　　　　　　　　

 

基于 PagerSnapHelper 自定义　GridPagerSnapHelper.

支持横向与纵向滑动,行列数量可自定义传入

 

 private void initGridePager() {
        //　3行3列,横向
        int colum = 3;
        int row = 3;
        int orientation = GridLayoutManager.HORIZONTAL;
        int spanCount = (GridLayoutManager.VERTICAL == orientation) ? colum : row;

        // 设置布局管理器
        Gri
最低0.47元/天 解锁文章
夜PP
关注
  • 2
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
专栏目录
GridLayoutManager+SnapHelper简单实现横向分页
mr_lichao的博客
11-08 5220
实现功能：在网格布局下（GridLayoutManager），实现横向滚动，多行多列，分页滚动效果 1.重写SnapHelper类 import android.graphics.PointF; import android.support.annotation.NonNull; import android.support.annotation.Nullable; import andro...
RecycleView的Grid效果显示实现
Blanknnn的博客
03-15 1987
RecycleView是代替listView的升级版，具有不用优化，展示效果众多等特点，这里展示的是RecycleView的Grid显示实现
探索高效网格布局：GridPagerSnapHelper
最新发布
gitblog_00037的博客
05-26 294
探索高效网格布局：GridPagerSnapHelper 项目地址:https://gitcode.com/hanhailong/GridPagerSnapHelper 在Android开发中，实现优雅的网格布局和滑动切换效果是一项常见的任务。今天，我们将向您推荐一个强大的开源工具——GridPagerSnapHelper。这个库不仅提供了水平和垂直方向的分页布局，还支持与指示器完美配合，让您的应...
GridPager:GridViewPager组件：采用ViewPager2 + FlexBoxLayout 实现方式，轻松实现类似美团首页分类多页展示。也可用于表情面板的展示。 链式调用，属性配置，几行代码轻松搞定
05-13
GridViewPager3.x GridViewPager3.0组件：采用RecycleView + FlexBoxLayout + PagerSnapHelper实现方式，轻松实现类似美团首页分类多页展示。也可用于表情面板的展示。 链式调用，属性配置，几行代码轻松搞定。 v3.3.0 开始采用 viewpager2 + FlexBoxLayout 实现 ① 应用的首页经常需要用到这样的分类多页展示的效果，还有些消息输入框需要这样的表情面板。 ② 既然是常用的，作为懒惰的我，肯定不会每次都去写一遍。网上也找了很多类似的例子，但始终不是我想要的简洁接入使用的方式。要么就是加载图片有限制，要么就是样式限制的太死，还得改源码，我不喜欢，我得造一个轮子。。。必须封装一个简单好用的组件，做到几行代码就可实现效果才行。于是乎，GridViewPager组件就诞生了。 GridViewPager组件效
android网格布局自动填充,Android 网格分页布局 pager-layoutmanager
weixin_34984235的博客
05-25 710
PagerLayoutManager具有分页功能的 Recyclerview 布局管理器，主打分页，可以替代部分场景下的网格布局，线性布局，以及一些简单的ViewPager，但也有一定的局限性，请选择性使用。1. 效果预览2. 支持的特性网格布局，设置合适的行列数可以模拟线性布局或者ViewPager。分页效果，支持自动回调页码的变化(总页数和当前页数)。布局方向，支持横向滚动和垂直滚动。方向...
RecyclerView卡片切换效果(翻页滚动的效果) ----- PagerSnapHelper
周末
06-24 3656
PagerSnapHelper，官方解释，PagerSnapHelper can help achieve a similar behavior to ViewPager.，就是让RecyclerView能像ViewPager一样工作。 PageSnapHelper衍生于SnapHepler，SnapHepler是什么？从代码可以看出该组件本质上就是一个RecyclerView.OnFlingListener public abstract class SnapHelper extends Recyc
RecyclerView+PagerSnapHelper实现抖音首页翻页的Viewpager效果
08-25
最后，我们使用snapHelper.attachToRecyclerView(mRecyclerView)将PagerSnapHelper附加到RecyclerView上，从而实现了翻页的效果。 RecyclerView+PagerSnapHelper实现抖音首页翻页的Viewpager效果可以实现非常流畅的...
Android Recyclerview实现水平分页GridView效果示例
01-04
很明显横向滑动的分页，第一反应就是使用ViewPager，毕竟只要通过自定义ViewPager，实现这个效果还是很容易，但是实际中问题时，当前模块是Recyclerview中某一个Holder，为了性能，肯定尽量使用Recyclerview去复用...
RecyclerView-SnapHelper:SnapHelper实现item随手势缩放的效果
05-18
在本项目"RecyclerView-SnapHelper:SnapHelper实现item随手势缩放的效果"中，我们将探讨如何利用SnapHelper来实现用户手势操作时，RecyclerView中的Item能够进行平滑的缩放效果。 首先，SnapHelper的基本用法是通过...
PageGridView-ViewPager GridView组合控件实现网格布局分页效果.zip
09-23
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));         }     } }
Android-DraggableGridViewPager-仿zaker效果的拖拽排序.zip
09-24
仿zaker效果的拖拽排序。可以动态设置列数，动态增加或者减少item，当一页填满自动增加到下一页，当页数大于1，可以左右翻页。项目地址：https://github.com/zzhouj/Android-DraggableGridViewPager 效果图：  如何使用：xml中创建<com.coco.draggablegridviewpager.DraggableGridViewPager><com.coco.draggablegridviewpager.DraggableGridViewPager         android:id="@ id/draggable_grid_view_pager"         android:layout_width="match_parent"         android:layout_height="match_parent"         android:paddingBottom="20dp"         android:paddingLeft="20dp"         android:paddingRight="60dp"         android:paddingTop="20dp" >     </com.coco.draggablegridviewpager.DraggableGridViewPager>2. 为DraggableGridViewPager设置AdaptermAdapter = new ArrayAdapter<String>(this, 0) {     @Override     public View getView(int position, View convertView, ViewGroup parent) {         final String text = getItem(position); if (convertView == null) {     convertView = (TextView) getLayoutInflater().inflate(R.layout.draggable_grid_item, null); } ((TextView) convertView).setText(text); return convertView;     } }; mDraggableGridViewPager.setAdapter(mAdapter);3. 为DraggableGridViewPager设置监听器mDraggableGridViewPager.setOnPageChangeListener(new OnPageChangeListener() {//页面滚动监听 @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {//页面正在滚动时触发     //System.out.println("onPageScrolled 滚动了"); } @Override public void onPageSelected(int position) {//由于页面滚动，导致页面发生变化     //System.out.println("onPageScrolled 页面变化了 position="   position); } @Override public void onPageScrollStateChanged(int state) {//滚动时，监听滚动状态的变化     //System.out.println("onPageScrolled 滚动状态state="   state); } }); mDraggableGridViewPager.setOnItemClickListener(new OnItemClickListener() {//单击某一item时触发 @Override public void onItemClick(AdapterView<?> parent, View view, int position, long id) { showToast(((TextView) view).getText().toString()); } }); mDraggableGridViewPager.setOnItemLongClickListener(new OnItemLongClickListener() {//长按某一item触发 @Override public boolean onItemLongClick(AdapterView<?> parent, View view, int position, long id) { showToast(((TextView) view).getText().toString()   " long clicked!!!"); return true; } }); mDraggableGridViewPager.setOnRearrangeListener(new OnRearrangeListener() {//拖动导致重新排序触发 @Override public void onRearrange(int oldIndex, int newIndex) { System.out.println("onPageScrolled OnRearrangeListener.onRearrange from="   oldIndex   ", to="   newIndex); String item = mAdapter.getItem(oldIndex); mAdapter.setNotifyOnChange(false); mAdapter.remove(item); mAdapter.insert(item, newIndex); mAdapter.notifyDataSetChanged(); } });
GravitySnapHelper：将RecyclerView捕捉到边缘的SnapHelper
02-24
GravitySnapHelper SnapHelper，将RecyclerView捕捉到边缘。 设置 将此添加到您的build.gradle中： implementation ' com.github.rubensousa:gravitysnaphelper:2.2.1 ' 如何使用 您可以创建GravitySnapHelper，也可以使用GravitySnapRecyclerView。 如果要直接使用GravitySnapHelper，则只需创建它并将其附加到RecyclerView： val snapHelper = GravitySnapHelper ( Gravity . START ) snapHelper.attachToRecyclerView(recyclerView) 如果要使用GravitySnapRecyclerView，则可以使用以下xml属性进行自定义
Android，自定义RecyclerView，实现分页效果
12-08
本文将深入探讨如何自定义RecyclerView以实现分页加载效果，从而提高用户体验并减少内存消耗。 首先，我们需要了解分页加载的基本概念。在Android应用中，分页加载是指当用户滚动到列表底部时，动态加载更多数据，...
recyclerview 实现viewpager grideview分页效果 GrideSnapHelper
qq_35599978的博客
03-30 1655
为了逼自己学习，所以瞎折腾一下，让自己张点见识。项目中原来使用的是ViewPager + GrideView 实现的卡片滑动，代码挺多的，我非得想改造成用recyclerView实现，话说折腾成功。先看下效果。每页三列，滑动停止后自动找到最近的一页停下。大多数人都是直接实现SnapHelper,但是我武功没那么高强,况且只要能解决问题的同志就是好裁缝!对于那些没有问题制造困难也要解决问题的好同志,...
RecyclerView 几种布局效果的实现
xw_414的博客
03-22 1066
RecyclerView布局的几种 效果 如下： 1.瀑布流的效果—&gt;实现横向滑动展示两行 gridRecyclrvire.setLayoutManager(newStaggeredGridLayoutManager(2, StaggeredGridLayoutManager.HORIZONTAL)); 2.网格布局效果—&gt; 实现GridView纵向滑动两列 ...
RecycleView实现网格整页滑动
huang_xiao_yu的博客
04-22 2253
需求分析 这篇博客写作来源也是项目需求 产品经理说：六宫格展示一页数据，用户左滑/右滑的时候，要整页滑动的效果。 解释这句话的意思就是： （1）一页只能展示6条数据； （2）只支持横向滑动，用户只能一页一页的滑（相当于用户一次要滑动6条数据）； （3）用户左滑是向前翻页，右上角页码随之变换； （4）用户右滑是向后翻页，右上角页码随之变换； （5）点击单条数据，可以跳转这道菜的详情页面。 以下是产品...
RecyclerView和网格布局有什么不同
05-27
RecyclerView 和网格布局不是同一个东西，它们是两个不同的概念。 RecyclerView 是一个强大的、高度可定制的滚动列表视图控件，它可以支持垂直和横向滚动，还可以支持瀑布流布局和网格布局等多种布局方式。RecyclerView 与 ListView 相比，具有更好的性能和更灵活的布局方式。 而网格布局是一种常见的布局方式，它将视图组织成一个网格状的结构，每个视图都被放置在一个矩形框中。网格布局可以用于显示图像、文本或其他视图，并支持在多个列和行之间对视图进行对齐和间距设置等。 在 Android 中，您可以使用 GridLayout 来实现网格布局。GridLayout 是一个灵活的布局管理器，它可以将视图组织成一个网格状的结构，并支持在多个列和行之间对视图进行对齐和间距设置等。 当您需要在应用程序中显示一个类似于网格的视图时，可以使用 RecyclerView 和网格布局。如果您需要在视图中显示复杂的数据列表，并需要支持滚动、分页和数据集更新等高级功能，建议使用 RecyclerView；如果您只需要简单地在视图中显示网格状的视图，并且没有复杂的交互需求，可以使用 GridLayout 来实现网格布局。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值