android - RecyclerView 中的图像感觉滞后(使用 Picasso)

Question

我有一个RecyclerView(其实就是聊天)。用户可以发送图像和文本。问题是当我滚动时感觉很慢，因为正在加载图像(如果我上下移动，Picasso 需要很长时间才能再次将图像带回来)。我正在使用这行代码来做到这一点。

 Picasso.with(itemView.getContext())
                    .load(((ChatMediaMessage) message).getUrl())
                    .into(imageView);

如果我使用调整大小选项一点也不卡顿，但图像明显失去了图像比例。

Picasso.with(itemView.getContext())
                    .load(((ChatMediaMessage) message).getUrl())
                    .resize(400, 400)
                    .into(imageView);

ViewHolder 的布局如下所示:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginBottom="8dp"
    android:layout_marginLeft="16dp"
    android:layout_marginRight="16dp"
    android:layout_marginTop="8dp">

    <com.stfalcon.chatkit.utils.ShapeImageView
        android:id="@id/messageUserAvatar"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_alignParentBottom="true"
        android:layout_marginRight="8dp" />

    <com.google.android.flexbox.FlexboxLayout
        android:id="@id/bubble"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginRight="@dimen/message_incoming_bubble_margin_right"
        android:layout_toRightOf="@id/messageUserAvatar"
        android:orientation="vertical"
        app:alignContent="stretch"
        app:alignItems="stretch"
        app:flexWrap="wrap"
        app:justifyContent="flex_end">

        <ImageView
            android:id="@+id/image"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:adjustViewBounds="true"
            android:scaleType="centerInside" />

        <TextView
            android:id="@id/messageText"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

        <TextView
            android:id="@id/messageTime"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/messageText"
            android:layout_marginLeft="8dp"
            app:layout_alignSelf="center" />

    </com.google.android.flexbox.FlexboxLayout>

</RelativeLayout>

Answer 1

不要对动态加载的图像使用 adjustViewBounds，因为它会在每个图像完成加载后触发完全重新布局。为您的 ImageView 设置一个固定大小，如果您想保持宽高比，请使用 centerInside 缩放模式，如果您愿意，请使用 centerCrop裁剪图像。此技巧适用于任何图片库。

此外，当 ImageView 具有固定大小时，Picasso 或 Glide 允许您自动调整图像的大小，从而减少内存使用并提高性能。对于 Picasso，使用:

Picasso.with(itemView.getContext())
                    .load(((ChatMediaMessage) message).getUrl())
                    .fit()
                    .centerCrop()
                    .into(imageView);

您也可以使用 centerInside() 代替 centerCrop()。

Glide 有类似的 API。它将提供比 Picasso 稍好一些的性能，因为它还将调整大小的图像缓存到磁盘，而 Picasso 仅将全尺寸图像缓存到磁盘，并且每次从磁盘加载回图像时都必须调整它们的大小。