Compose Semantics

시맨틱(Semantic)이란 코드 조각의 의미를 나타낸다.

뭐야? 시멘트 바르는거 아니였어?
비슷하긴하지 ...

간단히 말하면, 일정의 틀, 묶음을 나타내서 같이 쓸 수 있게 하는거?!

주로 사용

• Touch 영역
• 클릭 라벨 추가
• 시각 장애인을 위한 아이콘에 대한 설명

Compose Semantics

• 시맨틱 속성을 사용하여 접근성 서비스에 정보를 전달합니다
• 사용자에게 표시되는 UI 요소에 관한 정보를 제공합니다

코드를 보자 ..!

터치 영역 최소 크기 고려

onCheckedChange 매개변수가 null로 설정된 경우 구성요소와 직접 상호작용할 수 없으므로 패딩이 포함되지 않습니다.

@Composable
fun CheckableCheckbox() {
    Checkbox(checked = true, onCheckedChange = {})
}

@Composable
fun NonClickableCheckbox() {
    Checkbox(checked = true, onCheckedChange = null)
}

CheckBox로 클릭 구현하기

@Composable
fun CheckableRow() {
   MaterialTheme {
       var checked by remember { mutableStateOf(false) }
       Row(
           Modifier
                .toggleable(
                    value = checked,
                    role = Role.Checkbox,
                    onValueChange = { checked = !checked }
                )
               .padding(16.dp)
               .fillMaxWidth()
       ) {
           Text("Option", Modifier.weight(1f))
           Checkbox(checked = checked, onCheckedChange = null)
       }
   }
}

클릭 라벨 추가

두 차이점을 비교해 보자

1) Click 이벤트가 들어왔을때 값을 실행(전달)하는 메소드

@Composable
fun ArticleListItem(openArticle: () -> Unit) {
   Row(
       Modifier.clickable(
           // R.string.action_read_article = "read article"
           onClickLabel = stringResource(R.string.action_read_article),
           onClick = openArticle
       )
   ) {
       // ..
   }
}

2) 클릭했을때 Boolean 값을 바꿔 실행하는 메소드

@Composable
fun LowLevelClickLabel(openArticle: () -> Boolean) {
   // R.string.action_read_article = "read article"
   val readArticleLabel = stringResource(R.string.action_read_article)
   Canvas(
       Modifier.semantics {
           onClick(label = readArticleLabel, action = openArticle)
       }
   ) {
       // ..
   }
}

참고자료

• android here