Изображения добавляют вкус, характер и восторг интерфейсам вашего приложения. Загрузка изображений в Android обычно включает в себя добавление множества строк стандартного кода. Picasso from Square — это одна из самых простых в использовании библиотек, которая включает в себя оптимизацию памяти и данных, позволяя вам не сохранять изображения в кеше после их загрузки.
В этом уроке я покажу, как загружать изображения из внешних источников, используя путь к файлу , идентификатор ресурса изображения или любой URI в приложении Android с помощью Picasso .
Вы можете найти проект на GitHub . Вы можете скачать чертежи, используемые в проекте, здесь , убедитесь, что вы добавили их в папку drawables .
Добавление Пикассо в ваш проект
Примечание : я использую версию 2.5.2 Пикассо.
Создайте новый проект в Android Studio и добавьте эту строку в dependencies
build.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 для каждого из приведенных выше изображений. Добавьте следующее ниже ImageViews
MainActivity
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)
file
resource id
path
uri
.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)
Каждое изображение может иметь свой собственный Priority
LOW
NORMAL
HIGH
Вы собираетесь отобразить secondImage
Target
Добавьте этот код после предыдущих вызовов Пикассо:
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, вы можете отобразить индикаторы отладки, которые показывают источник изображения.
Конструктор поддерживает другой метод, вызываемый при сбое загрузки изображения.
//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, позволяя загружать, отображать и форматировать изображения в несколько строк кода.
Я надеюсь, что вы найдете его таким же простым в использовании, как и я, и если у вас есть какие-либо комментарии или вопросы, пожалуйста, дайте мне знать ниже.