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)
            }
        }
    }

}

BindingUtils：

@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

调整几张大图片需要一些时间。虽然Picasso对调整大小的图像进行缓存，但第一次仍然需要调整每个图像的大小（以后随后它将仅使用缓存中的已调整大小的图像，因此花费的时间更少）。此外，使用fit可能比使用resize花费更多时间，因为它需要根据布局计算大小。如果您可以自己计算静态大小（只需一次），然后使用resize，则应该可以缩短加载时间。

但大多数情况下，如果您的服务器在预览时可以向您发送较小的图像/缩略图，如果您想在某些详细信息屏幕上看到它，则会更好。

Answer 2

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

使用本地drawable作为占位符。这不会阻止UI线程，图像可以在后台加载。行为将类似于Instagram加载图像网格时的行为方式。像下面的东西。

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

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

Answer 3

当您正在加载100张图片时，正如您所提到的那样，图片很大，所以它会阻止UI线程，如果你想避免这种情况，那么你可以用毕加索abc图像：

resize

带有阻止UI的图像的RecyclerView

3 个答案: