logo标签列表

安卓Picasso在RecyclerView中下载图片速度缓慢

androidandroid-recyclerviewandroid-adapterpicassoandroid-lazyloading
3

我有一个无限的RecyclerView，几乎模仿了Instagram的列表/动态。图片加载到全屏宽度的ImageView中。我正在使用Picasso加载图片。这是我的代码：

public class HomeAdapter extends RecyclerView.Adapter {

Context context;

private Contract contract;

List<Feed> feeds;

static final int ITEM_TYPE_HEADER = 0;

static final int ITEM_TYPE_LOAD_MORE = 1;

static final int ITEM_TYPE_DESIGN = 2;

public HomeAdapter(Context context, List<Feed> feeds) {
    this.context = context;
    this.feeds = feeds;
}

@Override
public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
    LayoutInflater inflater = LayoutInflater.from(parent.getContext());
    View row;
    if (viewType == ITEM_TYPE_HEADER) {
        row = inflater.inflate(R.layout.list_item_home_header, parent, false);
        return new HeaderHolder(row);
    } else if (viewType == ITEM_TYPE_LOAD_MORE) {
        row = inflater.inflate(R.layout.list_item_load_more, parent, false);
        return new LoadMoreHolder(row);
    } else if (viewType == ITEM_TYPE_DESIGN) {
        row = inflater.inflate(R.layout.list_item_feed_home, parent, false);
        return new DesignItemHolder(row);
    }
    return null;
}

@Override
public void onBindViewHolder(RecyclerView.ViewHolder holder, final int position) {
    Feed feed = feeds.get(position);
    if (holder instanceof HeaderHolder) {
        HeaderHolder headerHolder = (HeaderHolder) holder;
        Header header = (Header) feed;
        headerHolder.tvTitle.setText(header.getTitle());
        headerHolder.tvDescription.setText(header.getDescription());

    } else if (holder instanceof LoadMoreHolder) {
        LoadMoreHolder loadMoreHolder = (LoadMoreHolder) holder;
        LoadMore loadMore = (LoadMore) feed;
        if(loadMore.getType() == LOAD_MORE_TYPE_PROGRESS) {
            loadMoreHolder.pbLoadMore.setVisibility(View.VISIBLE);
            loadMoreHolder.rlMessageRetry.setVisibility(View.GONE);
        } else {
            loadMoreHolder.pbLoadMore.setVisibility(View.GONE);
            loadMoreHolder.rlMessageRetry.setVisibility(View.VISIBLE);
            if(StringUtils.isValid(loadMore.getTitle())) {
                loadMoreHolder.tvTitle.setText(loadMore.getTitle());
                loadMoreHolder.tvTitle.setVisibility(View.VISIBLE);
            } else
                loadMoreHolder.tvTitle.setVisibility(View.GONE);

            if(StringUtils.isValid(loadMore.getDescription())) {
                loadMoreHolder.tvDescription.setText(loadMore.getDescription());
                loadMoreHolder.tvDescription.setVisibility(View.VISIBLE);
            } else
                loadMoreHolder.tvDescription.setVisibility(View.GONE);
        }

        loadMoreHolder.btnRetry.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                if(contract != null)
                    contract.onRetryLoadMoreClick();
            }
        });

    } else if (holder instanceof DesignItemHolder) {
        final DesignItemHolder designItemHolder = (DesignItemHolder) holder;
        final DesignFeed designFeed = (DesignFeed) feed;
        String title = getFeedTitle(designFeed.getDesignCategory().getTitle(), designFeed.getEvent().getTitle());
        designItemHolder.tvCategory.setText(StringUtils.toUpperCaseSentence(designFeed.getDesignCategory().getTitle()));
        designItemHolder.tvDate.setText(DateTimeUtils.formatTime(designFeed.getDate()));
        designItemHolder.tvTitle.setText(StringUtils.toUpperCaseSentence(title));
        designItemHolder.tvBrand.setText(getBrandTitle(designFeed.getBrand().getTitle()));

        if(StringUtils.isValid(designFeed.getShopLink())) {
            designItemHolder.tvShop.setVisibility(View.VISIBLE);
            if(StringUtils.isValid(designFeed.getPrice())) {
                designItemHolder.tvPrice.setVisibility(View.VISIBLE);
                designItemHolder.tvPrice.setText(designFeed.getPrice() + " PKR");
            } else
                designItemHolder.tvPrice.setVisibility(View.GONE);

            designItemHolder.tvShop.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {
                    if(contract != null)
                        contract.onOpenShopLink(designFeed.getShopLink());
                }
            });
        }
        else {
            designItemHolder.tvPrice.setVisibility(View.GONE);
            designItemHolder.tvShop.setVisibility(View.GONE);
        }

        showFeedImage(designFeed, designItemHolder.ivThumbnail, designItemHolder.progressBar);

        Picasso.get()
                .load(designFeed.getDesignCategory().getThumbnail())
                .transform(new CircleTransform())
                .placeholder(new ColorDrawable(ContextCompat.getColor(context, R.color.colorGreyLight)))
                .into(designItemHolder.ivCategory);

        designItemHolder.ivThumbnail.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                if(contract != null)
                    contract.onDesignFeedClick(designFeed);
            }
        });

        designItemHolder.tvCategory.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                if(contract != null)
                    contract.onDesignCategoryClick(designFeed.getDesignCategory());
            }
        });

        designItemHolder.ivCategory.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                if(contract != null)
                    contract.onDesignCategoryClick(designFeed.getDesignCategory());
            }
        });

        designItemHolder.tvTitle.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                if(contract != null)
                    contract.onDesignCategoryClick(designFeed.getDesignCategory());
            }
        });

        designItemHolder.tvBrand.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                if(contract != null)
                    contract.onBrandClick(designFeed.getBrand());
            }
        });

        designItemHolder.ibFavourite.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                if(contract != null)
                    contract.onFavouriteClick(designFeed);
            }
        });

        designItemHolder.ibShare.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                if(contract != null)
                    contract.onShareClick(designFeed);
            }
        });

        designItemHolder.ibDownload.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                if(contract != null)
                    contract.onDownloadClick(designFeed);
            }
        });
    }
}

private void showFeedImage(final DesignFeed designFeed, final ImageView ivThumbnail, final ProgressBar progressBar) {
    Picasso.get()
            .load(designFeed.getThumbnail())
            .placeholder(new ColorDrawable(ContextCompat.getColor(context, R.color.colorGreyLight)))
            .networkPolicy(NetworkPolicy.OFFLINE)
            .into(ivThumbnail, new Callback() {
                @Override
                public void onSuccess() {
                }

                @Override
                public void onError(Exception e) {
                    //Try again online if cache failed
                    Picasso.get()
                            .load(designFeed.getThumbnail())
                            .placeholder(new ColorDrawable(ContextCompat.getColor(context, R.color.colorGreyLight)))
                            .into(ivThumbnail, new Callback() {
                                @Override
                                public void onSuccess() {
                                }

                                @Override
                                public void onError(Exception e) {

                                }
                            });
                }
            });
}

@Override
public int getItemViewType(int position) {
    Feed feed = feeds.get(position);
    if (feed instanceof Header)
        return ITEM_TYPE_HEADER;
    else if (feed instanceof LoadMore)
        return ITEM_TYPE_LOAD_MORE;
    else if (feed instanceof DesignFeed)
        return ITEM_TYPE_DESIGN;
    else
        return super.getItemViewType(position);
}

@Override
public int getItemCount() {
    return feeds.size();
}

public void insertFeedAtStart(Feed feed) {
    feeds.add(0, feed);
    notifyDataSetChanged();
}

public void updateFeeds(ArrayList<Feed> mFeeds) {
    feeds.addAll(mFeeds);
    notifyDataSetChanged();
}

public void addLoadMoreItem(Feed loadMoreFeed) {
    feeds.add(loadMoreFeed);
    notifyItemInserted(getItemCount() - 1);
}

public void removeItem(int index) {
    feeds.remove(index);
    notifyDataSetChanged();
}

private class DesignItemHolder extends RecyclerView.ViewHolder {
    TextView tvTitle, tvCategory, tvBrand, tvDate, tvPrice, tvShop;
    ImageView ivCategory, ivThumbnail;
    ImageButton ibFavourite, ibShare, ibDownload;
    ProgressBar progressBar;

    DesignItemHolder(View itemView) {
        super(itemView);
        tvTitle = itemView.findViewById(R.id.tvTitle);
        tvCategory = itemView.findViewById(R.id.tvCategory);
        tvBrand = itemView.findViewById(R.id.tvBrand);
        tvDate = itemView.findViewById(R.id.tvDate);
        ivCategory = itemView.findViewById(R.id.ivCategory);
        ivThumbnail = itemView.findViewById(R.id.ivThumbnail);
        tvPrice = itemView.findViewById(R.id.tvPrice);
        tvShop = itemView.findViewById(R.id.tvShop);
        ibFavourite = itemView.findViewById(R.id.ibFavourite);
        ibShare = itemView.findViewById(R.id.ibShare);
        ibDownload = itemView.findViewById(R.id.ibDownload);
        progressBar = itemView.findViewById(R.id.progressBar);
    }
}

private class HeaderHolder extends RecyclerView.ViewHolder {
    TextView tvTitle, tvDescription;
    HeaderHolder(View itemView) {
        super(itemView);
        tvTitle = itemView.findViewById(R.id.tvTitle);
        tvDescription = itemView.findViewById(R.id.tvDescription);
    }
}

private class LoadMoreHolder extends RecyclerView.ViewHolder {
    ProgressBar pbLoadMore;
    RelativeLayout rlMessageRetry;
    TextView tvTitle, tvDescription;
    AppCompatButton btnRetry;

    LoadMoreHolder(View itemView) {
        super(itemView);
        pbLoadMore = itemView.findViewById(R.id.pbLoadMore);
        rlMessageRetry = itemView.findViewById(R.id.rlMessageRetry);
        tvTitle = itemView.findViewById(R.id.tvTitle);
        tvDescription = itemView.findViewById(R.id.tvDescription);
        btnRetry = itemView.findViewById(R.id.btnRetry);
    }
}

public void setContract(Contract contract) {
    this.contract = contract;
}

public interface Contract {

    void onDesignCategoryClick(DesignCategory designCategory);

    void onDesignFeedClick(DesignFeed designCategory);

    void onBrandClick(Brand brand);

    void onRetryLoadMoreClick();

    void onShopClick(String shopLink);

    void onFavouriteClick(DesignFeed designFeed);

    void onShareClick(DesignFeed designFeed);

    void onDownloadClick(DesignFeed designFeed);

    void onOpenShopLink(String shopLink);
}

平均图片大小为80-100KB，但是图片下载时间太慢了。下载一张图片几乎要花费3-4秒的时间。另一方面，当图片从缓存中加载时，它显然会在瞬间加载出来。我从服务器获取了15个项目，需要在recyclerview中加载，这意味着将同时下载15张图片。但与Instagram或Facebook的动态消息源相比，它仍然相当缓慢。

有谁能指导我如何采用正确的技术尽可能地加快速度，这样当用户向下滚动列表时，图片应该已经加载完成，而不是等待图片加载？

1
2个问题：1) 您当前的互联网连接速度是多少？ 2) 如果您编写一个简单的get请求来ping服务器返回这些图像（只需使用应用程序中的一个URL），或者使用类似Postman的工具，响应时间是多少毫秒？ - PGMacDesign
@Silmarilos 如果我在浏览器上打开下载链接，它会在毫秒内下载，图片部署在 AWS S3 存储桶上，而且互联网连接速度非常快。如果我使用其他应用程序，比如 Facebook，它的图片加载也很快。 - Nouman Bhatti
使用Universal Image Loader，它比Picasso更快。同时尝试使用OkHttp Downloader与Picasso一起使用。 - amodkanthe
5个回答
1

实际上，我已经使用这个库很长时间了，没有遇到过任何网络问题。我尝试分析了代码并发现了以下内容：

  1. The problem could be the transformation Since lib first transforms incoming image then display, Please refer this part

    Picasso.get()

        .load(designFeed.getDesignCategory().getThumbnail())
    .transform(new CircleTransform())
    .placeholder(new ColorDrawable(ContextCompat.getColor(context, 
     R.color.colorGreyLight)))
    .into(designItemHolder.ivCategory);

建议：如果您需要展示圆形视图中的图片，请使用CircularImageView，不要使用自由I/O。

  • 请使用比您的设备稍微强大一些的其他设备进行性能检查

编辑

  • 检查您的手机网络使用情况，哪个应用程序正在使用，使用了多少兆字节，因为一些应用程序会在后台默默地使用您的网络

  • 为什么在您的浏览器中速度很快？因为您的浏览器没有对图像执行任何额外操作

0

请查看以下可能对您有用的答案。

使用Picasso和自定义Transform对象加载大型图像

如何提高Picasso的速度

如何让Picasso更快地加载图像？

您可以改进这段代码：

Picasso.get()
        .load(designFeed.getDesignCategory().getThumbnail())
        .transform(new CircleTransform())
        .placeholder(new ColorDrawable(ContextCompat.getColor(context, R.color.colorGreyLight)))
        .into(designItemHolder.ivCategory);

每次调用onBindViewHolder时都会创建新的占位符和转换。因此，您可以为此情况创建局部变量。就像这样...
public class HomeAdapter extends RecyclerView.Adapter {

Context context;
private final CircleTransform circleTransform;
private final ColorDrawable placeholderDrawable;

.
.
.

public HomeAdapter(Context context, List<Feed> feeds) {
    this.context = context;
    this.feeds = feeds;
    this.circleTransform = new CircleTransform();
    this.placeholderDrawable = new ColorDrawable(ContextCompat.getColor(context, R.color.colorGreyLight))
}

使用方法：

Picasso.get()
        .load(designFeed.getDesignCategory().getThumbnail())
        .transform(circleTransform)
        .placeholder(placeholderDrawable)
        .into(designItemHolder.ivCategory);

我也建议您查看rguzman的答案。这个调整也可以提高性能。

0

如果您的图像太大，加载时间可能会很长。因此，大小为100kb的15张图片几乎需要1.5 Mb 的加载时间。

如果您使用fit()或resize()，这应该可以解决您的问题。我目前将数百个非常大的jpg文件加载到单个GridLayout中，并且没有任何问题。

编辑

这可能是一个网络问题，Picasso无法控制服务器满足网络请求或互联网连接本身。使用类似Thumbor的服务可能会有所帮助：https://github.com/thumbor/thumbor

我已经尝试过fit()、resize()和centerInside()等方法，但仍需要时间。正如我所提到的，下载需要时间，调整大小是在下载后进行的，一旦图像被下载，从缓存加载就不需要时间了。 - Nouman Bhatti
0

对于您的情况，您可以使用以下代码流程：

  1. 创建一个带有单例能力和构造函数的Feeds类（POJO或Model）。
  2. 在应用程序开始获取一些额外时间时，使用异步后台任务开始填充Feeds类，Feeds feed_ins = Feeds.getInstance(SomeData)
  3. 在Feeds类中通过调用构造函数中定义的方法从Picasso中获取位图并将其保存到列表中，List<Bitmap> imageBitmaps = new ArrayList<>()
  4. 在Feeds类中创建一个方法，在调用该方法时返回特定的位图，getImageBitmap(int position){ return imageBitmaps.get(position) }
  5. 在HomeAdapter中获取Feeds类实例，Feeds feed_ins = Feeds.getInstance();
  6. 现在在HomeAdapter类中使用Feeds类单例直接获取位图，ivThumbnail.setImageBitmap(feed_ins.getImageBitmap(int position))

这将通过预加载图像来解决您的加载时间问题。

0

你可以尝试将你的 holder 类设为 static。每个 findViewById 操作都会带来一定的性能开销。你的类中有很多 findViewById 操作。然而，我建议你看一下 Picasso 和 Glide 之间的区别，它们在图片处理方面有所不同。

当我尝试从 URL 下载图片时，Picasso 要比 Glide 加载图片快得多。或许是因为下载完图片后，Picasso 直接将完整大小的图片推到内存中；而 Glide 将图片调整为 ImageView 的尺寸。

https://medium.com/@multidots/glide-vs-picasso-930eed42b81d

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接