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

你试过Glide吗？试试看。只需在依赖项上添加库，只替换 Picasso 字。

你的图片尺寸大吗，比如2Mb以上？在将图片上传到任何地方之前尝试调整大小或优化图片。

你的图片是JPG吗？你可以使用 RIOT http://luci.criosweb.ro/riot/ 优化您的 JPG/PNG.

或者建议将 JPG 图片转换为 WebP。 Android Studio 有内置转换器可供试用。 WebP 加载速度更快，体积更小。

Answer 2

不要对动态加载的图像使用 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 仅将全尺寸图像缓存到磁盘，并且每次从磁盘加载回图像时都必须调整它们的大小。

RecyclerView 中的图像感觉滞后（使用 Picasso）

Images in RecyclerView feels laggy (Using Picasso)

android

android-recyclerview

picasso