android - RecyclerView 的图像遮挡了 UI

Question

我有一个 recyclerview，它加载一组主要显示图像的项目。我在后台检索这些项目，批量为 100 个。我使用 Picasso 加载图像。图像相当大，但我使用 fit() 调整它们的大小。

每当使用 SwipeRefreshLayout 加载或刷新屏幕时，UI 都会阻塞不到一秒，但足以引起注意。如果我不加载图像而只加载文本，则不会发生 UI 阻塞。

我在 Picasso 上放置了日志记录行，每次刷新时都会检索 100 张图像，但我猜 Picasso 正在后台线程中工作？

适配器:

@ActivityScope
class LimitableListAdapter @Inject constructor() : RecyclerView.Adapter<LimitableListAdapter.ViewHolder>() {

    private var events: MutableList<Event> = mutableListOf()
    private var itemClick: ((Event, View) -> Unit)? = null


    override fun onBindViewHolder(holder: ViewHolder, position: Int) {

        val binding : ItemVideoGridScoreBinding = holder.binding

        var viewModel = binding.viewModel
        val event = events[position]

        //Unbind old viewModel if we have one
        viewModel?.unbind()

        // Create new ViewModel, set it, and bind it
        viewModel = EventViewModel(event)
        binding.viewModel = viewModel
        viewModel.bind()


        holder.setClickListener(itemClick)
    }

    override fun getItemCount(): Int = events.size


    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
        val binding = DataBindingUtil.inflate<ItemVideoGridScoreBinding>(
                LayoutInflater.from(parent.context),
                R.layout.item_video_grid_score,
                parent,
                false
        )
        return ViewHolder(binding)
    }


    fun updateEvents(events: List<Event>, stride: Int) {
        var size = this.events.size
        Timber.w("Updating with: " + events.joinToString(",", transform = { e -> e.id.toString() }))
        this.events = events.toMutableList()
        notifyDataSetChanged()
        /*if (size == 0) {
            Timber.w("branch 1")
            var mutableList = events.toMutableList()
            if(mutableList.size == 0)
                return
            mutableList.add(Event.mockEvent(stride))
            this.events.addAll(mutableList)
            notifyDataSetChanged()
        } else {
            if (size > 2) {
                Timber.w("branch 2.1")
                this.events.addAll(size - 1, events.toMutableList())
                notifyItemRangeChanged(size-1, events.size)
            }
            else {
                Timber.w("branch 2.2")
                this.events.addAll(size, events.toMutableList())
                notifyItemRangeChanged(size, events.size)
            }

        }*/
        Timber.i("New list is: " +  this.events.joinToString(",", transform = { e -> e.id.toString() }))
    }

    fun clearList(){
        this.events.clear()
        notifyDataSetChanged()
    }

    fun setClickListener(itemClick: ((Event, View) -> Unit)?) {
        this.itemClick = itemClick
    }


    class ViewHolder(val binding: ItemVideoGridScoreBinding) : RecyclerView.ViewHolder(binding.root) {
        fun setClickListener(callback: ((Event, View) -> Unit)?) {
            binding.viewModel.clicks().subscribe() {
                callback?.invoke(binding.viewModel.event, itemView)
            }
        }
    }

}

绑定(bind)实用程序:

@BindingAdapter({"app:coverUrl"})
    public static void loadCover(ImageView view, String imageUrl) {

            Picasso p = Picasso.with(view
                    .getContext());
                    p.setIndicatorsEnabled(true);

                    p.load(imageUrl)
                    .fit()
                    .centerInside()
                    .error(R.drawable.ic_broken_image)
                    .into(view);
        }
    }

xml:

(...)
     <ImageView
                    android:id="@+id/event_cover"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:scaleType="centerCrop"
                    app:coverUrl="@{videoItem.cover}"
                    tools:src="@drawable/img"
                    />
(...)

Answer 1

假设您无法在服务器端创建缩略图(这将是最简单的解决方案)，我的建议是使用以下方法之一

1. 使用本地可绘制对象作为占位符。这不会阻塞 UI 线程，并且图像可以在后台加载。行为将类似于 Instagram 在加载图像网格时的行为。如下所示。

p.load(imageurl).placeholder(R.drawable.localFile).fit().centerInside().error(R.drawable.ic_broken_image).into(view)

使用滑行。 Glide 确实具有强大的创建缩略图的功能。而且您可以比完整图像更快地将缩略图加载到 View 中。