文档章节

RecyclerView实现瀑布流布局

xunfang
 xunfang
发布于 2016/03/01 16:54
字数 498
阅读 68
收藏 0

RecyclerView本身提供了三个LayoutManager的实现

  • LinearLayoutManager

  • GridLayoutManager

  • 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个地方 ,几行代码就实现了一个漂亮的瀑布流布局,有兴趣自己去玩下哦。

本文转载自:http://blog.csdn.net/jdsjlzx/article/details/20695279

共有 人打赏支持
xunfang
粉丝 0
博文 51
码字总数 7950
作品 0
海淀
程序员
私信 提问
RecyclerView的基础使用

RecyclerView的基本功能介绍: 1. 通过setLayoutManager方法可以设置布局,几个子类布局如下: -> LinearLayoutManager(ListView形式的布局) -> GridLayoutManager(GridView形式的布局) -> ...

丢掉过去重新再来
2015/12/08
181
0
RecyclerView使用总结-------上

前言 学习使用RecyclerView也有一段时间,一直都没有时间做个总结,就抽空想把RecyclerView的一些使用方法总结出来,方便大家也方便自己查阅。 简介 RecyclerView是support.v7包中的控件,可...

CaostGrace
05/15
0
0
Android RecyclerView 使用完全解析 体验艺术般的控件

转载请标明出处: http://blog.csdn.net/lmj623565791/article/details/45059587; 本文出自:【张鸿洋的博客】 概述 RecyclerView出现已经有一段时间了,相信大家肯定不陌生了,大家可以通过...

丁佳辉
2016/03/07
129
0
【转载】Android RecyclerView 使用完全解析 体验艺术般的控件

崇拜下鸿洋大神,原文地址:http://blog.csdn.net/lmj623565791/article/details/45059587 概述 RecyclerView出现已经有一段时间了,相信大家肯定不陌生了,大家可以通过导入support-v7对其进...

桀骜不驯24
09/11
0
0
关于RecyclerView你知道的不知道的都在这了(上)

最近打算花点精力来研究 RecyclerView 这个控件架构和原理,对我来说,难度很大,我不清楚最后能不能彻底搞清楚,这个系列的博客会不会被太监,但我会尽我最大努力,并将这整个过程分享出来。...

请叫我dasu
06/10
0
0

没有更多内容

加载失败,请刷新页面

加载更多

oh-my-zsh 自定义

GitHub 地址 基于 oh-my-zsh 的自定义配置,增加了一些个人常用插件与皮肤。 采用的是 git submodule 来维护,包括 oh-my-zsh,之所以这么搞,主要是手头有多台 linux 需要维护, 每台机器、...

郁也风
今天
6
0
Docker安装踩坑:E_FAIL 0x80004005的解决

参考 菜鸟教程--Windows Docker 安装 http://www.runoob.com/docker/windows-docker-install.html 官方文档-Install Docker Toolbox on Windows https://docs.docker.com/toolbox/toolbox_in......

karma123
今天
5
0
js垃圾回收机制和引起内存泄漏的操作

JS的垃圾回收机制了解吗? Js具有自动垃圾回收机制。垃圾收集器会按照固定的时间间隔周期性的执行。 JS中最常见的垃圾回收方式是标记清除。 工作原理:是当变量进入环境时,将这个变量标记为“...

Jack088
昨天
17
0
大数据教程(10.1)倒排索引建立

前面博主介绍了sql中join功能的大数据实现,本节将继续为小伙伴们分享倒排索引的建立。 一、需求 在很多项目中,我们需要对我们的文档建立索引(如:论坛帖子);我们需要记录某个词在各个文...

em_aaron
昨天
27
0
"errcode": 41001, "errmsg": "access_token missing hint: [w.ILza05728877!]"

Postman获取微信小程序码的时候报错, errcode: 41001, errmsg: access_token missing hint 查看小程序开发api指南,原来access_token是直接当作parameter的(写在url之后),scene参数一定要...

两广总督bogang
昨天
33
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部