Android Studio: урок Kotlin — ImageView и ImageButton

Текст и кнопки — это основа интерфейса, но без картинок приложение выглядит скучно. Иконки, аватарки и просто красивые изображения оживляют экраны. В Android за отображение графики отвечают два простых компонента — ImageView и ImageButton. Сегодня в Android Studio мы научимся с ними работать: добавлять картинки из ресурсов, менять их программно и делать так, чтобы изображение отзывалось на нажатие, как обычная кнопка. Писать будем на Kotlin, и этот урок даст вам ещё один полезный инструмент для построения привлекательного интерфейса.


ImageView: показываем картинку на экране

ImageView — это самый простой способ поместить графику в разметку. Он принимает изображение из ресурсов, заданное через атрибут android:src, и автоматически подстраивает размер под содержимое. Картинку нужно предварительно положить в папку res/drawable. Подойдут форматы PNG, JPG, WebP, а также векторные XML-файлы.

Создайте простой экран с ImageView и текстовой меткой. Файл разметки activity_main.xml будет выглядеть так:

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:src="@drawable/ic_launcher_foreground" />

    <TextView
        android:id="@+id/tvLabel"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Это ImageView"
        android:textSize="18sp"
        android:layout_marginTop="16dp" />
</LinearLayout>

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


ImageButton: изображение как кнопка

Иногда нужно, чтобы картинка вела себя как кнопка — реагировала на нажатие. Для этого существует ImageButton. Он работает почти как ImageView, но наследуется от класса ImageView и автоматически добавляет фон и интерактивные состояния. Атрибут android:src задаёт изображение, а android:background можно оставить прозрачным, если не нужна подложка.

Добавим ImageButton в ту же разметку:

<ImageButton
    android:id="@+id/imageButton"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:src="@drawable/ic_launcher_foreground"
    android:background="@android:color/transparent"
    android:layout_marginTop="24dp" />

Обработка нажатий на ImageButton

В MainActivity.kt найдём ImageButton и повесим на него слушатель, как на обычную кнопку. При клике будем менять текст метки.

val imageButton = findViewById<ImageButton>(R.id.imageButton)
val tvLabel = findViewById<TextView>(R.id.tvLabel)

imageButton.setOnClickListener {
    tvLabel.text = "ImageButton нажат!"
}

ImageButton можно стилизовать через атрибуты android:background и android:src, а также использовать селекторы для разных состояний (нажатие, фокус, отключено).


Программная смена изображения

Иногда нужно менять картинку в ImageView или ImageButton из кода — например, переключать иконку избранного со звезды на пустую. Для этого используют метод setImageResource() или setImageDrawable().

// переключить картинку в ImageView
imageView.setImageResource(R.drawable.ic_another_image)

// то же самое для ImageButton
imageButton.setImageResource(R.drawable.ic_another_image)

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


Практический пример: переключение иконки

Создадим небольшой пример, где при нажатии на ImageButton картинка в ImageView меняется на другую. Для этого понадобятся два изображения в папке drawable, например ic_android и ic_android_2 (можно добавить свои).

var isFirstImage = true

imageButton.setOnClickListener {
    if (isFirstImage) {
        imageView.setImageResource(R.drawable.ic_android_2)
        tvLabel.text = "Показана вторая картинка"
    } else {
        imageView.setImageResource(R.drawable.ic_android)
        tvLabel.text = "Показана первая картинка"
    }
    isFirstImage = !isFirstImage
}

Полезные мелочи

  • Масштабирование. У ImageView и ImageButton есть атрибут android:scaleType. Значение centerCrop заполняет весь контейнер, обрезая лишнее, а fitCenter — вписывает изображение целиком. Поэкспериментируйте с разными типами, чтобы понять, какой подходит для вашей задачи.
  • Прозрачный фон. По умолчанию ImageButton имеет серый фон. Если нужна только иконка, установите android:background="@null" или @android:color/transparent.
  • Векторные изображения. Для адаптации под разные экраны лучше использовать векторную графику (VectorDrawable) — она не размывается при увеличении и занимает мало места.

Что мы сегодня освоили

Этот урок в Android Studio на Kotlin показал, как работать с картинками через ImageView и ImageButton. Вы добавили изображения на экран, сделали их кликабельными и научились менять картинку программно. Теперь ваш интерфейс может быть не только функциональным, но и визуально привлекательным. Попробуйте добавить анимацию при смене изображения или применить собственные стили к кнопкам — это поможет закрепить материал.

Добавлен:
Яндекс.Метрика