聊天RecyclerView滚动时ImageView尺寸异常变化问题求助

问题根源 #

RecyclerView的视图复用机制是核心原因——当item滑出屏幕被回收，再滑回来复用的时候，ImageView的尺寸参数没有被正确保留或重置，加上布局里用了wrap_content，重新测量时就会出现尺寸偏差，导致滚动时图片忽大忽小。另外当前布局的嵌套结构也会让测量逻辑变复杂，加剧这个问题。

解决方案 #

分两步来：先优化布局结构，再在Adapter里处理尺寸逻辑，既保证图片自适应，又不失去宽高控制。

一、优化布局结构 #

修改布局，用约束布局的最大宽高限制替代wrap_content的不稳定测量，同时固定内部视图的位置：

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/sentContent"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="end"
    android:clickable="true"
    android:gravity="end"
    android:paddingTop="10dp"
    android:paddingBottom="10dp">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/sentImgL"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="3dp"
        android:padding="5dp"
        android:background="@drawable/sent_img_bg"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <androidx.cardview.widget.CardView
            android:id="@+id/receivedImgCard"
            android:layout_width="0dp"
            android:layout_height="0dp"
            app:cardCornerRadius="18dp"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintWidth_max="250dp"
            app:layout_constraintHeight_max="350dp">

            <androidx.constraintlayout.widget.ConstraintLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent">

                <ImageView
                    android:id="@+id/sentImg"
                    android:layout_width="0dp"
                    android:layout_height="0dp"
                    android:adjustViewBounds="true"
                    android:scaleType="centerInside"
                    android:contentDescription="@string/todo"
                    android:cropToPadding="true"
                    app:layout_constraintTop_toTopOf="parent"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintWidth_max="250dp"
                    app:layout_constraintHeight_max="350dp" />

                <TextView
                    android:id="@+id/dateSeenImgS"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/todo"
                    android:layout_margin="4dp"
                    android:textColor="@color/white"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintEnd_toEndOf="parent" />

            </androidx.constraintlayout.widget.ConstraintLayout>

        </androidx.cardview.widget.CardView>

    </androidx.constraintlayout.widget.ConstraintLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

布局修改点：

• 把CardView的宽高改成0dp，用layout_constraintWidth_max和layout_constraintHeight_max限制最大尺寸，替代原来的wrap_content，避免复用时测量混乱
• CardView内部嵌套ConstraintLayout，用约束固定ImageView和时间TextView的位置，确保TextView始终在右下角，不会因为图片尺寸变化乱跑
• ImageView也设为0dp宽高，通过约束匹配父容器，同时保留最大宽高限制，保证图片不会超出设定的250dp/350dp范围

二、Adapter中处理尺寸与复用 #

在RecyclerView的Adapter里，要提前计算图片的合适尺寸，并且在复用视图时重置参数，避免旧尺寸影响新数据：

1. 数据模型加宽高字段 #

给你的聊天消息模型加两个字段，用来存图片的原始宽高：

public class ChatMessage {
    // 其他字段（比如消息类型、发送时间等）
    private String imageUrl;
    private int imageWidth;
    private int imageHeight;

    // 对应的getter和setter方法
    public String getImageUrl() { return imageUrl; }
    public void setImageUrl(String imageUrl) { this.imageUrl = imageUrl; }
    public int getImageWidth() { return imageWidth; }
    public void setImageWidth(int imageWidth) { this.imageWidth = imageWidth; }
    public int getImageHeight() { return imageHeight; }
    public void setImageHeight(int imageHeight) { this.imageHeight = imageHeight; }
}

2. 加载图片时获取宽高并调整尺寸 #

用图片加载库（比如Glide）加载图片时，先获取图片的原始宽高，再计算合适的显示尺寸：

private void loadImage(ChatViewHolder holder, ChatMessage message) {
    Context context = holder.itemView.getContext();
    Glide.with(context)
         .asBitmap()
         .load(message.getImageUrl())
         .into(new CustomTarget<Bitmap>() {
             @Override
             public void onResourceReady(@NonNull Bitmap resource, @Nullable Transition<? super Bitmap> transition) {
                 // 保存图片原始宽高到数据模型
                 message.setImageWidth(resource.getWidth());
                 message.setImageHeight(resource.getHeight());
                 // 设置图片到ImageView
                 holder.sentImg.setImageBitmap(resource);
                 // 计算并设置合适的尺寸
                 adjustImageViewSize(holder.sentImg, message.getImageWidth(), message.getImageHeight(), context);
             }

             @Override
             public void onLoadCleared(@Nullable Drawable placeholder) {}
         });
}

// 计算ImageView的合适尺寸，保证不超过最大限制且保留宽高比
private void adjustImageViewSize(ImageView imageView, int originalWidth, int originalHeight, Context context) {
    int maxWidth = (int) context.getResources().getDimension(R.dimen.image_max_width); // 对应布局的250dp
    int maxHeight = (int) context.getResources().getDimension(R.dimen.image_max_height); // 对应布局的350dp

    float ratio = (float) originalWidth / originalHeight;
    int targetWidth, targetHeight;

    // 先按宽度限制计算，再检查高度是否超限制
    if (originalWidth > maxWidth) {
        targetWidth = maxWidth;
        targetHeight = (int) (targetWidth / ratio);
        if (targetHeight > maxHeight) {
            targetHeight = maxHeight;
            targetWidth = (int) (targetHeight * ratio);
        }
    } 
    // 宽度没超，但高度超了，按高度限制计算
    else if (originalHeight > maxHeight) {
        targetHeight = maxHeight;
        targetWidth = (int) (targetHeight * ratio);
        if (targetWidth > maxWidth) {
            targetWidth = maxWidth;
            targetHeight = (int) (targetWidth / ratio);
        }
    } 
    // 都没超，用原始尺寸
    else {
        targetWidth = originalWidth;
        targetHeight = originalHeight;
    }

    // 更新ImageView的布局参数
    ConstraintLayout.LayoutParams params = (ConstraintLayout.LayoutParams) imageView.getLayoutParams();
    params.width = targetWidth;
    params.height = targetHeight;
    imageView.setLayoutParams(params);
}

3. 复用视图时重置尺寸 #

每次绑定ViewHolder的时候，先把ImageView的尺寸重置，避免复用之前item的旧尺寸：

@Override
public void onBindViewHolder(@NonNull ChatViewHolder holder, int position) {
    ChatMessage message = messageList.get(position);

    // 重置ImageView的布局参数，避免复用旧尺寸
    ConstraintLayout.LayoutParams imgParams = (ConstraintLayout.LayoutParams) holder.sentImg.getLayoutParams();
    imgParams.width = ConstraintLayout.LayoutParams.WRAP_CONTENT;
    imgParams.height = ConstraintLayout.LayoutParams.WRAP_CONTENT;
    holder.sentImg.setLayoutParams(imgParams);

    // 加载图片并调整尺寸
    loadImage(holder, message);

    // 设置时间TextView的内容
    holder.dateSeenImgS.setText(message.getSendTime());
}

为什么这样能解决问题？ #

• 布局用约束的最大宽高限制，从根源上避免了wrap_content带来的不稳定测量
• Adapter里提前计算好图片的显示尺寸，并且在复用视图时重置参数，确保每个item的ImageView都用自己对应的尺寸，不会被旧数据干扰
• 保留了图片的宽高比，同时严格控制最大宽高，满足你“自适应且不失去宽高控制”的需求

内容的提问来源于stack exchange，提问作者Mahmoud Nabil