Работа с изображениями

Компонент Image

Для выведения изображений в приложении в Jetpack Compose предназначен компонент Image. Он имеет ряд версий. Первая версия компонента:

@Composable
fun Image(
    bitmap: ImageBitmap,
    contentDescription: String?,
    modifier: Modifier = Modifier,
    alignment: Alignment = Alignment.Center,
    contentScale: ContentScale = ContentScale.Fit,
    alpha: Float = DefaultAlpha,
    colorFilter: ColorFilter? = null,
    filterQuality: FilterQuality = DefaultFilterQuality
): @Composable Unit

Параметры функции компонента:

• bitmap: объект типа ImageBitmap, которое собственно представляет изображение для отрисовки

• contentDescription: представляет строковое описание для изображения, которое применяется сервисами accessibility в служебных целях

• modifier: представляет объект Modifier, который определяет модификаторы компонента

• alignment: представляет объект типа Alignment, которое задает выравнивание изображения. Значение по умолчанию - Alignment.Center.

• contentScale: объект типа ContentScale, который принцип масштабирования изображения. По умолчанию равно ContentScale.Fit

  Может принимать следующие значения:

  • ContentScale.Crop: масштабирует изображение с сохранением аспектного отношения (отношение высоты и ширины) таким образом, что ширина и высота оказываются равными или больше сторон контейнера.

  • ContentScale.FillBounds: неравномерно масштабирует изображение для полного заполнения пространства контейнера.

  • ContentScale.FillHeight: масштабирует изображение с сохранением аспектного отношения таким образом, что высота изображения равна высоте контейнера.

  • ContentScale.FillWidth: масштабирует изображение с сохранением аспектного отношения таким образом, что ширина изображения равна ширине контейнера.

  • ContentScale.Fit: масштабирует изображение с сохранением аспектного отношения (отношение высоты и ширины) таким образом, что ширина и высота оказываются равными или меньше сторон контейнера.

  • ContentScale.Inside: масштабирует изображение с сохранением аспектного отношения (отношение высоты и ширины) таким образом, чтобы вместить изображение внутри контейнера, если ширина и(или) высота изобажения больше ширины и(или) высоты контейнера.

  • ContentScale.None: масштабирование отсутствует

  

• alpha: задает прозрачность изображения в виде значения типа Float

• colorFilter: устанавливает применяемые к изображению цветовые фильтры в виде объекта ColorFilter

• filterQuality: задает алгоритм выборки пикселей из изображения. Представляет объект типа FilterQuality и по умолчанию имеет значение FilterQuality.Low

Вторая версия Image:

@Composable
fun Image(
    imageVector: ImageVector,
    contentDescription: String?,
    modifier: Modifier = Modifier,
    alignment: Alignment = Alignment.Center,
    contentScale: ContentScale = ContentScale.Fit,
    alpha: Float = DefaultAlpha,
    colorFilter: ColorFilter? = null
): @Composable Unit

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

Третья версия:

@Composable
fun Image(
    painter: Painter,
    contentDescription: String?,
    modifier: Modifier = Modifier,
    alignment: Alignment = Alignment.Center,
    contentScale: ContentScale = ContentScale.Fit,
    alpha: Float = DefaultAlpha,
    colorFilter: ColorFilter? = null
): @Composable Unit

Здесь опять же меняется только первый параметр, который задает изображение. В данном случае это параметр painter, который представляет объект Painter.

Какой бы вариант компонента Image мы не выбрали, в любом случае необходимо установить первый параметр, который задает изображение, и параметр contentDescription.

Простейший пример:

package com.example.helloapp

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.size

import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.painter.ColorPainter
import androidx.compose.ui.unit.dp

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Box(Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
                Image(
                    painter = ColorPainter(Color.DarkGray),
                    modifier = Modifier.size(200.dp),
                    contentDescription = "Черный квадрат"
                )
            }
        }
    }
}

В данном случае для установки изображения применяется параметр painter, который в качестве значения принимает объект ColorPainter. ColorPainter по сути представляет полотно, закрашенное цветом. Цвет передается в качестве параметра в ColorPainter. То есть в данном случае мы фактически увидем компонент Image, окрашенный в темно-серый цвет.