RecyclerView本身提供了三个LayoutManager的实现

  • LinearLayoutManager
  • GridLayoutManager
  • StaggeredGridLayoutManager

第一个和第二个大家比較经常使用。今天我们就来使用第三个比較陌生的StaggeredGridLayoutManager,让你分分钟实现瀑布流布局。

首先来看下最后的效果

好吧,让我们来实现它吧

首先是Item的布局masonry_item.xml非常easy,就是一张图片加文字,item背景设置为白色

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@color/white"> <ImageView
android:id="@+id/masonry_item_img"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:scaleType="centerCrop"/>
<TextView
android:id="@+id/masonry_item_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"/>
</LinearLayout>

为了简单起见。我们如果每一个item的数据是一个产品信息

public class Product {
private int img;
private String title; public Product(int img, String title) {
this.img = img;
this.title = title;
} public int getImg() {
return img;
} public void setImg(int img) {
this.img = img;
} public String getTitle() {
return title;
} public void setTitle(String title) {
this.title = title;
}
}

recyclerView的adapter也非常easy,构造方法接受产品列表数据源

public class MasonryAdapter extends RecyclerView.Adapter<MasonryAdapter.MasonryView>{
private List<Product> products; public MasonryAdapter(List<Product> list) {
products=list;
} @Override
public MasonryView onCreateViewHolder(ViewGroup viewGroup, int i) {
View view= LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.masonry_item, viewGroup, false);
return new MasonryView(view);
} @Override
public void onBindViewHolder(MasonryView masonryView, int position) {
masonryView.imageView.setImageResource(products.get(position).getImg());
masonryView.textView.setText(products.get(position).getTitle()); } @Override
public int getItemCount() {
return products.size();
} public static class MasonryView extends RecyclerView.ViewHolder{ ImageView imageView;
TextView textView; public MasonryView(View itemView){
super(itemView);
imageView= (ImageView) itemView.findViewById(R.id.masonry_item_img );
textView= (TextView) itemView.findViewById(R.id.masonry_item_title);
} } }

主界面Activity代码就能够把数据源和view连起来了

 @Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
recyclerView= (RecyclerView) findViewById(R.id.recycler);
//设置layoutManager
recyclerView.setLayoutManager(new StaggeredGridLayoutManager(2,StaggeredGridLayoutManager.VERTICAL));
//设置adapter
initData();
MasonryAdapter adapter=new MasonryAdapter(productList);
recyclerView.setAdapter(adapter);
//设置item之间的间隔
SpacesItemDecoration decoration=new SpacesItemDecoration(16);
recyclerView.addItemDecoration(decoration); }

第一

大家看到我们把recyclerview的layoutManager设置成了

new StaggeredGridLayoutManager(2,StaggeredGridLayoutManager.VERTICAL)

參数含义显而易见,2就是2列,第二个參数是垂直方向

第二

SpacesItemDecoration decoration=new SpacesItemDecoration(16);
recyclerView.addItemDecoration(decoration);

设置间隔。我们自己定义了一个SpacesItemDecoration,代码非常easy

public class SpacesItemDecoration extends RecyclerView.ItemDecoration {

    private int space;

    public SpacesItemDecoration(int space) {
this.space=space;
} @Override
public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
outRect.left=space;
outRect.right=space;
outRect.bottom=space;
if(parent.getChildAdapterPosition(view)==0){
outRect.top=space;
}
}
}

重点就这2个地方 ,几行代码就实现了一个美丽的瀑布流布局。有兴趣自己去玩下哦。

Github点我哦

RecyclerView实现瀑布流布局的更多相关文章

  1. android RecyclerView的瀑布流布局案例

    1.先创建 activity_water_fall.xml 和 activity_water_fall_item.xml <?xml version="1.0" encodi ...

  2. 基于RecyclerView的瀑布流实现

    fragment的布局: <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" xm ...

  3. 【Android】14.0 UI开发(五)——列表控件RecyclerView的瀑布布局排列实现

    1.0 列表控件RecyclerView的瀑布布局排列实现,关键词StaggeredGridLayoutManager LinearLayoutManager 实现顺序布局 GridLayoutMan ...

  4. JS瀑布流布局

    好久没有更新博客喽,今天来说一个瀑布流布局. 瀑布流在很多网站已有很多,现在只说一下简单的实现原理吧, 1.计算一行可以排放几个元素 2.建立一个数组用于存放第一行的每个元素的高度. 3.得到数组中的 ...

  5. CSS3学习总结——实现瀑布流布局与无限加载图片相册

    首先给大家看一下瀑布流布局与无限加载图片相册效果图: 一.pic1.html页面代码如下: <!DOCTYPE html> <html> <head> <me ...

  6. myWaterfall - jQuery瀑布流布局插件

    myWaterfall - jQuery瀑布流布局插件 Demo http://jsfiddle.net/q3011893/p5k2ogy8/embedded/result,html,css,js/ ...

  7. jquery实现简单瀑布流布局(续):图片懒加载

    # jquery实现简单瀑布流布局(续):图片懒加载 这篇文章是jquery实现简单瀑布流布局思想的小小扩展.代码基于前作的代码继续完善. 图片懒加载就是符合某些条件时才触发图片的加载.最常见的具体表 ...

  8. jquery实现简单瀑布流布局

    jquery实现简单瀑布流布局 是开头都会说的原理 瀑布流布局有两种,一种是固定列,一种是非固定列.在此主要记述第一种的实现. 固定列的特征是:无论页面如何缩放,每行的总列数都一致. 一行4列的瀑布流 ...

  9. JavaScript——基本的瀑布流布局及ajax动态新增数据

    本文用纯js代码手写一个瀑布流网页效果,初步实现一个基本的瀑布流布局,以及滚动到底部后模拟ajax数据加载新图片功能. 缺点: 1. 程序不是响应式,不能实时调整页面宽度: 2. 程序中当新增ajax ...

随机推荐

  1. 131.typename在嵌套类中的作用

    #include <iostream> using namespace std; class myit { public: static int num; class itit { }; ...

  2. ubuntu12.04

    最近越来越觉得必须用Linux了,于是装了15.04,好不习惯的感觉,思维还是10.10的时代. 尝试做种http://jingyan.baidu.com/article/a681b0dedad55c ...

  3. 一次AIX LVM PV重复PVID故障处理记录

    故障背景:客户需要把AIX 5.3.10上的一些VG做两台存储之间的LVM级别的Mirror,存储使用的是两台EMC DMX3,但是由于两套SAN存储之前是使用EMC的软件做存储级别的Mirror,所 ...

  4. python 异步IO

    参考链接:https://www.liaoxuefeng.com/wiki/0014316089557264a6b348958f449949df42a6d3a2e542c000/00143208573 ...

  5. Dynamic Rankings(分块)

    P2617 Dynamic Rankings 题目描述 给定一个含有n个数的序列a[1],a[2],a[3]--a[n],程序必须回答这样的询问:对于给定的i,j,k,在a[i],a[i+1],a[i ...

  6. [CQOI2013]新Nim游戏(线性基)

    P4301 [CQOI2013]新Nim游戏 题目描述 传统的Nim游戏是这样的:有一些火柴堆,每堆都有若干根火柴(不同堆的火柴数量可以不同).两个游戏者轮流操作,每次可以选一个火柴堆拿走若干根火柴. ...

  7. ImageLoader的简单分析(二)

    在<ImageLoader的简单分析>这篇博客中对IImageLoader三大组件的创建过程以及三者之间的关系做了说明.同一时候文章的最后也简单的说明了一下ImageLoader是怎么通过 ...

  8. maven中使用mybatis

    1.Mybatis优缺点 优点: Mybatis实现了对Dao层的封装,隔离了SQL语句,便于管理,避免了像JDBC那样操作数据集,便于扩展等等. 缺点: Mybatis属于?半自动“ORM”,比Hi ...

  9. POJ 3070 Fibonacci 矩阵高速求法

    就是Fibonacci的矩阵算法.只是添加一点就是由于数字非常大,所以须要取10000模,计算矩阵的时候取模就能够了. 本题数据不强,只是数值本来就限制整数,故此能够0ms秒了. 以下程序十分清晰了, ...

  10. iOS开发之软键盘使用小技巧

    在iOS开发过程中,有时候须要弹出软键盘进行输入,有时候又须要在某些情况下隐藏软键盘,以提高用户体验. 今天有几个关于软键盘的小技巧和大家分享. (1)仅仅弹出数字键盘 有某些需求中,要求用户仅仅能在 ...