Android Picasso Recyclerview Загрузка изображений медленная

Question

У меня есть бесконечное мнение переработчика, которое почти подражает списку / каналам Instagram.Где Image загружается в полноэкранный режим Imageview.Я использую Пикассо для загрузки изображений.Вот мой код:

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-100 кбит.Но время загрузки изображения слишком медленное.Загрузка изображения занимает почти 3-4 секунды.С другой стороны, когда изображения загружаются из кеша, очевидно, что изображение загружается в кратчайшие сроки.Я получаю 15 элементов с сервера для загрузки в утилиту просмотра, что означает, что 15 изображений будут загружаться параллельно.Но все же он довольно медленный по сравнению с новостными лентами в Instagram или Facebook.

Может кто-нибудь подсказать мне правильную технику, чтобы сделать ее максимально быстрой, чтобы при прокрутке пользователя вниз список изображений уже загружался вместо этого?его ждет изображение для загрузки?

Answer 1

На самом деле, я давно пользуюсь lib без каких-либо проблем с сетью. Я попытался проанализировать код и обнаружил следующее:

1. Проблема может заключаться в преобразовании Поскольку lib сначала преобразует входящее изображение, а затем отображает, пожалуйста, обратитесь к этой части

   Picasso.get ()

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

Совет: если вы пытаетесь показать изображение в круговом режиме. Затем используйте CircularImageView, не освобождайте ввод / вывод.

• Проверьте производительность с другими, немного более мощными устройствами, чем у вас

EDIT

• Проверьте ваш телефон на предмет использования сети, какое приложение потребляет, сколько мегабайт, так как некоторые приложения молча используют вашу сеть в фоновом режиме

• Почему это быстро в вашем браузере? Поскольку ваш браузер не выполняет никаких дополнительных операций с изображением

Answer 2

Пожалуйста, отметьте ответы, которые могут быть вам полезны.

Загрузка больших изображений с помощью 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 .Этот твик также улучшает производительность.

Answer 3

Можете ли вы попытаться поставить свой держатель классов static.Каждый findViewById имеет реальную стоимость в производительности.Как вы видите, в вашем классе много findViewById.С другой стороны, я предлагаю взглянуть на разницу между Пикассо и Глайдом, есть различия в том, как они управляют изображениями.

Когда я пытался загрузить изображения с URL-адреса, Пикассо загружал изображение из Интернета довольно быстро, чем Glide.Возможно, потому что после загрузки изображения Пикассо непосредственно помещает полноразмерное изображение в память;в то время как Glide изменяет размер изображения согласно измерению ImageView.

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

Answer 4

Для вашего случая вы можете использовать этот поток кода:

1. Создать класс каналов (POJO или модель) со способностью Singleton с помощью конструктора,
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))

Это решит проблему времени загрузки с помощью предварительной загрузки изображений.

Answer 5

Если ваши изображения слишком велики, это может занять некоторое время.поэтому 15 изображений размером 100 КБ - это почти 1,5 МБ для загрузки

Если вы используете fit() или resize(), это должно решить вашу проблему.В настоящее время я загружаю сотни jpg-файлов, которые очень велики, в один GridLayout и не имеют проблем.

edit

это может быть проблема с Интернетом и Picasso не контролирует сервер, выполняющий сетевой запрос, или само интернет-соединение.Использование такого сервиса, как Thumbor, может помочь: https://github.com/thumbor/thumbor