Birthday Sale! Up to 40% off unlimited courses & creative assets Birthday Sale! Save up to 40%!
Advertisement
  1. Code
  2. Android SDK
Code

Код приложения для Android-приложений с Picasso

by
Difficulty:IntermediateLength:LongLanguages:

Russian (Pусский) translation by Dima (you can also view the original English article)

Final product image
What You'll Be Creating

Picasso - популярная библиотека Android с открытым исходным кодом для загрузки как локальных, так и удаленных изображений. Узнайте, как легко использовать его для обработки потребностей загрузки изображений.

1. Что такое Picasso?

Picasso (имя, вдохновленное известным французским художником Пабло Пикассо) - очень популярная библиотека Android с открытым исходным кодом для загрузки изображений в приложение для Android. Согласно официальным документам, в нем говорится:

... Picasso позволяет без проблем загружать изображения в вашем приложении - часто в одной строке кода!

Обратите внимание, что Picasso использует OkHttp (сетевую библиотеку от одного и того же разработчика) под капотом для загрузки изображений через Интернет.

2. Итак, зачем использовать Пикассо?

Теперь вы узнали, что такое Пикассо, следующий вопрос, который вы можете задать, - зачем его использовать?

Разработка собственных функций загрузки и отображения мультимедиа в Java или Kotlin может быть сложной: вы должны заботиться о кешировании, декодировании, управлении сетевыми соединениями, потоковой обработке, обработке исключений и многом другом. Picasso - это простой в использовании, хорошо спланированный, хорошо документированный,и тщательно протестированная библиотека, которая может сэкономить вам много драгоценного времени - и избавит вас от некоторых головных болей.

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

  • Обработка изображений ImageView и загрузка в адаптере
  • сложные преобразования изображений с минимальным использованием памяти
  • автоматическая память и кэширование дисков

Добавление изображений в приложение может привести к оживлению вашего приложения Android. Итак, в этом уроке мы узнаем о Picasso 2, создав приложение простой галереи изображений. Он загрузит изображения через Интернет и отобразит их как миниатюры в RecyclerView, а когда пользователь нажмет на изображение, он откроет детальную активность, содержащую большее изображение.

Пример проекта (в Kotlin) для этого учебника можно найти на нашем GitHub repo, чтобы вы могли легко следовать.

Хорошие художники копируют, великие художники крадут. - Пабло Пикассо

3. Предпосылки

Чтобы иметь возможность следовать этому руководству, вам понадобятся:

  • базовое понимание основных API Android и Kotlin
  • Android Studio 3.1.1 или выше
  • Плагин Kotlin 1.2.30 или новее

Запустите Android Studio и создайте новый проект (вы можете назвать его PicassoDemo) с пустым действием MainActivity. Обязательно также установите флажок Включить поддержку Kotlin.

Android Studios Add an Activity to Mobile dialog

4. Объявлять зависимости

После создания нового проекта укажите следующие зависимости в файле build.gradle. На момент написания последней версии Picasso была 2.71828.

Или с Maven:

Убедитесь, что вы синхронизируете свой проект после добавления Picasso и артефактов RecyclerView v7.

5. Добавить разрешение Интернета

Поскольку Picasso собирается выполнить сетевой запрос для загрузки изображений через Интернет, мы должны включить разрешение INTERNET в наш AndroidManifest.xml.

Так что сделай это сейчас!

Обратите внимание, что это необходимо, только если вы собираетесь загружать изображения из Интернета. Это не требуется, если вы загружаете изображения только локально на устройство.

6. Создайте макет

Мы начнем с создания нашего RecyclerView внутри файла макета activity_main.xml.

Создание макета настраиваемого элемента

Затем давайте создадим XML-макет (item_image.xml), который будет использоваться для каждого элемента (ImageView) в RecyclerView.

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

7. Создание модели данных

Мы собираемся определить простую модель данных для нашего RecyclerView. Эта модель реализует Parcelable для высокопроизводительной передачи данных с одного компонента на другой в Android. В нашем случае данные будут перенесены из SunsetGalleryActivity в SunsetPhotoActivity.

Обратите внимание, что эта модель SunsetPhoto имеет только одно поле, называемое url (для демонстрационных целей), но вы можете иметь больше, если хотите. Этот класс реализует Parcelable, что означает, что мы должны переопределить некоторые методы.

Мы можем использовать Android Studio IDEA для создания этих методов для нас, но недостатком этого является поддержание. Как? Каждый раз, когда мы добавляем какие-либо новые поля в этот класс, мы можем забыть явно обновить методы constructor и writeToParcel, что может привести к некоторым ошибкам, если мы не обновим методы.

Теперь, чтобы обойти обновление или запись этих шаблонных методов, Kotlin 1.1.14 ввел аннотацию @Parcelize. Эта аннотация поможет нам создать методы writeToParcel, writeFromParcel и describeContents автоматически под капотом для нас.

Теперь наш класс SunsetPhoto - это всего лишь две строки! Потрясающие!

Не забудьте добавить следующий код в модуль приложения build.gradle:

Кроме того, я включил объект-компаньон (или статический метод в Java) getSunsetPhotos() в классе модели SunsetPhoto, который будет просто возвращать ArrayList из SunsetPhoto при вызове.

8. Создайте адаптер

Мы создадим адаптер для заполнения нашего RecyclerView данными. Мы также реализуем прослушиватель кликов, чтобы открыть детальную активность - SunsetPhotoActivity - передать экземпляр SunsetPhoto в качестве дополнительной цели. Детальная активность покажет крупный план изображения. Мы создадим его в следующем разделе.

Обратите внимание, что мы использовали функцию расширения apply , чтобы поместить объект в дополнение к намерению. Напомним, что функция apply возвращает объект, переданный ему как аргумент (т. е. Объект-получатель).

9. Загрузка изображений с URL-адреса

Нам нужно, чтобы Пикассо выполнял свою работу в этом разделе, а не рисовал нам произведение искусства, а получал изображения из Интернета и показывал их. Мы будем отображать эти изображения индивидуально в своих соответствующих ImageViews внутри нашего метода RecyclerView onBindViewHolder(), когда пользователь прокручивает приложение.

Шаг за шагом, вот как работают звонки в Picasso:

Метод get()

Это возвращает глобальный экземпляр Picasso (экземпляр singleton), инициализированный следующими конфигурациями по умолчанию:

  • Кэш LRU составляет 15% доступной оперативной памяти.
  • Кэш дискового пространства объемом 2% до 50 МБ, но не менее 5 МБ. Примечание: это доступно только для API 14+.
  • Три загружаемых потока для доступа к диску и сети.

Обратите внимание: если эти параметры не соответствуют требованиям вашего приложения, вы можете создать собственный экземпляр Picasso с полным контролем этих конфигураций с помощью Picasso.Builder.

Наконец, вы вызываете метод build(), чтобы вернуть вам экземпляр Picasso с вашими собственными конфигурациями.

Рекомендуется сделать это в приложении Application.onCreate, а затем установить в качестве экземпляра singleton с Picasso.setSingletonInstance в этом методе - убедиться, что экземпляр Picasso является глобальным.

Метод load()

load (String path) запускает запрос изображения с использованием указанного пути. Этот путь может быть удаленным URL, файловым ресурсом, ресурсом контента или ресурсом Android.

  • placeholder(int placeholderResId): идентификатор ресурса локального локатора или способный к использованию, когда изображение загружается, а затем отображается. Он служит хорошим пользовательским интерфейсом для отображения изображения-заполнителя во время загрузки изображения.

Обратите внимание, что Picasso сначала проверяет, находится ли запрошенное изображение в кеше памяти, и если оно есть, оно отображает изображение оттуда (в более позднем разделе мы рассмотрим кэширование в Picasso).

Другие методы

  • error(int errorResId): можно использовать, если запрошенное изображение не может быть загружено, возможно, потому, что веб-сайт не работает.
  • noFade(): Picasso всегда исчезает в изображении, которое будет отображаться в ImageView. Если вы не хотите эту анимацию с постепенным увеличением, просто вызовите метод noFade().
  • into(ImageView imageView): изображение целевого изображения, в которое будет помещено изображение.

Изменение размера и трансформация изображения

Если сервер, на который вы запрашиваете изображение, не дает вам изображения требуемого размера, вы можете легко изменить его размер с помощью resize(int targetWidth, int targetHeight). Вызов этого метода изменяет размер изображения, а затем отображает его на ImageView. Обратите внимание, что размеры указаны в пикселях (px), а не в dp.

Вы можете передать ресурс размера Android для ширины и высоты, используя метод resizeDimen (int targetWidthResId, int targetHeightResId). Этот метод преобразует размер изображения в необработанные пиксели, а затем вызывает resize() внутри - передавая преобразованные размеры (в пикселях) в качестве аргументов.

Обратите внимание, что эти методы изменения размера не будут учитывать соотношение сторон. Другими словами, соотношение сторон изображения может быть искажено.

К счастью, Picasso дает нам некоторые полезные методы для решения этой проблемы:

  • centerCrop(): равномерно масштабирует изображение (сохраняя соотношение сторон изображения), чтобы изображение заполнило данную область на сколько это возможно. При необходимости изображение будет обрезано горизонтально или вертикально, чтобы сохранить соотношение сторон. Вызов этого метода обрезает изображение внутри границ, заданных параметром resize().
  • centerInside(): масштабирует изображение так, чтобы оба измерения были равны или меньше запрошенных границ. Это будет центрировать изображение внутри границ, заданных параметром resize().
  • onlyScaleDown(): изменение размера изображения только в том случае, если размер оригинального изображения больше заданного размера, указанного в параметре resize().
  • fit(): попытайтесь изменить размер изображения, чтобы оно точно соответствовало целевым рамкам ImageView.

Вращение изображения

Picasso имеет простой API для поворота изображения, а затем отображение этого изображения. Метод rotate (float degrees) поворачивает изображение на указанные градусы.

В приведенном выше примере это повернет изображение на 90 градусов. Метод rotate (float degrees, float pivotX, float pivotY) вращает изображение по заданным градусам вокруг точки поворота.

Здесь мы будем поворачивать изображение на 30 градусов вокруг точки поворота 200, 100 пикселей.

Преобразование

Помимо простого манипулирования изображением путем его вращения, Picasso также дает нам возможность применить пользовательское преобразование к изображению перед его отображением.

Вы просто создаете класс, который реализует интерфейс Transformation Picasso. Затем вам необходимо переопределить два метода:

  • Bitmap transform(Bitmap source) : это преобразует исходное растровое изображение в новое растровое изображение.
  • String key() : возвращает уникальный ключ для преобразования, используемый для кеширования.

После того, как вы закончите создание своего настраиваемого преобразования, вы просто выполните его, вызвав transform(Transformation transformation) на свой экземпляр Picasso. Обратите внимание, что вы также можете передать список Transformation для transform().

Здесь я применил преобразование окружности к изображению из библиотеки Android с открытым исходным кодом Picasso Transformations. Эта библиотека имеет множество преобразований, которые вы можете применить к изображению с помощью Picasso, включая преобразования для размытия или серого масштабирования изображения.Проверьте сами, хотите ли вы применить некоторые интересные преобразования к своим изображениям.

10. Инициализация адаптера

Здесь мы просто создаем наш RecyclerView с GridLayoutManager в качестве менеджера компоновки, инициализируем наш адаптер и привязываем его к RecyclerView.

11. Создание детальной активности

Создайте новое действие и назовите его SunsetPhotoActivity. Мы получаем дополнительную версию SunsetPhoto и загружаем изображение внутри onStart() - с Picasso, как и раньше.

Детальный макет

Вот макет для отображения деталей активности. Он просто отображает ImageView, который покажет версию загруженного изображения с полным разрешением.

12. Кэширующий механизм в Picasso

Если вы внимательно наблюдаете, вы заметите, что когда вы пересматриваете ранее загруженное изображение, оно загружается даже быстрее, чем раньше. Что сделало это быстрее? Это механизм кэширования Picasso.

Вот что происходит внутри. После загрузки изображения из Интернета Picasso будет кэшировать его как в памяти, так и на диске, сохраняя повторяющиеся сетевые запросы и позволяя быстрее извлекать изображение. Когда это изображение понадобится снова, Picasso сначала проверит, доступно ли изображение в памяти, и если оно есть, он немедленно вернет его. Если это изображение отсутствует в памяти, Picasso проверит следующий диск, и если он там, он вернет его. Если его там нет, Picasso, наконец, выполнит сетевой запрос для этого изображения и отобразит его.

В общем, вот что происходит (внутри) для запроса изображения: память -> диск -> сеть.

Однако в зависимости от вашего приложения вы можете избежать кэширования - например, если отображаемые изображения могут часто меняться и не перезагружаться.

Итак, как отключить кэширование?

Вы можете избежать кэширования памяти, вызвав memoryPolicy(MemoryPolicy.NO_CACHE). Это просто пропустит поиск кэша памяти при обработке запроса изображения.

Обратите внимание, что есть еще одно перечисление: MemoryPolicy.NO_STORE. Это полезно, если вы очень уверены, что один раз запросите изображение. Применение этого также не сохраняет изображение в кэше памяти, тем самым не вызывая другие растровые изображения из кеша памяти.

Но имейте в виду, что изображение все равно будет кэшироваться на диске - для предотвращения этого также вы используете networkPolicy(@NonNull NetworkPolicy policy, @NonNull NetworkPolicy... additional), которая принимает одно или несколько из следующих значений перечисления:

  • NetworkPolicy.NO_CACHE: пропускает проверку кэша диска и заставляет загружать через сеть.
  • NetworkPolicy.NO_STORE: пропускает сохранение результата в кэш диска.
  • NetworkPolicy.OFFLINE: принудительно запрашивает запрос только через кэш диска, пропуская сеть.

Чтобы избежать как кэширования памяти, так и всего диска, просто вызовите оба метода один за другим:

13. Запросить слушателей

В Picasso вы можете реализовать прослушиватель или обратный вызов для контроля состояния запроса, который вы сделали при загрузке изображения. Только один из этих методов будет вызываться, если вы реализуете интерфейс Target в запросе.

  • void onBitmapFailed(e: Exception ?, errorDrawable: Drawable?): срабатывает всякий раз, когда изображение не может быть успешно загружено. Здесь мы можем получить доступ к исключению, которое было выбрано.
  • void onBitmapLoaded(Bitmap bitmap, LoadedFrom from): запускается всякий раз, когда изображение было успешно загружено. Здесь мы получаем Bitmap, чтобы показать пользователя.
  • void onPrepareLoad(Drawable placeHolderDrawable): вызывается непосредственно перед отправкой вашего запроса.

Здесь вы также можете показать, а затем скрыть диалог прогресса, если он у вас есть.

Существует еще один прослушиватель обратной связи, который вы можете реализовать, называется Callback. Этот интерфейс имеет только два метода: onSuccess() и onError(Exception e). Первый вызывается, когда загрузка запроса изображения прошла успешно, а затем вызывается при возникновении ошибки при обработке запроса.

Возвращаясь к нашему приложению галереи изображений (inside SunsetPhotoActivity), немного изменим отображение используя Callback, который установит растровое изображение в ImageView, а также изменит цвет фона макета, извлекая темный и яркий цвет нашего изображения используя Android Palette API.

Поэтому включите артефакт палитры в build.gradle вашего модуля приложения:

Давайте теперь реализуем интерфейс Callback в нашем запросе Picasso.

14. Тестирование приложения

Наконец, вы можете запустить приложение! Нажмите на миниатюру, чтобы получить полноразмерную версию изображения.

Final app result

15. Приоритизация запросов

Если вы хотите одновременно загружать разные изображения на одном экране, вы можете выбрать, какой из них более важен. Другими словами, вы можете сначала загрузить важные изображения.

Вы просто вызываете priority() на свой экземпляр запроса Picasso и передаете в любом из перечислений: Priority.LOW, Priority.NORMAL или Priority.HIGH.

16. Запросы на маркировку

Помечая ваши запросы Picasso, вы можете возобновлять, приостанавливать или отменить запросы, связанные с определенными тегами. В зависимости от вашего варианта использования вы можете пометить свои запросы строкой или объектами, которые должны определять область запроса как ContextActivity или Fragment. Вы можете легко пометить запрос Picasso, вызвав tag(@NonNull Object tag) на одном. Передайте ему экземпляр Object, который служит тегом.

Ниже приведены следующие операции, которые вы можете выполнить с помощью тегов Picasso :

  • pauseTag(Object tag): приостановить все запросы, связанные с данным тегом.
  • resumeTag(Object tag): возобновить приостановленные запросы с заданным тегом.
  • cancelTag(Object tag): отменить любые существующие запросы с заданным тегом.

Хотя пометка ваших запросов дает вам некоторый контроль, вы должны быть очень осторожны при использовании тегов из-за потенциальной утечки памяти. Вот что говорится в официальной документации:

Picasso будет хранить ссылку на тег до тех пор, пока этот тег будет приостановлен и / или будет иметь активные запросы. Следите за потенциальными утечками.

Загрузка из файловой системы

Загружать изображения локально в ваше приложение.

Заключение

Хорошая работа! В этом учебном пособии вы создали полное приложение галереи изображений с Picasso также вы узнали, как работает библиотека, и как вы можете интегрировать его в свой собственный проект.

Вы также узнали, как отображать как локальные, так и удаленные изображения, запросы тегов, приоритеты запросов и способы применения преобразований изображений, например изменение размера. А также видели, как легко включать и отключать кэширование, обработку ошибок и пользовательские запросы.

Чтобы узнать больше о Picasso, вы можете обратиться к официальной документации. Чтобы узнать больше о кодировании для Android, ознакомьтесь с некоторыми нашими другими курсами и учебниками на Envato Tuts +!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.