首页 > 其他 > 详细

RecyclerView实现瀑布流布局

时间:2015-07-27 18:48:27      阅读:58968      评论:3      收藏:0      [点我收藏+]

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实现瀑布流布局

原文:http://blog.csdn.net/tiankong1206/article/details/47088995

(37)
(22)
   
举报
评论 一句话评论(3
2015-09-17 17:36:08
编译后出现问题,出现的不是瀑布流布局,只是平常一般的布局,可否留下QQ指导一下,或者加1421761872,,可否请教几个问题,谢谢
回复
 (21)
 (15)
2015-10-27 15:29:40
怎么实现滚动到底部监听然后分页处理呢,linearlayoutmanager 用了出错,求解
回复
 (13)
 (12)
2015-12-14 11:16:30
好用,谢谢。
回复
 (12)
 (5)
3条  
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!