ImageView — показываем изображения.

Урок #10

Урок 10 — ImageView — показываем изображения.

ImageViewView, предназначенный для отображения изображений.

Существует несколько способов загрузки изображений в ImageView:

  • Из ресурсов приложения в XML или из Java-кода
  • Установкой Bitmap
  • Установкой Drawable
  • С использованием URI

Для начала давайте добавим ImageView в XML:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.test.lessons.MainActivity">

    <ImageView
        android:id="@+id/image_iv"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>

Если вы сейчас запустите приложение, то увидите, что ничего не отображается — изображение-то мы не задали!

Давайте по порядку рассмотрим различные способы.

Установка изображения из ресурсов

Самый простой способ установить изображение — ссылкой на ресурс из XML-верстки. Для этого у ImageView есть атрибут android:src.

Однако, для начала нужно добавить изображение в ресурсы. Возьмите изображение (например, из Git-репозитория к этому уроку) и скопируйте его в ресурсы в директорию drawable:

Изображение в директории Drawable
Изображение в директории Drawable

Теперь мы можем сослаться на это изображение в атрибуте android:src у нашего ImageView:

<ImageView
        android:id="@+id/image_iv"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/image" />

Механизм примерно тот же, что и со строками, только вместо @string мы используем @drawable, а затем имя файла (без расширения).

Запустив приложение, вы увидите, что изображение отображается:

Отображение картинки в ImageView
Отображение картинки в ImageView

Теперь давайте установим это же изображение, но уже из Java-кода. Удалите атрибут android:src:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.test.lessons.MainActivity">

    <ImageView
        android:id="@+id/image_iv"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>

В коде MainActivity "найдите" ImageView:

package com.test.lessons;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.widget.ImageView;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        ImageView imageView = findViewById(R.id.image_iv);
    }

}

Чтобы установить изображение, нужно вызвать метод ImageView.setImageResource(int resId). В качестве параметра, соответственно, нужно передать id ресурса.

В нашем случае это будет выглядеть следующим образом:

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    setContentView(R.layout.activity_main);

    ImageView imageView = findViewById(R.id.image_iv);
    imageView.setImageResource(R.drawable.image);
}

Запустив приложение, вы увидите, что ничего не изменилось (ведь этот метод эквивалентен предыдущему):

Изображение в ImageView, установленное из Java-кода
Изображение в ImageView, установленное из Java-кода

Установка Bitmap

Bitmap — это представление изображения в памяти.

Объект Bitmap хранит в себе информацию о каждом пикселе изображения.

Внимание: Bitmap может занимать очень много места в памяти! Файлы изображений обычно хранятся в форматах со сжатием (JPG/PNG), и поэтому занимают относительно мало места. Bitmap же хранит информацию о каждом пикселе, поэтому может "весить" в десятки/сотни раз больше, чем файл с изображением.

Итак, мы хотим установить изображение, используя Bitmap.

Сначала нужно его откуда-то взять. Самый простой способ — использовать метод BitmapFactory.decodeResource(), дабы создать Bitmap из ресурса.

Он принимает объект ресурсов и id ресурса.

Давайте загрузим наше изображение этим методом:

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    setContentView(R.layout.activity_main);

    ImageView imageView = findViewById(R.id.image_iv);
    Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.image);
}

А теперь просто установим его в ImageView, используя метод ImageView.setImageBitmap():

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    setContentView(R.layout.activity_main);

    ImageView imageView = findViewById(R.id.image_iv);
    Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.image);
    imageView.setImageBitmap(bitmap);
}

Результат, как и в прошлый раз, не изменится.

Установка Drawable

Drawable — это объект, который может быть отрисован в каком-либо View. Drawable не обязательно является изображением — это может быть, например, форма (shape), созданная в ресурсах, или комбинация изображений.

Предположим, что мы хотим установить в ImageView ту же самую картинку, что и раньше, но используя Drawable. В этом нам поможет класс-"обертка" над BitmapBitmapDrawable.

Чтобы создать BitmapDrawable, используйте конструктор, принимающий объект ресурсов и Bitmap:

BitmapDrawable bitmapDrawable = new BitmapDrawable(getResources(), bitmap);

И после этого метод ImageView.setImageDrawable():

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    setContentView(R.layout.activity_main);

    ImageView imageView = findViewById(R.id.image_iv);
    Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.image);
    BitmapDrawable bitmapDrawable = new BitmapDrawable(getResources(), bitmap);
    imageView.setImageDrawable(bitmapDrawable);
}

Готово!

Масштабирование изображения

Существуют различные способы масштабирования изображения в ImageView. За способ масштабирования отвечает атрибут android:scaleType и метод ImageView.setScaleType(). Он принимает следующие значения:

  • center — устанавливает изображение в центре ImageView, но не масштабирует его.
  • centerCrop — равномерно (сохраняя пропорции) масштабирует изображение, высота и ширина изображения будут больше или равны высоте и ширине ImageView. После этого устанавливает изображение в центре ImageView.
  • centerInside — равномерно (сохраняя пропорции) масштабирует изображение, высота и ширина изображения будут меньше или равны высоте и ширине ImageView. После этого устанавливает изображение в центре ImageView.
  • fitCenter — масштабирует изображение, сохраняя пропорции, при этом хотя бы одна из сторон будет равна соответствующей стороне ImageView. После этого устанавливает его в центре ImageView.
  • fitEnd — масштабирует изображение, сохраняя пропорции, при этом хотя бы одна из сторон будет равна соответствующей стороне ImageView. После этого устанавливает его в правом нижнем углу ImageView.
  • fitStart — масштабирует изображение, сохраняя пропорции, при этом хотя бы одна из сторон будет равна соответствующей стороне ImageView. После этого устанавливает его в левом верхнем углу ImageView.
  • fitXY — масштабирует каждую из сторон изображения независимо (то есть не сохраняя пропорции) таким образом, чтобы стороны совпадали со сторонами ImageView.
  • matrix — масштабирует изображение, используя матрицу (задаваемую методом ImageView.setImageMatrix()).

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



Продолжение доступно на платных тарифах

А вместе с ним — проверка домашних заданий нашими менторами.

Это совсем недорого — всего от 440 ₽ в месяц!



ВЫБРАТЬ ТАРИФ



Вход

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

или