Computer >> 컴퓨터 >  >> 시스템 >> Android

Jetpack Compose에서 도구 설명 사용:단계별 가이드

Jetpack Compose에서 도구 설명 사용:단계별 가이드

Jetpack Compose에 대한 마지막 기사를 작성할 때 저는 Jetpack Compose에 (제 생각에는) 일부 기본 구성요소가 누락되어 있으며 그 중 하나가 툴팁이라고 언급했습니다.

당시에는 도구 설명을 표시하는 내장 컴포저블이 없었고 온라인에는 여러 대체 솔루션이 떠돌고 있었습니다. 이러한 솔루션의 문제는 Jetpack Compose가 최신 버전을 출시하면 해당 솔루션이 중단될 수 있다는 것입니다. 따라서 이는 이상적이지 않았으며 커뮤니티는 언젠가 툴팁에 대한 지원이 추가되기를 바랐습니다.

Compose Material 3 버전 1.1.0부터 이제 도구 설명 지원 기능이 내장되었습니다. 👏

이 자체로는 훌륭하지만 해당 버전이 출시된 지 1년 이상이 지났습니다. 그리고 후속 버전에서는 툴팁 관련 API도 대폭 변경되었습니다.

변경 로그를 살펴보면 공개 API와 내부 API가 어떻게 변경되었는지 확인할 수 있습니다. 따라서 이 문서를 읽을 때 도구 설명과 관련된 모든 것이 여전히 ExperimentalMaterial3Api::class 주석으로 표시되어 있으므로 상황이 계속 변경되었을 수 있다는 점을 명심하세요. .

❗️ 본 글에 사용된 자료 3의 버전은 1.2.1이며, 2024년 3월 6일에 출시되었습니다

이제 두 가지 유형의 툴팁이 지원됩니다:

  1. 일반 툴팁

  2. 리치 미디어 도구 설명

일반 도구 설명

첫 번째 종류를 사용하면 다른 방법으로는 명확하지 않은 아이콘 버튼에 대한 정보를 제공할 수 있습니다. 예를 들어 일반 도구 설명을 사용하여 아이콘 버튼이 무엇을 나타내는지 사용자에게 알릴 수 있습니다.

Jetpack Compose에서 도구 설명 사용:단계별 가이드

애플리케이션에 툴팁을 추가하려면 TooltipBox를 사용하세요. 구성 가능. 이 컴포저블은 여러 인수를 사용합니다.

fun TooltipBox(
 positionProvider: PopupPositionProvider,
 tooltip: @Composable TooltipScope.() -> Unit,
 state: TooltipState,
 modifier: Modifier = Modifier,
 focusable: Boolean = true,
 enableUserInput: Boolean = true,
 content: @Composable () -> Unit,
)

이전에 컴포저블을 사용해 본 적이 있다면 이들 중 일부가 익숙할 것입니다. 여기서는 특정 사용 사례가 있는 항목을 강조하겠습니다.

  • positionProvider - PopupPositionProvider 유형이며 툴팁의 위치를 계산하는 데 사용됩니다.

  • 툴팁 - 툴팁이 어떻게 보일지에 대한 UI를 디자인할 수 있는 곳입니다.

  • 상태 - 특정 도구 설명 인스턴스와 연결된 상태를 보유합니다. 도구 설명 표시/해제와 같은 메서드를 노출하고 인스턴스를 인스턴스화할 때 도구 설명이 지속되어야 하는지 여부(즉, 사용자가 도구 설명 외부에서 클릭 작업을 수행할 때까지 화면에 계속 표시되어야 하는지 여부)를 선언할 수 있습니다.

  • content - 툴팁이 위/아래에 표시되는 UI입니다.

다음은 BasicTooltipBox를 인스턴스화하는 예입니다. 모든 관련 인수가 채워져 있습니다:

@OptIn(ExperimentalFoundationApi::class, ExperimentalMaterial3Api::class)
@Composable
fun BasicTooltip() {
 val tooltipPosition = TooltipDefaults.rememberPlainTooltipPositionProvider()
 val tooltipState = rememberBasicTooltipState(isPersistent = false)
 BasicTooltipBox(positionProvider = tooltipPosition,
 tooltip = { Text("Hello World") } ,
 state = tooltipState) {
 IconButton(onClick = { }) {
 Icon(imageVector = Icons.Filled.Favorite, 
 contentDescription = "Your icon's description")
 }
 }
}

Jetpack Compose에서 도구 설명 사용:단계별 가이드

Jetpack Compose에는 TooltipDefaults라는 클래스가 내장되어 있습니다. 이 클래스를 사용하면 TooltipBox를 구성하는 인수를 인스턴스화하는 데 도움이 될 수 있습니다. 예를 들어 TooltipDefaults.rememberPlainTooltipPositionProvider를 사용할 수 있습니다. 앵커 요소를 기준으로 도구 설명의 위치를 올바르게 지정합니다.

리치 툴팁

리치 미디어 도구 설명은 일반 도구 설명보다 더 많은 공간을 차지하며 아이콘 버튼의 기능에 대한 더 많은 컨텍스트를 제공하는 데 사용할 수 있습니다. 툴팁이 표시되면 버튼과 링크를 추가하여 추가 설명이나 정의를 제공할 수 있습니다.

TooltipBox 내에서 일반 도구 설명과 비슷한 방식으로 인스턴스화되지만 RichTooltip 컴포저블을 사용합니다.

TooltipBox(positionProvider = tooltipPosition,
 tooltip = {
 RichTooltip(
 title = { Text("RichTooltip") },
 caretSize = caretSize,
 action = {
 TextButton(onClick = {
 scope.launch {
 tooltipState.dismiss()
 tooltipState.onDispose()
 }
 }) {
 Text("Dismiss")
 }
 }
 ) {
 Text("This is where a description would go.")
 }
 },
 state = tooltipState) {
 IconButton(onClick = {
 /* Icon button's click event */
 }) {
 Icon(imageVector = tooltipIcon,
 contentDescription = "Your icon's description",
 tint = iconColor)
 }
 }

리치 툴팁에 대해 알아두어야 할 몇 가지 사항:

  1. 리치 도구 설명에는 캐럿이 지원됩니다.

  2. 사용자에게 추가 정보를 찾을 수 있는 옵션을 제공하기 위해 도구 설명에 작업(버튼)을 추가할 수 있습니다.

  3. 도구 설명을 닫는 논리를 추가할 수 있습니다.

Jetpack Compose에서 도구 설명 사용:단계별 가이드

Jetpack Compose에서 도구 설명 사용:단계별 가이드

엣지 케이스

도구 설명 상태를 지속으로 표시하도록 선택한 경우 , 이는 사용자가 툴팁을 표시하는 UI와 상호작용하면 사용자가 화면의 다른 곳을 누를 때까지 툴팁이 계속 표시된다는 의미입니다.

위에서 리치 도구 설명의 예를 본다면 도구 설명을 클릭하면 해당 도구 설명을 닫는 버튼이 추가되었음을 알 수 있을 것입니다.

사용자가 해당 버튼을 누르면 발생하는 문제가 있습니다. 해제 작업은 툴팁에서 수행되므로 사용자가 이 툴팁을 호출하는 UI 항목을 다시 길게 누르는 경우 툴팁이 다시 표시되지 않습니다. 이는 도구 설명의 상태가 해제된 후에도 지속된다는 것을 의미합니다. 그렇다면 이 문제를 어떻게 해결하고 해결할 수 있을까요?

Jetpack Compose에서 도구 설명 사용:단계별 가이드

툴팁 상태를 "재설정"하려면 onDispose를 호출해야 합니다. 툴팁 상태를 통해 노출되는 메서드입니다. 그렇게 하면 툴팁 상태가 재설정되고 사용자가 UI 항목을 길게 누르면 툴팁이 다시 표시됩니다.

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun RichTooltip() {
 val tooltipPosition = TooltipDefaults.rememberRichTooltipPositionProvider()
 val tooltipState = rememberTooltipState(isPersistent = true)
 val scope = rememberCoroutineScope()
 TooltipBox(positionProvider = tooltipPosition,
 tooltip = {
 RichTooltip(
 title = { Text("RichTooltip") },
 caretSize = TooltipDefaults.caretSize,
 action = {
 TextButton(onClick = {
 scope.launch {
 tooltipState.dismiss()
 tooltipState.onDispose() /// <---- HERE
 }
 }) {
 Text("Dismiss")
 }
 }
 ) {
 }
 },
 state = tooltipState) {
 IconButton(onClick = { }) {
 Icon(imageVector = Icons.Filled.Call, contentDescription = "Your icon's description")
 }
 }
}

Jetpack Compose에서 도구 설명 사용:단계별 가이드

도구 설명 상태가 재설정되지 않는 또 다른 시나리오는 사용자 작업에 따라 해제 메서드를 호출하는 대신 사용자가 도구 설명 외부를 클릭하여 해제되는 경우입니다. 이는 배후에서 해제 메서드를 호출하고 도구 설명 상태는 해제됨으로 설정됩니다. 툴팁을 다시 보기 위해 UI 요소를 길게 누르면 아무 결과도 나오지 않습니다.

Jetpack Compose에서 도구 설명 사용:단계별 가이드

툴팁의 onDispose 메소드를 호출하는 로직이 트리거되지 않는데, 툴팁의 상태를 어떻게 재설정할 수 있나요?

현재로서는 이 사실을 알 수 없습니다. 툴팁의 MutatorMutex와 관련이 있을 수 있습니다. 아마도 향후 릴리스에는 이를 위한 API가 있을 것입니다. 화면에 다른 툴팁이 있는 경우 해당 툴팁을 누르면 이전에 클릭한 툴팁이 재설정된다는 점을 확인했습니다.

Jetpack Compose에서 도구 설명 사용:단계별 가이드

여기에 소개된 코드를 보려면 이 GitHub 저장소로 이동하세요.

애플리케이션의 툴팁을 보려면 여기에서 확인할 수 있습니다.

참고자료

  • Material3 툴팁 개요

  • 툴팁 기본값

  • 툴팁 소스 코드

무료로 코딩을 배우세요. freeCodeCamp의 오픈 소스 커리큘럼은 40,000명 이상의 사람들이 개발자로 취업하는 데 도움을 주었습니다. 시작하세요