Векторная графика и ImageVector

Для отображения векторной графики в компоненте Image у этого компонента применяется параметр imageVector, который представляет объект класса ImageVector.

Например, встроенные в Jetpack Compose иконки как раз представляют векторную графику, которую мы можем вывести в компоненте Image:

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.size
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Email
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Image(
                imageVector = Icons.Filled.Email,
                contentDescription = "Значок электронной почты",
                modifier = Modifier.size(200.dp, 150.dp)
            )
        }
    }
}

Ресурсы векторной графики

Также мы можем использовать ImageVector для загрузки векторной графики, которая хранится в ресурсах приложения. Для хранения векторной графики, как и вообще изображений, в проекте предназначена папка res/drawable:

По умолчанию в этой папке уже имеется ресурсы векторной графики в виде файлов ic_launcher_background.xml и ic_launcher_foreground.xml, которые применяются для создания иконок приложения.

Для загрузки ресурса векторной графики и создания из него объекта ImageVector применяется функция ImageVector.vectorResource(), в которую передается идентификатор загружаемого ресурса. Например, загрузим имеющийся по умолчанию файл ic_launcher_background.xml

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.ui.graphics.vector.ImageVector
import androidx.compose.ui.res.vectorResource

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Image(
                imageVector = ImageVector.vectorResource(R.drawable.ic_launcher_background),
                contentDescription = "Android"
            )
        }
    }
}

Для примера определим свой ресурс векторной графики. Для этого в папку res/drawable добавим новый ресурс. Для этого нажмем правой кнопкой мыши на папку res/drawable и в появившемся контекстном меню выберем пункт New -> Drawable Resource File:

Далее в появившемся окошке в поле File name введем star - это будет название файла:

Остальные настройки оставим по умолчанию и нажмем на OK.

После этого в папку res/drawable будет добавлен файл star.xml:

Изменим содержимое этого файла на следующий код:

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android" xmlns:aapt="http://schemas.android.com/aapt"
    android:viewportWidth="260"
    android:viewportHeight="245"
    android:width="260dp"
    android:height="245dp">
    <path
        android:pathData="M56 237l74 -228 74 228L10 96h240"
        android:fillColor="#aa0000" />
</vector>

Я не буду подробно останавливаться на том, как создавать подобную графику, но вкратце данная графика представляет красную звезду. Для простоты можно взять какое-нибудь изображение в формате svg, который довольно распространен, и конвертировать его в данный формат с помощью онлайн-конвертеров.

Теперь изменим код в файле MainActivity.kt для загрузки этой звезды:

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.ui.graphics.vector.ImageVector
import androidx.compose.ui.res.vectorResource

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Image(
                imageVector = ImageVector.vectorResource(R.drawable.star),
                contentDescription = "Красная звезда"
            )
        }
    }
}