RecyclerView瀑布流的简单实现

首先建立布局。

<?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:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.devin.recylerviewstaggereddemo.MainActivity">

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

列表项的布局：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
<ImageView
    android:id="@+id/img_container"
    android:layout_width="wrap_content"
    android:scaleType="fitXY"
    android:layout_height="wrap_content" />
</LinearLayout>

可以加边框，Android5.0以上可以用CardView.这里只是简单实现。

下来是ViewHolder.java

public class ImageViewHolder extends RecyclerView.ViewHolder {
    private Context context;
    private ImageView imgContainer;
    private int item;

    private int scnWidth;//屏幕的宽

    public ImageViewHolder(Context context, View itemView) {
        super(itemView);
        this.context = context;
        imgContainer = (ImageView) itemView.findViewById(R.id.img_container);
        //获取屏幕宽度
        WindowManager manager = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
        DisplayMetrics metrics = new DisplayMetrics();
        manager.getDefaultDisplay().getMetrics(metrics);
        scnWidth = metrics.widthPixels;
        //设置参数
        ViewGroup.LayoutParams params = imgContainer.getLayoutParams();
        params.width = scnWidth / 3;//设置三列显示
        params.height = 240 + new Random().nextInt(360);//高度随机，240到600之间
        imgContainer.setLayoutParams(params);
        imgContainer.setPadding(3, 3, 3, 3);//设置图片边距
    }

    /**
     * 设置数据项
     *
     * @param item
     */
    public void setItem(int item) {
        this.item = item;
    }

    /**
     * 设置数据
     */
    public void refreshView() {
        Glide.with(context).load(item).crossFade().into(imgContainer);
    }
}

Adapter.java

public class ImageAdapter extends RecyclerView.Adapter<ImageViewHolder> {
    private Context context;
    private int[] imagePaths;

    public ImageAdapter(int[] imagePaths) {
        this.imagePaths = imagePaths;
    }

    @Override
    public ImageViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        context=parent.getContext();
        View view = LayoutInflater.from(context).inflate(R.layout.item_image_1, null);
        return new ImageViewHolder(context,view);
    }

    @Override
    public void onBindViewHolder(ImageViewHolder holder, int position) {
        holder.setItem(imagePaths[position]);
        holder.refreshView();
    }

    @Override
    public int getItemCount() {
        return imagePaths.length;
    }
}

最后是Activity.java

public class MainActivity extends AppCompatActivity {
    private RecyclerView recyclerView;
    //图片数据源资源ID，glide框架可以直接加载
    private int[] RES_IMAGES_ID = {R.drawable.img_builder_001,
            R.drawable.img_builder_002,
            R.drawable.img_builder_003,
            R.drawable.img_builder_004,
            R.drawable.img_builder_005,
            R.drawable.img_builder_006,
            R.drawable.img_builder_007,
            R.drawable.img_builder_008,
            R.drawable.img_builder_009,
            R.drawable.img_builder_010,
            R.drawable.img_builder_011,
            R.drawable.img_builder_012,
            R.drawable.img_builder_013,
            R.drawable.img_builder_014,
            R.drawable.img_builder_015,
            R.drawable.img_builder_016,
            R.drawable.img_builder_017,
            R.drawable.img_builder_018,
            R.drawable.img_builder_019,
            R.drawable.img_builder_020};

    private ImageAdapter adapter;

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

    /**
     * 初始化
     */
    private void initView() {
        recyclerView = (RecyclerView) findViewById(R.id.rv_container);
        //设置瀑布流布局管理器,
        recyclerView.setLayoutManager(new StaggeredGridLayoutManager(3, StaggeredGridLayoutManager.VERTICAL));
        recyclerView.setPadding(1,1,1,1);//设置边距，这是整个控件的边距
        recyclerView.setHasFixedSize(true);//保持固定大小
        adapter=new ImageAdapter(RES_IMAGES_ID);//创建适配器
        recyclerView.setAdapter(adapter);//设置适配器
    }
}

运行效果：