RecyclerView实现瀑布流布局
2015-07-27 18:37
316 查看
RecyclerView本身提供了三个LayoutManager的实现
LinearLayoutManager
GridLayoutManager
StaggeredGridLayoutManager
第一个和第二个大家比较常用,今天我们就来使用第三个比较陌生的StaggeredGridLayoutManager,让你分分钟实现瀑布流布局。
首先来看下最后的效果
好吧,让我们来实现它吧
首先是Item的布局masonry_item.xml很简单,就是一张图片加文字,item背景设置为白色
为了简单起见,我们假设每个item的数据是一个产品信息
recyclerView的adapter也很简单,构造方法接受产品列表数据源
主界面Activity代码就可以把数据源和view连起来了
第一
大家看到我们把recyclerview的layoutManager设置成了
参数含义显而易见,2就是2列,第二个参数是垂直方向
第二
设置间隔,我们自定义了一个SpacesItemDecoration,代码非常简单
重点就这2个地方 ,几行代码就实现了一个漂亮的瀑布流布局,有兴趣自己去玩下哦。
LinearLayoutManager
GridLayoutManager
StaggeredGridLayoutManager
第一个和第二个大家比较常用,今天我们就来使用第三个比较陌生的StaggeredGridLayoutManager,让你分分钟实现瀑布流布局。
首先来看下最后的效果
好吧,让我们来实现它吧
首先是Item的布局masonry_item.xml很简单,就是一张图片加文字,item背景设置为白色
[code]<?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的数据是一个产品信息
[code]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也很简单,构造方法接受产品列表数据源
[code]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连起来了
[code] @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设置成了
[code]new StaggeredGridLayoutManager(2,StaggeredGridLayoutManager.VERTICAL)
参数含义显而易见,2就是2列,第二个参数是垂直方向
第二
[code]SpacesItemDecoration decoration=new SpacesItemDecoration(16); recyclerView.addItemDecoration(decoration);
设置间隔,我们自定义了一个SpacesItemDecoration,代码非常简单
[code]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个地方 ,几行代码就实现了一个漂亮的瀑布流布局,有兴趣自己去玩下哦。
相关文章推荐
- Android中Handler与Thread的区别
- hihocoder挑战赛13A
- 生成可重集的排列(方法)
- Android开发之SQLite的使用方法
- g++编译问题:skipping incompatible /usr/lib//libboost_system.so when searching for -lboost_system
- 发布iOS应用(Xcode5)到App Store详细解析
- 精通CSS+DIV简单小结(三)
- 百度地图用城市名称切换城市更新地图
- Maven 坑
- 剑指Offer面试题6(Java版):重建二叉树
- 关于在打包Jar文件时遇到的资源路径问题(一)
- hdu 1232 畅通工程
- 使用PHP的CURL模拟POST采集开了viewstate的asp.net网页数据
- 【Trie】bzoj1954——我终于当了权限狗了!
- hdu 5306 Gorgeous Sequence
- 简单实现Android平台多语言
- centos 安装 mysql
- Java 静态变量的继承
- Intellij IDEA 14.x 菜单项中Compile、Make和Build的区别
- Android中Intent传递Object和ArrayList<Object>对象---笔记