Android RecyclerView实现图片自适应高度的瀑布流

最新推荐文章于 2025-06-24 18:18:50 发布

vida990717

最新推荐文章于 2025-06-24 18:18:50 发布

阅读量4.7k

点赞数 6

CC 4.0 BY-SA版权

分类专栏： Android UI设计文章标签： android recyclerview瀑布流图片自适应高度

本文链接：https://blog.youkuaiyun.com/vida990717/article/details/88798109

Android UI设计专栏收录该内容

12 篇文章

订阅专栏

本文介绍如何在项目中实现图片自适应高度的瀑布流效果，并解决滑动过程中出现的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目中要实现图片自适应高度的瀑布流，咋样自适应高度呢？

1.item的高度宽度要wrap_content
2.获得图片的高度宽度
3.onBindViewHolder中绑定数据的时候，先获取item宽度，计算图片等比例缩放后的高度，为imageView设置参数

关键代码如下：

mRecyclerView = findViewById(R.id.recyclerview);
mRecyclerView.setPadding(8,8,8,8);
mRecyclerView.addItemDecoration(new SpacesItemDecoration(8));
layoutManager = new StaggeredGridLayoutManager(2,StaggeredGridLayoutManager.VERTICAL);
mRecyclerView.setLayoutManager(layoutManager);

imageAdapter = new ImageAdapter(context,mData);
mRecyclerView.setAdapter(imageAdapter);

public void onBindViewHolder(ImageViewHolder holder, int position) {
    final ImageData data = mData.get(position);

    //获取item宽度，计算图片等比例缩放后的高度，为imageView设置参数
    ViewGroup.LayoutParams layoutParams = holder.imageView.getLayoutParams();
    float itemWidth = (ScreenUtils.getScreenWidth(context) - 16*3) / 2;
    layoutParams.width = (int) itemWidth;
    float scale = (itemWidth+0f)/data.getWidth();
    layoutParams.height= (int) (data.getHeight()*scale);
    holder.imageView.setLayoutParams(layoutParams);

    Glide.with(context).
            load(data.getResourceId()).
            override(layoutParams.width, layoutParams.height).
            into(holder.imageView);
}

    itemView的宽度 = （屏幕的宽度-三个间隔（每个间隔是16））/ 2

效果图：

图片自适应高度的瀑布流

做了一个Demo,Demo中的图片都是放在drawable中的，不是url.
Demo地址：https://download.youkuaiyun.com/download/vida990717/11058264

本来以为这样就行了呢，结果实际中加了点击事件以后又遇到问题啦~~
滑动到最后，点击最后一个item,重新滑回最上面，最上面的item跳动，位置变了，有空白的区域。

在网上找了找，用下面的方法解决了这个问题：

layoutManager.setGapStrategy(StaggeredGridLayoutManager.GAP_HANDLING_NONE);

mRecyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
    @Override
    public void  onScrollStateChanged(RecyclerView recyclerView, int newState) {
        //防止第一行到顶部有空白区域
        layoutManager.invalidateSpanAssignments();
    }
});