RecyclerView瀑布流

前言

RecylerView三种布局管理器LinearLayoutManager、GridLayoutManager、StaggeredGridLayoutManager对应单行列表、多行列表、瀑布流式布局，都具水平与垂直。

代码

适配器

ViewHolder设图宽高

package adapter;

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 com.self.zsp.rd.R;

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

import entity.ImageBean;
import util.DisplayUtils;
import util.GlideImageLoader;

/**
 * Created on 2017/12/18.
 *
 * @desc select photo adapter
 */
public class ImagePickShowAdapter extends RecyclerView.Adapter<ImagePickShowAdapter.ViewHolder> implements View.OnClickListener, View.OnLongClickListener {
    private Context context;
    private List<ImageBean> imageBeanList;
    private int screenWidth;
    private OnRecyclerViewItemClickListener mOnItemClickListener;
    private OnRecyclerViewItemLongClickListener mOnItemLongClickListener;

    public ImagePickShowAdapter(Context context) {
        this.context = context;
        imageBeanList = new ArrayList<>();
        screenWidth = DisplayUtils.getScreenWidth(context);
    }

    public void setImageData(List<ImageBean> list) {
        this.imageBeanList = list;
        getRandomHeight(list);
    }

    @Override
    public int getItemCount() {
        if (imageBeanList != null && imageBeanList.size() > 0) {
            return imageBeanList.size();
        }
        return 0;
    }

    @Override
    public void onClick(View v) {
        if (mOnItemClickListener != null) {
            // Method getTag which get data.
            mOnItemClickListener.onItemClick(v, (ImageBean) v.getTag());
        }
    }

    @Override
    public boolean onLongClick(View v) {
        if (mOnItemLongClickListener != null) {
            // Method getTag which get data.
            mOnItemLongClickListener.onItemLongClick(v, (ImageBean) v.getTag());
        }
        return true;
    }

    public void setOnItemClickListener(OnRecyclerViewItemClickListener listener) {
        this.mOnItemClickListener = listener;
    }

    public void setOnItemLongClickListener(OnRecyclerViewItemLongClickListener listener) {
        this.mOnItemLongClickListener = listener;
    }

    public interface OnRecyclerViewItemClickListener {
        /**
         * 短点
         *
         * @param view
         * @param imageBean
         */
        void onItemClick(View view, ImageBean imageBean);
    }

    public interface OnRecyclerViewItemLongClickListener {
        /**
         * 长点
         *
         * @param view
         * @param imageBean
         */
        void onItemLongClick(View view, ImageBean imageBean);
    }

    @Override
    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        // Get context.
        /*context = parent.getContext();*/
        // inflate(R.layout.list_item_record,parent,false)不这么写则cardview不适宽
        View view = LayoutInflater.from(context).inflate(R.layout.image_pick_show_item, parent, false);
        // 为所创View注册点击事件
        view.setOnClickListener(this);
        view.setOnLongClickListener(this);
        return new ImagePickShowAdapter.ViewHolder(view);
    }

    @Override
    public void onBindViewHolder(final ViewHolder holder, int position) {
        final ImageBean imageBean = imageBeanList.get(position);
        // 数据保存在itemView之Tag中以便点获
        holder.itemView.setTag(imageBean);
        GlideImageLoader.displayByUri(context, imageBean.getPath(), R.drawable.place_holder, holder.ivImageSelect);
    }

    /**
     * 自定义ViewHolder（持每Item界面全部元素）
     */
    public class ViewHolder extends RecyclerView.ViewHolder {
        public ImageView ivImageSelect;

        public ViewHolder(final View view) {
            super(view);
            ivImageSelect = view.findViewById(R.id.ivImagePickShow);
            ViewGroup.LayoutParams params = ivImageSelect.getLayoutParams();
            // 图宽高
            params.width = screenWidth / 2;
            params.height = (int) (200 + Math.random() * 400);
            ivImageSelect.setLayoutParams(params);
        }
    }
}

布局

<?xml version="1.0" encoding="utf-8"?>
<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="wrap_content"
    android:layout_height="wrap_content"
    app:cardCornerRadius="@dimen/d6"
    app:cardElevation="@dimen/d6"
    app:cardMaxElevation="@dimen/d12">

    <ImageView
        android:id="@+id/ivImagePickShow"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:adjustViewBounds="true" />
</android.support.v7.widget.CardView>

间距

package util;

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

/**
 * Created on 2017/10/23.
 *
 * @desc recyclerView item space
 */ 
public class SpaceItemDecoration extends RecyclerView.ItemDecoration {
    private int space;

    public SpaceItemDecoration(int space) {
        this.space = space;
    }

    @Override
    public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
        outRect.left = space;
        outRect.top = space;
        outRect.right = space;
        outRect.bottom = space;
    }
}

package util;

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

/**
 * Created on 2017/12/21.
 *
 * @desc
 */
public class GridSpacingItemDecoration extends RecyclerView.ItemDecoration {
    private int spanCount;
    private int spacing;
    private boolean includeEdge;

    public GridSpacingItemDecoration(int spanCount, int spacing, boolean includeEdge) {
        this.spanCount = spanCount;
        this.spacing = spacing;
        this.includeEdge = includeEdge;
    }

    @Override
    public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
        // item position
        int position = parent.getChildAdapterPosition(view);
        // item column
        int column = position % spanCount;
        if (includeEdge) {
            // spacing - column * ((1f / spanCount) * spacing)
            outRect.left = spacing - column * spacing / spanCount;
            // (column + 1) * ((1f / spanCount) * spacing)
            outRect.right = (column + 1) * spacing / spanCount;
            if (position < spanCount) {
                // top edge
                outRect.top = spacing;
            }
            outRect.bottom = spacing;
            // item bottom
        } else {
            // column * ((1f / spanCount) * spacing)
            outRect.left = column * spacing / spanCount;
            // spacing - (column + 1) * ((1f /    spanCount) * spacing)
            outRect.right = spacing - (column + 1) * spacing / spanCount;
            if (position >= spanCount) {
                // item top
                outRect.top = spacing;
            }
        }
    }
}

主代码

private RecyclerView recyclerViewShow;
private ImagePickShowAdapter showAdapter;

RecyclerView.LayoutManager layoutManager = new StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL);
recyclerViewShow.setLayoutManager(layoutManager);
// 每item内容不改RecyclerView大小，此设提性能
recyclerViewShow.setHasFixedSize(true);
recyclerViewShow.addItemDecoration(new SpaceItemDecoration(3));
showAdapter = new ImagePickShowAdapter(ImagePickerActivity.this);

showAdapter.setImageData(imageSelect);
if (!showAdapter.hasObservers()) {
    recyclerViewShow.setAdapter(showAdapter);
} else {
    showAdapter.notifyDataSetChanged();
}

附

/**
 * 随高
 *
 * @param list
 */
private void getRandomHeight(List<ImageBean> list) {
    height = new ArrayList<>();
    for (int i = 0; i < list.size(); i++) {
        height.add((int) (300 + Math.random() * 400));
    }
}