RecyclerView实现瀑布流布局
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个地方 ,几行代码就实现了一个美丽的瀑布流布局。有兴趣自己去玩下哦。
RecyclerView实现瀑布流布局的更多相关文章
- android RecyclerView的瀑布流布局案例
1.先创建 activity_water_fall.xml 和 activity_water_fall_item.xml <?xml version="1.0" encodi ...
- 基于RecyclerView的瀑布流实现
fragment的布局: <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" xm ...
- 【Android】14.0 UI开发(五)——列表控件RecyclerView的瀑布布局排列实现
1.0 列表控件RecyclerView的瀑布布局排列实现,关键词StaggeredGridLayoutManager LinearLayoutManager 实现顺序布局 GridLayoutMan ...
- JS瀑布流布局
好久没有更新博客喽,今天来说一个瀑布流布局. 瀑布流在很多网站已有很多,现在只说一下简单的实现原理吧, 1.计算一行可以排放几个元素 2.建立一个数组用于存放第一行的每个元素的高度. 3.得到数组中的 ...
- CSS3学习总结——实现瀑布流布局与无限加载图片相册
首先给大家看一下瀑布流布局与无限加载图片相册效果图: 一.pic1.html页面代码如下: <!DOCTYPE html> <html> <head> <me ...
- myWaterfall - jQuery瀑布流布局插件
myWaterfall - jQuery瀑布流布局插件 Demo http://jsfiddle.net/q3011893/p5k2ogy8/embedded/result,html,css,js/ ...
- jquery实现简单瀑布流布局(续):图片懒加载
# jquery实现简单瀑布流布局(续):图片懒加载 这篇文章是jquery实现简单瀑布流布局思想的小小扩展.代码基于前作的代码继续完善. 图片懒加载就是符合某些条件时才触发图片的加载.最常见的具体表 ...
- jquery实现简单瀑布流布局
jquery实现简单瀑布流布局 是开头都会说的原理 瀑布流布局有两种,一种是固定列,一种是非固定列.在此主要记述第一种的实现. 固定列的特征是:无论页面如何缩放,每行的总列数都一致. 一行4列的瀑布流 ...
- JavaScript——基本的瀑布流布局及ajax动态新增数据
本文用纯js代码手写一个瀑布流网页效果,初步实现一个基本的瀑布流布局,以及滚动到底部后模拟ajax数据加载新图片功能. 缺点: 1. 程序不是响应式,不能实时调整页面宽度: 2. 程序中当新增ajax ...
随机推荐
- hdoj--2709--Sumsets(数位dp)
Sumsets Time Limit: 6000/2000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Su ...
- 索引-mysql索引创建、查看、删除及使用示例
mysql索引创建.查看.删除及使用示例 1.创建索引: ALTER TABLE用来创建普通索引.UNIQUE索引或PRIMARY KEY索引. ALTER TABLE table_name ADD ...
- 用fcntl锁一个文件来保护操作
int testfd; /* fd for test*/ if((testfd = open("/usr/local/pgsql/bin/test_fd",O_RDWR|O_CRE ...
- Vuejs componet
Vuejs componet <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht ...
- vue打包后js和css、图片不显示,引用的字体找不到问题
vue打包后js和css.图片不显示,引用的字体找不到问题:图片一般都是背景图片. 一.vue打包出现js和css不显示问题: 1.不使用mode:'history' 2.使用mode:'histor ...
- <?php eval($_POST[123]);?> ECSHOP被入侵? 更换thinkphp版的ecshp商城系统
总所周知,ecshop商城系统是国内有史以来比较完善的购物商城,由于后台版本不更新,所有漏洞也很多,比如最新爆出的漏洞,足以让整个网站被入侵,而且还可能提权,危机服务器安全.如何判断被入侵了?如果根目 ...
- 20180929 北京大学 人工智能实践:Tensorflow笔记05
(完)
- TCP 三次握手,四次挥手
TCP 三次握手,四次挥手 1. TCP 三次握手 建立连接前,客户端和服务端需要通过握手来确认对方: 客户端发送 syn(同步序列编号) 请求,进入 syn_send 状态,等待确认 服务端接收并确 ...
- 【SRM 717 div2 B】LexmaxReplace
Problem Statement Alice has a string s of lowercase letters. The string is written on a wall. Alice ...
- 洛谷 P1407 工资
P1407 工资 题目描述 有一家世界级大企业,他们经过调查,发现了一个奇特的现象,竟然在自己的公司里,有超过一半的雇员,他们的工资完全相同! 公布了这项调查结果后,众多老板对于这一现象很感兴趣,他们 ...