Compose Multiplatform 1.6.0 – Resources, UI Testing, iOS Accessibility, and Preview Annotation

Sebastian Aigner Aleksey Zamulla

Compose Multiplatform is a declarative UI framework built by JetBrains that allows developers to share UI implementations across different platforms. The 1.6.0 release brings several powerful features, as well as compatibility with the latest Kotlin version and changes from Google’s latest Jetpack Compose update.

Get Started with Compose Multiplatform

This release of Compose Multiplatform:

• Revamps the resource management library.
• Introduces a UI testing API.
• Adds iOS accessibility support.
• Brings a host of other features and improvements.

For a description of all notable changes, see our What’s new in Compose Multiplatform 1.6.0 page or check the release notes on GitHub.

Common resources API

The biggest and most anticipated change in Compose Multiplatform 1.6.0 is the improvement of the API for sharing and accessing resources in common Kotlin code. This API now allows you to include and access more types of resources in your Compose Multiplatform applications.

The resources are organized in a number of directories as part of the commonMain source set:

• composeResources/drawable contains images
• composeResources/font contains fonts
• composeResources/values contains strings (in the format of strings.xml)
• composeResources/files contains any other files.

Compose Multiplatform generates type-safe accessors for all of these resource types (excluding the files directory). For example, after placing a vector image compose-multiplatform.xml in the composeResources/drawable directory, you can access it in your Compose Multiplatform code using the generated Res object:

import androidx.compose.foundation.Image
import androidx.compose.runtime.Composable
import kotlinproject.composeapp.generated.resources.*
import org.jetbrains.compose.resources.ExperimentalResourceApi
import org.jetbrains.compose.resources.painterResource

@OptIn(ExperimentalResourceApi::class)
@Composable
fun Logo() {
    Image(
        painterResource(Res.drawable.compose_multiplatform),
        contentDescription = "CMP Logo"
    )
}

The new resources API also allows you to provide variations of the same resource for different use cases, including locale, screen density, or theme. Whether you’re localizing text, changing the colors of your icons in dark mode, or providing alternative images based on screen resolution, you can express these constraints by adding qualifiers to the directory names.

For a closer look at qualifiers for resources, as well as an in-depth overview of the new resources API in Compose Multiplatform 1.6.0, take a look at the official documentation!

Common API for UI testing

UI testing helps you make sure that your application behaves the way it is supposed to. With Compose Multiplatform 1.6.0, we’re introducing an experimental API that allows you to write common UI tests for Compose Multiplatform that validate the behavior of your application’s user interface across the different platforms supported by the framework.

For example, you may want to ensure that a custom component correctly shows an informative string with the proper prefix:

@Composable
fun MyInfoComposable(info: String, modifier: Modifier = Modifier) {
    Text(modifier = modifier, text = "[IFNO] $info")
}

In the latest version of Compose Multiplatform, you can now use UI tests to validate that the component does indeed correctly prefix the text when rendered. To do so, you can use the same finders, assertions, actions, and matchers as you would with Jetpack Compose on Android. After following the setup instructions from the documentation you can write a test that ensures the prefix is added properly:

import androidx.compose.ui.test.ExperimentalTestApi
import androidx.compose.ui.test.runComposeUiTest
...

class InformationTest {
    @OptIn(ExperimentalTestApi::class)
    @Test
    fun shouldPrefixWithInfoTag() = runComposeUiTest {
        setContent {
            MyInfoComposable("Important things!", modifier = Modifier.testTag("info"))
        }
        onNodeWithTag("info").assertTextContains("[INFO]", substring = true)
    }
}

Running this test on any of your target platforms will show you the test results (and in this case, help you spot and correct a typo!):

iOS accessibility support

Compose Multiplatform for iOS now allows people with disabilities to interact with the Compose UI with the same level of comfort as with the native UI:

• Screen readers and VoiceOver can access the content of the Compose Multiplatform UI.
• Compose Multiplatform UI supports the same gestures as the native UIs for navigation and interaction.

This is possible because the Compose Multiplatform semantic data is automatically mapped into an accessibility tree. You can also make this data available to Accessibility Services and use it for testing with the XCTest framework.

For details on the implementation and limitations of the current accessibility support, see the documentation page.

@Preview annotation for Fleet

With 1.6.0, Compose Multiplatform introduces the common @Preview annotation (previously available only for Android and Desktop). This annotation is supported by JetBrains Fleet (starting with Fleet 1.31). Add @Preview to your @Composable function, and you’ll be able to open the preview via the gutter icon:

Try it out with a project generated by the Kotlin Multiplatform wizard!

Fleet currently supports the @Preview annotation for @Composable functions without parameters. To use this common annotation, add the experimental compose.components.uiToolingPreview library to your dependencies (as opposed to compose.uiTooling, used for desktop and Android).

Separate platform views for popups, dialogs, and dropdown menus

When mixing Compose Multiplatform with SwiftUI, you may only want to have some widgets of a given screen rendered using Compose. Starting with version 1.6, when you create Dialog, Popup, or Dropdown composables in these scenarios, they can expand beyond the bounds of the individual widget and even expand across the entire screen!

This is also possible for desktop targets, although as an experimental feature for now.

Other notable changes

To learn about the rest of the changes included in this release:

• See What’s new in Compose Multiplatform 1.6.0 page where we talk about improvements and features introduced in 1.6.0 in more detail.
• Compose Multiplatform release notes on GitHub has an exhaustive list of merged pull requests for 1.6.0.

What else to read and watch

• Get started with Compose Multiplatform — tutorial

• Build Apps for iOS, Android, and Desktop With Compose Multiplatform — video
• Compose Multiplatform and Jetpack Compose

Compose Multiplatform 1.6.0 – 리소스, UI 테스트, iOS 접근성 및 Preview 어노테이션

Jessie Cho

Compose Multiplatform은 개발자가 다양한 플랫폼에서 UI 구현을 공유할 수 있도록 JetBrains에서 빌드한 선언적 UI 프레임워크입니다. 1.6.0 릴리스에서는 최신 Kotlin 버전과의 호환성 및 Google의 최신 Jetpack Compose 업데이트 변경 사항과 더불어 여러 가지 강력한 기능을 제공합니다.

Compose Multiplatform 시작하기

이번 Compose Multiplatform 릴리스의 하이라이트:

• 리소스 관리 라이브러리를 개선했습니다.
• UI 테스트 API를 도입했습니다.
• iOS 접근성 지원을 추가했습니다.
• 다양한 기타 기능과 개선 사항을 제공합니다.

주요 변경 사항에 대한 자세한 설명은 Compose Multiplatform 1.6.0의 새로운 기능 페이지를 참조하거나 GitHub의 릴리스 노트를 확인하세요.

공통 리소스 API

Compose Multiplatform 1.6.0에서 가장 기대되었던 주된 변화는 공통 Kotlin 코드에서 리소스를 공유하고 액세스하기 위한 API의 개선입니다. 이제 이 API를 사용하면 Compose Multiplatform 애플리케이션에 더 많은 유형의 리소스를 포함하고 액세스할 수 있습니다.

이러한 리소스는 commonMain 소스 집합의 일부로 여러 디렉터리에 구성되어 있습니다.

• composeResources/drawable에는 이미지가 포함되어 있습니다.
• composeResources/font에는 글꼴이 포함되어 있습니다.
• composeResources/values에는 문자열이 포함되어 있습니다(strings.xml 형식).
• composeResources/files에는 다른 파일들이 포함되어 있습니다.

Compose Multiplatform은 이러한 모든 리소스 유형(files 디렉터리 제외)에 대해 타입 안전 접근자를 생성합니다. 예를 들어 composeResources/drawable 디렉터리에 벡터 이미지 compose-multiplatform.xml을 놓은 후, 생성된 Res 객체를 사용하여 Compose Multiplatform 코드에서 해당 이미지에 액세스할 수 있습니다.

import androidx.compose.foundation.Image
import androidx.compose.runtime.Composable
import kotlinproject.composeapp.generated.resources.*
import org.jetbrains.compose.resources.ExperimentalResourceApi
import org.jetbrains.compose.resources.painterResource

@OptIn(ExperimentalResourceApi::class)
@Composable
fun Logo() {
    Image(
        painterResource(Res.drawable.compose_multiplatform),
        contentDescription = "CMP Logo"
    )
}

또한 새로운 리소스 API를 사용하면 로케일, 화면 밀도 또는 테마를 비롯해 다양한 사용 사례에 동일한 리소스의 변형 형태를 제공할 수 있습니다. 텍스트를 현지화하거나, 다크 모드에서 아이콘 색상을 변경하거나, 화면 해상도에 따라 대체 이미지를 제공하는 모든 경우에 디렉터리 이름에 한정자를 추가하여 이러한 제약 조건을 표현할 수 있습니다.

리소스 한정자를 자세히 살펴보고 Compose Multiplatform 1.6.0의 새로운 리소스 API를 보다 심층적으로 개괄하려면 공식 문서를 살펴보세요.

UI 테스트를 위한 공통 API

UI 테스트는 애플리케이션이 예상대로 작동하는지 확인하는 데 도움을 줍니다. Compose Multiplatform 1.6.0에서는 프레임워크에서 지원하는 다양한 플랫폼에서 애플리케이션의 사용자 인터페이스 동작을 검증하는 Compose Multiplatform용 공통 UI 테스트를 작성할 수 있도록 실험적 API를 도입했습니다.

예를 들어, 사용자 지정 구성 요소가 적절한 접두사와 함께 정보 문자열을 올바르게 표시하는지 확인해야 할 수 있습니다.

@Composable
fun MyInfoComposable(info: String, modifier: Modifier) {
    Text(modifier = modifier, text = "[IFNO] $info")
}

최신 버전의 Compose Multiplatform에서는 이제 UI 테스트를 사용하여 렌더링 시 구성 요소가 실제로 텍스트 접두사를 올바르게 지정하는지 확인할 수 있습니다. 이를 위해 Android의 Jetpack Compose에서와 동일하게 파인더, 어설션, 액션 및 매처를 사용할 수 있습니다. 문서의 설정 지침을 따른 후, 접두사가 올바르게 추가되었는지 확인하는 테스트를 작성할 수 있습니다.

import androidx.compose.ui.test.ExperimentalTestApi
import androidx.compose.ui.test.runComposeUiTest
...

class InformationTest {
    @OptIn(ExperimentalTestApi::class)
    @Test
    fun shouldPrefixWithInfoTag() = runComposeUiTest {
        setContent {
            MyInfoComposable("Important things!", modifier = Modifier.testTag("info"))
        }
        onNodeWithTag("info").assertTextContains("[INFO]", substring = true)
    }
}

타깃 플랫폼에서 이 테스트를 실행하면 테스트 결과가 표시됩니다(그리고 이 경우, 오타를 찾아 수정하는 데 도움을 줍니다!).

iOS 접근성 지원

이제 iOS용 Compose Multiplatform을 사용하면 장애가 있는 사용자도 네이티브 UI에서와 같이 편안하게 Compose UI와 상호 작용할 수 있습니다.

• 스크린 리더와 VoiceOver가 Compose Multiplatform UI의 콘텐츠에 액세스할 수 있습니다.
• Compose Multiplatform UI는 탐색 및 상호 작용을 위해 네이티브 UI와 동일한 동작을 지원합니다.

Compose Multiplatform 시맨틱 데이터가 접근성 트리에 자동으로 매핑되기 때문에 가능한 일입니다. 또한 이 데이터를 접근성 서비스에 제공하고 XCTest 프레임워크를 통한 테스트에 사용할 수도 있습니다.

현재 접근성 지원의 구현과 제한 사항에 대한 자세한 내용은 문서 페이지를 참조하세요.

Fleet에서 지원하는 @Preview 어노테이션

1.6.0 버전에서는 Compose Multiplatform에 공통 @Preview 어노테이션이 도입되었습니다(이전에는 Android 및 데스크톱에서만 사용 가능). 이 어노테이션은 JetBrains Fleet(Fleet 1.31부터)에서 지원됩니다. @Composable 함수에 @Preview를 추가하면 여백 아이콘을 통해 미리보기를 열 수 있습니다.

Kotlin Multiplatform 마법사로 생성된 프로젝트에 사용해 보세요!

현재, Fleet은 매개변수 없이 @Composable 함수에 대한 @Preview 어노테이션을 지원합니다. 이 공통 어노테이션을 사용하려면 실험적 compose.components.uiToolingPreview 라이브러리를 종속성에 추가하세요(데스크톱 및 Android에 사용되는 compose.uiTooling과 달리).

팝업, 대화상자 및 드롭다운 메뉴에 대한 별도의 플랫폼 뷰

Compose Multiplatform을 SwiftUI와 함께 사용할 때 Compose를 사용하여 특정 화면의 일부 위젯만 렌더링해야 할 수 있습니다. 버전 1.6부터 이러한 시나리오에서 Dialog, Popup 또는 Dropdown 컴포저블을 만들면 개별 위젯의 경계를 넘어 확장할 수 있습니다. 심지어, 전체 화면으로까지 확장할 수도 있습니다!

현재 실험적 기능이기는 하지만 데스크톱 타깃에도 가능합니다.

기타 주목할 만한 변경 사항

이번 릴리스에 포함된 나머지 변경 사항에 대해 알아보려면:

• 1.6.0에 도입된 개선 사항과 기능이 자세히 설명된 Compose Multiplatform 1.6.0의 새로운 기능 페이지를 참조하세요.
• GitHub의 Compose Multiplatform 릴리스 노트에는 1.6.0에 대한 병합된 풀 리퀘스트의 전체 목록이 수록되어 있습니다.

기타 유용한 글과 영상

• Compose Multiplatform 시작하기 — 튜토리얼

• Compose Multiplatform을 사용하여 iOS, Android 및 데스크톱용 앱 빌드 — 동영상

게시물 원문 작성자