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. lucene LZ4 会将doc存储在一个chunk里进行Lz4压缩 ES的_source便如此

    默认情况下,Elasticsearch 用 JSON 字符串来表示文档主体保存在 _source 字段中.像其他保存的字段一样,_source 字段也会在写入硬盘前压缩.The _source is ...

  2. 洛谷P3195 [HNOI2008]玩具装箱TOY(单调队列优化DP)

    题目描述 P教授要去看奥运,但是他舍不下他的玩具,于是他决定把所有的玩具运到北京.他使用自己的压缩器进行压缩,其可以将任意物品变成一堆,再放到一种特殊的一维容器中.P教授有编号为1...N的N件玩具, ...

  3. 51Nod 1010 只包含因子2 3 5的数(打表+二分)

    K的因子中只包含2 3 5.满足条件的前10个数是:2,3,4,5,6,8,9,10,12,15. 所有这样的K组成了一个序列S,现在给出一个数n,求S中 >= 给定数的最小的数. 例如:n = ...

  4. bzoj2100 [Usaco2010 DEC]Apple Delivery苹果贸易

    题目描述 一张P个点的无向图,C条正权路.CLJ要从Pb点(家)出发,既要去Pa1点NOI赛场拿金牌,也要去Pa2点CMO赛场拿金牌.(途中不必回家)可以先去NOI,也可以先去CMO.当然神犇CLJ肯 ...

  5. php如何openssl_encrypt加密解密

    最近在对接客户的CRM系统,获取令牌时,要用DES方式加密解密,由于之前没有搞错这种加密方式,经过请教了"百度"和"谷歌"两个老师后,结合了多篇文档内容后,终于 ...

  6. scrapy xpath选择器多级选择错误

    在学习scrapy中用xpath提取网页内容时,有时要先提取出一整个行标签内容,再从行标签里寻找目标内容.出现一个错误. 错误代码: def parse(self, response): sel = ...

  7. KNN分类器

    KNN学习(K-Nearest Neighbor algorithm,K最邻近方法 )是一种统计分类器,对数据的特征变量的筛选尤其有效. 基本原理 KNN的基本思想是:输入没有标签(标注数据的类别), ...

  8. 遇到 Form 性能问题怎么办 performance issue

    性能问题是比較复杂的问题. 一般由performance team 负责, 可是常见的情况是, 我们 INV team 定义的 view 不好, 导致查询性能较差. 这个必须由产品组和 perform ...

  9. 在eclipse中公布maven的多模块web项目到tomcat上及单步debug模块jar

    1.在eclipse中公布maven的多模块web项目到tomcat eclipse和maven及tomcat的部署略去,还有maven的基础知识和使用在此处略去. 依照例如以下的步骤操作: 将lib ...

  10. Android LruCache 压缩图片 有效避免程序OOM

    转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/9316683 本篇文章主要内容来自于Android Doc,我翻译之后又做了些加工, ...