Android RecyclerView 实现瀑布流效果

RecyclerView

RecyclerView 是MetrialDesign 的重要一个组件，未来是一定会替代ListView的，RecyclerView结构松散，非常适合自定义。稍后会补上一篇RecyclerView基础的文章。

先看效果:

这里的每张图片都有着不同的尺寸，但RecyclerView可以将它们完美的结合在一起，表现形式是不是很美观:-)

每个item的布局文件

就是一个ImageView和TextView（显示文字）

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical">


    <!-- adjustViewBounds 是否保持原图宽高比 -->
    <!-- scaleType="centerCrop" 中心缩放 -->
    <ImageView
        android:id="@+id/id_iv_img"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:scaleType="centerCrop"
        android:contentDescription="@string/image" />

    <TextView
        android:id="@+id/id_tv_title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center" />
</LinearLayout>

主Activity布局文件

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.yangtianrui.recyclerview2.MainActivity">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/id_rv_all_img"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</RelativeLayout>

Bean对象

描述每个Item

package com.example.yangtianrui.recyclerview2;

/**
 * Created by yangtianrui on 16-5-26.
 * <p/>
 * Bean 对象
 */
public class Product {
    private int image;
    private String title;

    public Product(int image, String title) {
        this.image = image;
        this.title = title;
    }

    public Product() {
    }

    public int getImage() {
        return image;
    }

    public void setImage(int image) {
        this.image = image;
    }

    public String getTitle() {
        return title;
    }

    public void setTitle(String title) {
        this.title = title;
    }
}

Adapter类

这个Adapter用于设置RecyclerView的数据

package com.example.yangtianrui.recyclerview2;

import android.content.Context;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;

import java.util.ArrayList;
import java.util.List;


public class MyAdapter extends RecyclerView.Adapter<MyAdapter.MyViewHolder> {

    private List<Product> mDatas = new ArrayList<>();
    private LayoutInflater mInfalter;
    private Context mContext;

    public MyAdapter(Context context, List<Product> datas) {
        this.mContext = context;
        this.mDatas = datas;
        this.mInfalter = LayoutInflater.from(context);
    }


    /**
     * 创建ViewHolder
     */
    @Override
    public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View root = mInfalter.inflate(R.layout.item_simple, parent, false);
        MyViewHolder holder = new MyViewHolder(root);
        holder.mIvImg = (ImageView) root.findViewById(R.id.id_iv_img);
        holder.mTvTitle = (TextView) root.findViewById(R.id.id_tv_title);
        return holder;
    }

    @Override
    public void onBindViewHolder(MyViewHolder holder, int position) {
        Product p = mDatas.get(position);
        ImageView img = holder.mIvImg;
        TextView text = holder.mTvTitle;
        img.setImageResource(p.getImage());
        text.setText(p.getTitle());
    }

    @Override
    public int getItemCount() {
        return mDatas.size();
    }


    /**
     * 必须继承自RecyclerView的ViewHolder
     */
    static class MyViewHolder extends RecyclerView.ViewHolder {

        private ImageView mIvImg;
        private TextView mTvTitle;

        public MyViewHolder(View itemView) {
            super(itemView);
        }
    }
}

设置分割线

这里重写的是getItemOffsets（），即给每个Product对象设置一定的偏移量实现间距

package com.example.yangtianrui.recyclerview2;

import android.graphics.Rect;
import android.support.v7.widget.RecyclerView;
import android.view.View;

/**
 * Created by yangtianrui on 16-5-26.
 * <p/>
 * 用于分割每个组件
 * <p/>
 * 需重写的方法:
 * onDraw方法：其绘制将会在每个Item被绘制之前进行；
 * onDrawOver：在绘制完Item后进行绘制；
 * getItemOffsets 可以通过outRect.set()为每个Item设置一定的偏移量；
 */
public class SpacesItemDecroation extends RecyclerView.ItemDecoration {
    // 分割距离
    private int space;

    public SpacesItemDecroation() {

    }

    public SpacesItemDecroation(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;
        }
    }
}

Activity代码

package com.example.yangtianrui.recyclerview2;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.RecyclerView;
import android.support.v7.widget.StaggeredGridLayoutManager;

import java.util.Arrays;

public class MainActivity extends AppCompatActivity {

    private RecyclerView mRvAllImg;
    private int[] mImages = new int[]{
            R.drawable.a, R.drawable.b, R.drawable.c,
            R.drawable.e, R.drawable.f, R.drawable.g,
            R.drawable.h, R.drawable.i, R.drawable.d,
    };
    private char[] mTitles = new char[mImages.length];
    private Product[] mDatas = new Product[mImages.length];

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initData();
        initView();
    }

    private void initView() {
        mRvAllImg = (RecyclerView) findViewById(R.id.id_rv_all_img);
        mRvAllImg.setAdapter(new MyAdapter(this, Arrays.asList(mDatas)));
        // 每行两个,竖直排列
        mRvAllImg.setLayoutManager(new StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL));
        mRvAllImg.addItemDecoration(new SpacesItemDecroation(5));
    }

    private void initData() {
        for (int i = 0; i < mTitles.length; i++) {
            mTitles[i] = (char) ('a' + i);
            mDatas[i] = new Product(mImages[i], mTitles[i] + "");
        }
    }
}