Изображения и значки в приложении

Отображение изображений из ресурсов

Чтобы показать изображение, включённое в приложение, добавьте его в мультимплатформенные ресурсы проекта и соберите проект, чтобы сгенерировать средства доступа к ресурсам. Создайте экземпляр Painter, передав средство доступа в painterResource(), и передайте полученный Painter в компонуемую функцию Image():

painterResource() поддерживает растровые форматы изображений, такие как .png, .jpg, .bmp и .webp, а также формат векторных изображений Android XML. Подробнее о доступе к ресурсам в виде значений ImageBitmap или ImageVector, а также об использовании значков, шрифтов и строк см. в разделе Использование мультимплатформенных ресурсов в приложении.

Загрузка изображений из файловой системы или сети

Изображения, не входящие в состав приложения (выбранные пользователем файлы или загруженные во время выполнения), не являются ресурсами. Считайте их байты с помощью любого API JVM и декодируйте их одной из следующих функций библиотеки ресурсов:

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

В следующем примере объявлена компонуемая функция AsyncImage(), которая загружает изображение в контексте Dispatchers.IO и отображает его, когда оно готово:

Пути к файлам в примере задаются относительно рабочего каталога приложения.

Настройка значка окна

Чтобы использовать изображение в качестве значка окна, передайте экземпляр Painter в компонуемую функцию Window() в качестве параметра icon:

Расположение значка зависит от операционной системы:

• В Windows и Linux это значок окна и его элемента на панели задач.

• В macOS значок приложения берётся из пакета приложения. Чтобы изменить значок в Dock, задайте его в конфигурации дистрибутива.

На следующем снимке экрана показано упакованное приложение в macOS. В окне отображается то же изображение, которое передано в параметр icon, а значок Dock берётся из файла .icns, указанного в конфигурации дистрибутива:

Настройка значка системного трея

Чтобы использовать изображение в качестве значка системного трея, передайте экземпляр Painter в компонуемую функцию Tray() в качестве параметра icon:

import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.DpSize
import androidx.compose.ui.unit.dp
import androidx.compose.ui.window.Tray
import androidx.compose.ui.window.Window
import androidx.compose.ui.window.WindowState
import androidx.compose.ui.window.application
import com.example.composeapp.generated.resources.Res
import com.example.composeapp.generated.resources.compose_logo
import org.jetbrains.compose.resources.painterResource

fun main() = application {
  val icon = painterResource(Res.drawable.compose_logo)

  Tray(
    icon = icon,
    tooltip = "Compose Multiplatform",
    menu = {
      Item("Exit", onClick = ::exitApplication)
    }
  )

  Window(
    onCloseRequest = ::exitApplication,
    title = "Tray icon",
    icon = icon,
    state = WindowState(size = DpSize(400.dp, 300.dp))
  ) {
    Box(modifier = Modifier.fillMaxSize().padding(24.dp)) {
      Image(
        painter = icon,
        contentDescription = "Compose Multiplatform logo",
        modifier = Modifier.fillMaxSize()
      )
    }
  }
}

В macOS значок системного трея отображается в строке меню:

Что дальше

• Узнайте больше о мультимплатформенных ресурсах и о том, как обращаться к ним из общего кода.

• Узнайте, как добавить значок приложения в системный трей.

• Узнайте, как создавать нативные дистрибутивы с отдельными значками приложения для разных платформ.

• Ознакомьтесь с руководствами по другим компонентам для настольных приложений.