Урок 6. Библиотки для ImageView: Picasso, CircleImageView.

Структура урока:

• Структура файла build.gradle
• Поиск библиотеки
• Добавление и использование библиотеки Picasso

Видео версия урока

При решении некоторых задач, как и при любой другой работе, нет необходимости придумывать их решения самому. Иногда достаточно просто воспользоваться чьим-то готовым решением. Чаще всего функционал, который другие разработчики могут использовать в своих проектах, оформляется в виде библиотек.

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

Структура файла build.gradle

Первым делом найдём нужный нам файл build.gradle. В проекте с одним модулем их обычно два: один на уровне всего проекта (top-level), второй внутри директории app (файл для нашего модуля). Сегодня новые библиотеки мы будем добавлять в файл на уровне модуля. Для этого в дереве папок надо найти узел с названием Gradle Scripts и выбрать файл build.gradle(Module:app).

Отлично, давайте посмотрим на структуру этого файла.

build.gradle(Module:app)

apply plugin: 'com.android.application'

android {
    compileSdkVersion 26
    defaultConfig {
        applicationId "colibri.dev.com.colibritweet"
        minSdkVersion 17
        targetSdkVersion 26
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation 'com.android.support:appcompat-v7:26.1.0'
    implementation 'com.android.support.constraint:constraint-layout:1.0.2'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'com.android.support.test:runner:1.0.1'
    androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.1'
}

Как видите, это файл-config (настройки), в котором указываются id приложения, минимальная версия SDK и другие параметры, которые нам пока не важны. Давайте обратим внимание на блок dependencies. Именно в этот блок добавляются библиотеки.

Сейчас нам необходимо добавить зависимость на библиотеку, которая сделает нашу фотографию круглой.

Поиск библиотеки

Каким образом обычно находят библиотеки для Android проектов? Просто ищут их в поиске Google, используя нужные ключевые слова. Давайте попробуем:

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

Сразу видим строку для добавления в build.gradle файл и использование в xml файле. Давайте добавим библиотеку в наш проект. Единственное, что стоит отметить: ключевое слово compile является устаревшим в новой версии gradle, поэтому давайте сразу же его заменим на слово implementation. Видимо, создатель библиотеки не успел обновить Readme файл.

Как только мы добавим строку implementation 'de.hdodenhof:circleimageview:2.1.0' в наш gradle файл, вверху сразу появится уведомление, которое говорит нам, что мы должны синхронизировать проект, так как файл изменился. Нажимаем кнопку Sync Now.:

Отлично, мы подключили с вами нужную библиотеку. Давайте сразу же попробуем использовать её. Для этого в нашем файле activity_user_info.xml давайте заменим использование ImageView на de.hdodenhof.circleimageview.CircleImageView, как сказано в документе библиотеки:

activity_user_info.xml

<RelativeLayout>

    <de.hdodenhof.circleimageview.CircleImageView
        android:id="@+id/user_image_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_launcher"/>

    <!-- Остальные элементы снизу не изменились -->

</RelativeLayout>

Посмотрим, как отобразился наш результат в Preview панели.

У нас всё получилось, давайте ещё раз повторим, что надо для того, чтобы добавить библиотеку в проект:

• Найти нужную нам библиотеку на github (или другом сайте).
• Посмотреть имя библиотеки + версию.
• Перейти в файл build.gradle(Module:app)
• Зайти в блок dependencies
• Добавить строку implementation "libraryName:libraryVersion"

Добавление и использование библиотеки Picasso

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

Мы будем использовать библиотеку picasso.

Давайте добавим эту библиотеку в наш блок dependencies, как мы это уже сегодня делали. Добавим строку implementation 'com.squareup.picasso:picasso:2.5.2' в наш build.gradle файл:

Теперь осталось применить её в нашем проекте. Она применяется в java коде. В первую очередь нам надо объявить наш ImageView в java коде и связать его с элементов в xml. Давайте сделаем это.

UserInfoActivity.java

public class UserInfoActivity extends AppCompatActivity {
    private ImageView userImageView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_user_info);

        userImageView = findViewById(R.id.user_image_view);
    }
}

Здесь ничего сложного. Давайте теперь посмотрим, как нам надо использовать библиотеку picasso на официальном сайте. Видим, что нам всего лишь надо добавить одну строку в нашу Activity:

UserInfoActivity.java

Picasso.with(context).load("http://i.imgur.com/DvpvklR.png").into(imageView)

Разберём код выше чуть подробнее. Библиотека использует статический класс для удобства. Этому классу необходимы следующие параметры:

• Первый параметр (передаётся в метод with) – context. Помним, что в Android пакете Activity наследуется от контекста, т.е. является им, поэтому мы можем передавать ссылку на нашу Activity.
• Второй параметр (передаётся в метод load) http://i.imgur.com/DvpvklR.png – это адрес фотографии, которую мы хотим загрузить.
• Третий параметр (передаётся в метод into) imageView – это и есть наш userImageView, который будет отображать загруженную фотографию.

Вот и всё, давайте добавим эту строку в нашу UserInfoActivity и запустим приложение.

UserInfoActivity.java

public class UserInfoActivity extends AppCompatActivity {
    private ImageView userImageView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_user_info);
        userImageView = findViewById(R.id.user_image_view);

        Picasso.with(this).load("http://i.imgur.com/DvpvklR.png").into(userImageView);
    }
}

Давайте запустим приложение и посмотрим на результат:

Что-то пошло не так, фотография не отобразилась.

У вас фотография могла отобразиться. На эмуляторе у меня локально она отображается, а на реальном устройстве – нет. Давайте добавим логику, позволяющую отображать картинку и на реальном устройстве.

Т.к. мы загружаем фотографию с удалённого хранилища, то нам необходимо объявить в файле AndroidManifest строку, которая будет указывать, что наше приложение использует интернет:

AndroidManifest.xml

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

Вот как должен выглядеть наш файл после этого:

Теперь запустим приложение и посмотрим результат:

Отлично! Наша фотография загрузилась. Только сделаем фотографию немного меньше. Помним, что сейчас у нашего user_image_view стоят размеры wrap_content. Это означает, что размеры будут меняться в зависимости от размеров фотографий. Давайте поставим фотографии размеры 96dp, чтобы она была похожа по размерам на фотографию в официальном Twitter-клиенте. Изменим два атрибута нашего ImageView.

activity_user_info.xml

<RelativeLayout>

    <de.hdodenhof.circleimageview.CircleImageView
        android:id="@+id/user_image_view"
        android:layout_width="96dp"
        android:layout_height="96dp"
        android:src="@mipmap/ic_launcher"/>

    <!-- Остальные элементы снизу не изменились -->

</RelativeLayout>

В результате получим:

Видим, что фотография стала занимать меньше места. Отлично, давайте подведём итоги нашего урока.

• Android проекты используют gradle системы для сборки проекта. Для подключения библиотек используется build.gradle(Module:app) файл.
• Библиотеки очень легко найти, используя нужные ключевые слова. Чаще всего библиотеки с описанием находятся на сайте github.
• Все библиотеки подключаются шаблонно. Мы увидели это на примере двух библиотек: для отображения круглой фотографии, для загрузки фотографий с удалённого сервера.

Ссылки:

• Ссылка на репозиторий библиотеки CircleImageView
• Ссылка на репозиторий библиотеки Picasso

Полезные материалы:

• Англоязычные:
  • Официальная документация. ImageView