Android RecyclerView implementa el flujo de cascada de imágenes

1. El flujo de cascada de imágenes ahora es casi una forma común de mostrar imágenes en aplicaciones. Este artículo presenta brevemente uno de los métodos de implementación de combinar RecyclerView + Glide para lograr el efecto de flujo de cascada de imágenes. Primero, el efecto:

2. La implementación específica es la siguiente:
 

// 1.设置LayoutManager
StaggeredGridLayoutManager manager = new StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL);
manager.setGapStrategy(StaggeredGridLayoutManager.GAP_HANDLING_NONE);
recyclerView.setLayoutManager(manager);

// 2.添加ItemDecoration
// 每个item之间的间距
int divider = DimenUtil.Dp2Px(8);
RecyclerView.ItemDecoration gridItemDecoration = new RecyclerView.ItemDecoration() {
        @Override
        public void getItemOffsets(@NonNull Rect outRect, @NonNull View view, RecyclerView parent, @NonNull RecyclerView.State state) {
            StaggeredGridLayoutManager.LayoutParams layoutParams = (StaggeredGridLayoutManager.LayoutParams) view.getLayoutParams();
                int spanIndex = layoutParams.getSpanIndex();
                int position = parent.getChildAdapterPosition(view);
                outRect.bottom = divider;
                if (position == 0 || position == 1) {
                    outRect.top = divider * 2;
                } else {
                    outRect.top = 0;
                }
                if (spanIndex % 2 == 0) {//偶数项
                    outRect.left = divider;
                    outRect.right = divider / 2;
                } else {
                    outRect.left = divider / 2;
                    outRect.right = divider;
                }
        }
    };
recyclerView.addItemDecoration(gridItemDecoration);

// 3.设置RecyclerView的适配器Adapter，就是一个ImageView，就不详细补充adapter了。
// 此处主要写一下Glide加载圆角图片：
int radius = 10;// 圆角半径
RequestOptions options = new RequestOptions()
                .placeholder(defRes)
                .transform(new CenterCrop(), new GlideRoundTransform(radius))
                .diskCacheStrategy(DiskCacheStrategy.RESOURCE);
Glide.with(context)
                .load(imgResource)
                .transition(DrawableTransitionOptions.withCrossFade())
                .apply(options)
                .into(imageView);

3. Nota final: la altura de las imágenes en el flujo de la cascada es diferente y no fija. Las imágenes se muestran de acuerdo con la relación de aspecto original, por lo que es mejor que la interfaz del servidor devuelva el ancho y el alto de la imagen (como para el valor del ancho y alto de la imagen: 1. Puede informar al servidor a través de la interfaz de carga inicial; 2. Después de cargarlo en el servidor, el servidor puede calcular el ancho y el alto y almacenarlos en la base de datos); la aplicación puede obtener el ancho y alto y configúrelo en imageView.