Android使用Recycler View实现瀑布流效果

运行效果：

 布局界面：

activity_mian.xml

<?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"
    android:background="#88ffffff"
    tools:context=".MainActivity">

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

 beauty_item.xml

<?xml version="1.0" encoding="utf-8"?>
<!--CardView卡片式布局   简单的FrameLayout 额外提供了圆角和阴影效果 具有立体感觉-->
<android.support.v7.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="5dp"
    android:padding="4dp"
    app:cardBackgroundColor="#ffffffff"
    app:cardCornerRadius="15dp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/image_item"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:scaleType="centerCrop" />

        <TextView
            android:id="@+id/name_item"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </LinearLayout>
</android.support.v7.widget.CardView>

主要代码：

MainActivity.java

package com.djp.user.waterfall;

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.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {

    private RecyclerView recyclerView;
    private List<Beauty> data = new ArrayList<>();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        recyclerView = (RecyclerView) findViewById(R.id.recycler_view);
        //使用瀑布流布局,第一个参数 spanCount 列数,第二个参数 orentation 排列方向
        StaggeredGridLayoutManager recyclerViewLayoutManager = new StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL);
        //线性布局Manager
//        LinearLayoutManager recyclerViewLayoutManager = new LinearLayoutManager(this);
//        recyclerViewLayoutManager.setOrientation(LinearLayoutManager.VERTICAL);
        //网络布局Manager
//        GridLayoutManager recyclerViewLayoutManager = new GridLayoutManager(this, 3);
        //给recyclerView设置LayoutManager
        recyclerView.setLayoutManager(recyclerViewLayoutManager);
        initData();

        BeautyAdapter adapter = new BeautyAdapter(data, this);
        //设置adapter
        recyclerView.setAdapter(adapter);
    }

    /**
     * 生成一些数据添加到集合中
     */
    private void initData() {
        Beauty beauty;
        for (int i = 0; i < 10; i++) {
            beauty = new Beauty("美女" + i, R.mipmap.m1);
            data.add(beauty);
            beauty = new Beauty("美女" + i, R.mipmap.m2);
            data.add(beauty);
            beauty = new Beauty("美女" + i, R.mipmap.m3);
            data.add(beauty);
            beauty = new Beauty("美女" + i, R.mipmap.m4);
            data.add(beauty);
            beauty = new Beauty("美女" + i, R.mipmap.m5);
            data.add(beauty);
            beauty = new Beauty("美女" + i, R.mipmap.m6);
            data.add(beauty);
            beauty = new Beauty("美女" + i, R.mipmap.m7);
            data.add(beauty);
            beauty = new Beauty("美女" + i, R.mipmap.m8);
            data.add(beauty);
            beauty = new Beauty("美女" + i, R.mipmap.m9);
            data.add(beauty);
            beauty = new Beauty("美女" + i, R.mipmap.m10);
            data.add(beauty);
        }
    }
}

Beauty.java

package com.djp.user.waterfall;

/**
 * Created by Mr.Dong on 2019/3/10.
 */

public class Beauty {
    /**
     * 名字
     */
    private String name;
    /**
     * 图片id
     */
    private int imageId;

    public Beauty(String name, int imageId){
        this.name = name;
        this.imageId = imageId;

    }

    public String getName() {
        return name;
    }

    public int getImageId() {
        return imageId;
    }
}

BeautyAdapter.java

package com.djp.user.waterfall;

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.BaseAdapter;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

import java.util.List;

/**
 * Created by Mr.Dong on 2019/3/10.
 */

public class BeautyAdapter extends RecyclerView.Adapter<BeautyAdapter.BeautyViewHolder> {
    /**
     * 上下文
     */
    private Context mContext;
    /**
     * 数据集合
     */
    private List<Beauty> data;

    public BeautyAdapter(List<Beauty> data, Context context) {
        this.data = data;
        this.mContext = context;
    }

    @Override
    public BeautyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        //加载item 布局文件
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.beauty_item, parent, false);
        return new BeautyViewHolder(view);
    }

    @Override
    public void onBindViewHolder(BeautyViewHolder holder, int position) {
        //将数据设置到item上
        Beauty beauty = data.get(position);
        holder.beautyImage.setImageResource(beauty.getImageId());
        holder.nameTv.setText(beauty.getName());
    }

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

    static class BeautyViewHolder extends RecyclerView.ViewHolder {
        ImageView beautyImage;
        TextView nameTv;

        public BeautyViewHolder(View itemView) {
            super(itemView);
            beautyImage = itemView.findViewById(R.id.image_item);
            nameTv = itemView.findViewById(R.id.name_item);
        }
    }
}