7.1 RecyclerView 实现瀑布流
RecyclerView实现瀑布流布局
时间：
2015-07-27 18:48:27 http://www.bubuko.com/infodetail-999014.html 阅读：
9193 评论：
3 收藏：
0 [点我收藏+]
标签：瀑布流 android 动画 布局
RecyclerView本身提供了三个LayoutManager的实现
- LinearLayoutManager
- GridLayoutManager
- StaggeredGridLayoutManager
第一个和第二个大家比较常用，今天我们就来使用第三个比较陌生的StaggeredGridLayoutManager，让你分分钟实现瀑布流布局。
首先来看下最后的效果
好吧，让我们来实现它吧
首先是Item的布局masonry_item.xml很简单，就是一张图片加文字,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也很简单，构造方法接受产品列表数据源
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,代码非常简单
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 动画 布局
原文：http://blog.csdn.net/tiankong1206/article/details/47088995
踩
(
5)
赞
(
6)
举报