RecyclerView如何设置瀑布流

17人阅读 评论(0) 收藏 举报
一直在想着怎么描述这样的布局,毕竟用的是瀑布流的布局管理器,但是呢效果基本就是个网格布局,只是每列之间是上下错开的,还是觉得叫交错式网格布局吧。先看个效果。 

这里写图片描述
效果看起来应该很好实现的。这里仅仅是记录下自己实现的思路,然后贴出一些重要的代码。
基本思路就是运用StaggeredGridLayoutManager管理器来实现这种布局,在Recyclerview适配器中的onBindViewHolder中设置,将第一行和第三行上的首张图片设置一个margin值,距离顶部一个距离,这样既可实现该种布局。
其实还有一种思路也是运用瀑布流管理器,在自定义分割线中,根据position不同设置不同间隔距离,应该是可以的。
这里就用第一个思路,首先是Recyclerview的用法,这个相信大家都很熟悉了,管理器官方的有三种,线性管理器LinearLayoutManager,网格管理器GridLayoutManager,瀑布流管理器StaggeredGridLayoutManager,这里用的是瀑布流管理器:

mRecyclerView = (RecyclerView) findViewById(R.id.recyclerview);
        final StaggeredGridLayoutManager layoutManager = new StaggeredGridLayoutManager(3,StaggeredGridLayoutManager.VERTICAL);//定义瀑布流管理器,第一个参数是列数,第二个是方向。
        layoutManager.setGapStrategy(StaggeredGridLayoutManager.GAP_HANDLING_NONE);//不设置的话,图片闪烁错位,有可能有整列错位的情况。
        mRecyclerView.setLayoutManager(layoutManager);//设置瀑布流管理器
        mRecyclerView.addItemDecoration(new GridSpacingItemDecoration(40));//边距和分割线,需要自己定义
        mRecyclerView.setAdapter(new MyAdapter(this));//设置适配器
        mRecyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
            @Override
            public void onScrollStateChanged(RecyclerView recyclerView, int newState) {
                super.onScrollStateChanged(recyclerView, newState);
                layoutManager.invalidateSpanAssignments();//这行主要解决了当加载更多数据时,底部需要重绘,否则布局可能衔接不上。
            }
        });

上面的代码就是Recyclerview的使用了。接下来看适配器中的代码。

 class MyAdapter extends RecyclerView.Adapter<MyAdapter.MyViewHolder> {
         private Context context;
         private LayoutInflater inflater;
         public MyAdapter(Context context){
             this.context = context;
             inflater = LayoutInflater.from(context);
         }
        public final String[] imageUrls = new String[] {。。。}//这里是从网上加载的图片的链接组成的字符串数组。我这里是从《第一行代码》作者郭霖大神的http://blog.csdn.net/guolin_blog/article/details/10470797讲述瀑布流的文章中偷过来的。哈哈。不过都是网上的图片地址。

        @Override
        public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
            View inflate = inflater.inflate(R.layout.item_main, parent, false);//单个item的布局
            return new MyViewHolder(inflate);
        }

        @Override
        public int getItemCount() {
            return imageUrls.length;
        }

        @Override
        public void onBindViewHolder(final MyViewHolder holder, int position) {
            holder.textView.setText("风景" + position);
            //用了Glide加载图片,这是一款不错的图片加载框架,毕竟属于Google亲儿子了吧,不会用的也可以用picasso,这个框架参考picasso的,基本跟picasso一模一样。
            Glide.with(context)
                    .load(imageUrls[position])
                    .asBitmap()
                    .centerCrop()
                    .diskCacheStrategy(DiskCacheStrategy.NONE)//这里设置了不做任何缓存
                    .placeholder(R.drawable.kobe)//这是占位图。加载图片的一瞬间可以用来填充,万一网络不行还可以有个好的视觉效果。毕竟什么都不显示让人很绝望呀。。。
                    .into(new BitmapImageViewTarget(holder.imageView){
                        @Override
                        protected void setResource(Bitmap resource) {
                            super.setResource(resource);
                            //这里用来进行图片转换,转成圆形的图。
                            RoundedBitmapDrawable circleBitmap = RoundedBitmapDrawableFactory.create(context.getResources(),resource);
                            circleBitmap.setCircular(true);
                            holder.imageView.setImageDrawable(circleBitmap);
                        }
                    });
                    //这里就是让我们最终的效果跟Gridview不同的原因了,我们把第一列和第三列的首张图片设置距离顶部一个距离,这样布局错落有致,就是我们要的效果了
            if (position == 0 || position ==2) {
                LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(holder.imageView.getLayoutParams());
                lp.setMargins(0,100,0,0);
                holder.imageView.setLayoutParams(lp);
            } else {
                LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(holder.imageView.getLayoutParams());
                lp.setMargins(0,0,0,0);
                holder.imageView.setLayoutParams(lp);
            }
        }

        class MyViewHolder extends RecyclerView.ViewHolder{
            private ImageView imageView;
            private TextView textView;
            public MyViewHolder(View itemView) {
                super(itemView);
                imageView = (ImageView) itemView.findViewById(R.id.iv);
                textView = (TextView) itemView.findViewById(R.id.tv);
            }
        }
    }
查看评论

RecyclerView实现瀑布流布局

RecyclerView本身提供了三个LayoutManager的实现 LinearLayoutManager GridLayoutManager StaggeredGridLayoutManager...
  • tiankong1206
  • tiankong1206
  • 2015-07-27 18:37:08
  • 46889

RecyclerView瀑布流设置左、右、上、下的距离一样

RecyclerVeiw本身自带有距离设置的类,如下:只需要我们继承一下即可 public class SpaceBaseItemDecoration extends RecyclerView....
  • puyaCheer
  • puyaCheer
  • 2017-04-12 17:31:42
  • 1195

RecyclerView彩虹瀑布流实现

目录:     1.瀑布流的应用场景     2.瀑布流布局实现的简单分析     3.实现彩虹瀑布流 1.瀑布流的应用场景        瀑布流的应用在移动开发中还是比较常见的,譬如在一些图...
  • qq_28057577
  • qq_28057577
  • 2017-01-17 01:12:45
  • 1099

如何给recyclerView瀑布流设置均等间距

recyclerVIew 默认是不带间距的,但是我们可以通过SpacesItemDecoration方法给其设置间距,但是这样问题来了这样设置的间距如果有两列的话 中间的间距是你设置的间距的2倍,至于...
  • Applicaton
  • Applicaton
  • 2016-06-18 11:17:03
  • 12827

RecyclerView如何设置瀑布流

一直在想着怎么描述这样的布局,毕竟用的是瀑布流的布局管理器,但是呢效果基本就是个网格布局,只是每列之间是上下错开的,还是觉得叫交错式网格布局吧。先看个效果。 效果看起来应该很好实现的。...
  • qq_40072139
  • qq_40072139
  • 2018-04-15 10:25:04
  • 17

<em>RecyclerView瀑布流</em>

<em>RecyclerView</em>实现网络图片自适应高度的<em>瀑布流</em>... <em>recyclerview</em>之<em>瀑布流</em>左右间距均等<em>设置</em>简单实例 立即下载 上传者: android_dada 时间: 2017-08-26 综合评分: 0 积...
  • 2018年04月17日 00:00

Recyclerview之瀑布流分割线左右间距均等问题

今天来记录下瀑布流左右分割线均等设置! 在网上看了很多例子,都是什么万能分割线之类的,但是真正用到瀑布流的分割线却会出现不一致的情况。原因: 下面展示一下非瀑布流的item布局情况:上面那种布...
  • qq_33373648
  • qq_33373648
  • 2017-08-25 18:21:44
  • 946

RecyclerView瀑布流如何动态计算imageview的宽高

我们上一篇说到计算recyclerView均等的间距,在这个基础上我们要用瀑布流展示图片的时候,要想动态展示宽高的话,就要知道图片的宽高并且在adapter里面计算宽高,这个宽高可以让服务器获取当让我...
  • Applicaton
  • Applicaton
  • 2016-06-27 18:01:14
  • 3668

RecyclerView实现瀑布流布局

RecyclerView本身提供了三个LayoutManager的实现 LinearLayoutManager GridLayoutManager StaggeredGridLayoutMa...
  • llixiangjian
  • llixiangjian
  • 2016-06-29 17:32:02
  • 623

<em>RecyclerView</em>实现<em>瀑布流</em>

<em>RecyclerView</em>实现<em>瀑布流</em> 2015-07-04 上传大小:5.84MB <em>RecyclerView瀑布流</em> <em>RecyclerView</em>实现<em>瀑布流</em>效果。综合评分:4 收藏(3)评论(10)举报 ...
  • 2018年04月16日 00:00
    个人资料
    持之以恒
    等级:
    访问量: 2931
    积分: 423
    排名: 11万+
    文章分类