Статьи

Загрузка изображений без проблем в Android с Пикассо из Square

Изображения добавляют вкус, характер и восторг интерфейсам вашего приложения. Загрузка изображений в Android обычно включает в себя добавление множества строк стандартного кода. Picasso from Square — это одна из самых простых в использовании библиотек, которая включает в себя оптимизацию памяти и данных, позволяя вам не сохранять изображения в кеше после их загрузки.

В этом уроке я покажу, как загружать изображения из внешних источников, используя путь к файлу , идентификатор ресурса изображения или любой URI в приложении Android с помощью Picasso .

Вы можете найти проект на GitHub . Вы можете скачать чертежи, используемые в проекте, здесь , убедитесь, что вы добавили их в папку drawables .

Пример приложения

Добавление Пикассо в ваш проект

Примечание : я использую версию 2.5.2 Пикассо.

Создайте новый проект в Android Studio и добавьте эту строку в dependenciesbuild.gradle (Модуль: приложение) :

 compile 'com.squareup.picasso:picasso:2.5.2'

Синхронизируйте Gradle в своем проекте, чтобы загрузить библиотеку.

Добавьте интернет-разрешение в AndroidManifest.xml .

 <uses-permission android:name="android.permission.INTERNET"/>

В этом проекте я собираюсь использовать один класс действий и файл ресурсов макета.

Макет XML

Интерфейс этого примера приложения включает в себя три ImageView Каждое изображение будет загружено, сохранено и отображено с использованием другого метода библиотеки.

Код для activity_main.xml

 <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.theodhor.picasso.MainActivity">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:id="@+id/activity_main"
        android:layout_centerHorizontal="true">

        <ImageView
            android:layout_width="150dp"
            android:layout_height="150dp"
            android:layout_gravity="center_horizontal"
            android:id="@+id/image_1"
            android:layout_margin="5dp"/>

        <ImageView
            android:layout_width="150dp"
            android:layout_height="150dp"
            android:layout_gravity="center_horizontal"
            android:id="@+id/image_2"
            android:layout_margin="5dp"/>

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/image_3"
            android:layout_margin="5dp"/>

    </LinearLayout>

</RelativeLayout>

Отображение изображений

Первым шагом является создание ссылки в вашем коде Java для каждого из приведенных выше изображений. Добавьте следующее ниже ImageViewsMainActivity

 ImageView firstImage, secondImage, thirdImage;

Ниже этого кода создайте String Поскольку вы используете три ImageView

 private static final String IMAGE_1 =
"http://uxmastery.com/wp-content/uploads/2015/06/sitepoint-logo-195x195.jpg";
private static final String IMAGE_2 =
"http://uxmastery.com/wp-content/uploads/2015/06/sitepoint-logo-195x195.jpg";
private static final String IMAGE_3 =
"https://www.sitepoint.com/premium/books/git-fundamentals/online/images/sitepoint-logo-2012.png";

Внутри onCreate()ImageViews

 firstImage = (ImageView)findViewById(R.id.image_1);
secondImage = (ImageView)findViewById(R.id.image_2);
thirdImage = (ImageView)findViewById(R.id.image_3);

Самый простой способ загрузить изображение, сохранить его в памяти устройства и отобразить его с помощью этой строки кода, добавленной под ссылками на изображения:

 Picasso.with(this).load(IMAGE_1).centerCrop().fit().into(firstImage);

Вам нужно ссылаться на каждый экземпляр Picasso внутри контекста приложения, используя with(context) Тогда .load(parameter)fileresource idpathuri .centerCrop()ImageView.fit()ImageView Вы также можете использовать .resize(int width, int height) Последний метод, .into(parameter)ImageView

Это была самая короткая строка кода для отображения изображения из внешнего источника.

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

Более индивидуальный пример, чтобы сделать то же самое:

 Picasso.with(this)
  .load(IMAGE_1)
  .centerCrop()
  .fit()                    .placeholder(getResources().getDrawable(R.drawable.placeholder,null))
  .error(getResources().getDrawable(R.drawable.no_image,null))
  .rotate(45)
  .memoryPolicy(MemoryPolicy.NO_CACHE)
  .priority(Picasso.Priority.HIGH)
  .into(firstImage);

С большими изображениями вы можете использовать placeholder Вы можете использовать ту же технику, чтобы избежать пустых ImageView

Пропуская Cache Это может применяться в тех случаях, когда вы уверены, что изображение не может быть найдено в кеше. Используйте .memoryPolicy(MemoryPolicy.NO_STORE)

Каждое изображение может иметь свой собственный PriorityLOWNORMALHIGH

Вы собираетесь отобразить secondImageTarget Добавьте этот код после предыдущих вызовов Пикассо:

 Target target = new Target() {
   @Override
   public void onBitmapLoaded(Bitmap bitmap, Picasso.LoadedFrom from) {
          secondImage.setImageBitmap(bitmap);
   }

   @Override
   public void onBitmapFailed(Drawable errorDrawable) {
          secondImage.setImageDrawable(errorDrawable);
   }

   @Override
   public void onPrepareLoad(Drawable placeHolderDrawable) {                secondImage.setImageDrawable(getResources().getDrawable(R.drawable.prepare_load,null));
   }
};    

target.onBitmapFailed(getResources().getDrawable(R.drawable.no_image,null));

Picasso.with(this).load(IMAGE_2).priority(Picasso.Priority.HIGH).into(target);

Переопределенные методы Target Вы можете установить параметры этих методов, вызывая их извне target Вы можете установить bitmap

 target.onBitmapFailed(getResources().getDrawable(R.drawable.no_image,null));

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

Вы загрузите третье изображение, используя «Picasso Builder». Это поможет отличить, откуда это изображение. Если изображение найдено в памяти устройства или на диске, Picasso не будет загружать его, а будет использовать доступное в данный момент. Создав Builder, вы можете отобразить индикаторы отладки, которые показывают источник изображения.

Индикаторы отладки источника Picasso

Конструктор поддерживает другой метод, вызываемый при сбое загрузки изображения.

 //Third method
Picasso.Builder picassoBuilder = new Picasso.Builder(this);
picassoBuilder.listener(new Picasso.Listener() {
    @Override
    public void onImageLoadFailed(Picasso picasso, Uri uri, Exception exception) {
        Log.e("TAG","Failed");
    }
});
Picasso picasso = picassoBuilder.build();
picasso.setLoggingEnabled(true);
picasso.setIndicatorsEnabled(true);
picasso.load(IMAGE_3).centerCrop().resize(400,100).placeholder(R.drawable.no_image).into(thirdImage);

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

Вывод

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

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