使用 StaggeredGridLayout 预加载毕加索图像答案

【问题标题】：Preload Picasso Image with StaggeredGridLayout使用 StaggeredGridLayout 预加载毕加索图像
【发布时间】：2015-05-21 10:01:02
【问题描述】：

我有一个 StaggeredGridLayoutManager，它可以在 2 列宽的网格中加载 20 张包含图像（从缓存、网络或毕加索存储中加载）的卡片。

问题：

目前，当您向下滚动列表时，图像会在卡片滑入视图时加载，如下视频：

https://www.youtube.com/watch?v=1xMNmMjqEbI

所需的解决方案：

我希望将图像加载到屏幕外，因此有一个像这个视频这样的无缝用户体验：

https://www.youtube.com/watch?v=4c7ZID7yjII

这些视频来自一篇博客文章，该文章使用 LinearLayoutManager 解决了这个问题，而不是 StaggeredGridLayoutManager。我似乎无法找出这个问题的等效解决方案。我对 android 开发相当陌生，并试图通读文档，但我似乎找不到任何导致解决方案的内容。

代码：

    // Setup RecyclerView
    mRecyclerView = (RecyclerView) rootView.findViewById(R.id.gridview_posts);
    mRecyclerView.setHasFixedSize(true);

    // Setup StaggeredGridLayoutManager
    mLayoutManager = new StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL);
    mRecyclerView.setLayoutManager(mLayoutManager);

    // Set Adapter
    mPostsAdapter = new PostAdapter(rootView.getContext(), posts);
    mRecyclerView.setAdapter(mPostsAdapter);

    // Start RestClient & get posts
    restClient = new RestClient(getString(R.string.api_location));
    getPosts();

【问题讨论】：

标签： java android android-recyclerview staggeredgridlayout

【解决方案1】：

预加载图像以显示在缓存中，因此不是在滚动列表时加载它们，而是它们已经在内存中。

 Picasso.with(this).load("url").fetch();

另外，删除 Picasso 的淡入淡出动画。

Picasso.with(this).load("url").noFade().into(imageView);

【讨论】：

所有图像已经从缓存中加载，当我设置 noFade() 时，图像会在屏幕上出现时弹出。我需要以某种方式将布局的大小设置为大于物理屏幕，以便它们在用户看到卡片之前弹出到位。

【解决方案2】：

刚刚想出了解决我自己问题的部分方法。将它发布给像我这样试图解决这个问题的新人。

RecyclerView 方法 setItemViewCacheSize(int size) 会将所需数量的项目保留在缓存中，因此您不会出现闪烁类型的视图加载。

我还没有找到提前加载特定数量的视图的超前解决方案。

【讨论】：

【解决方案3】：

对我来说它正在工作

Picasso.get()
 .load(uploadCurrent.getImageUrl())
 .placeholder(R.drawable.logoblack_loading)
 .config(Bitmap.Config.RGB_565)
 .into(holder.imageView);

XML：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="2dp"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <ImageView
        android:id="@+id/id_imgItem"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:adjustViewBounds="true"/>
    <TextView
        android:id="@+id/textview"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/id_imgItem"
        android:paddingTop="4dp"
        android:paddingBottom="4dp"
        android:gravity="center_horizontal"
        android:textSize="18sp"/>

</RelativeLayout>

【讨论】：