Android Jetpack Compose/Compose Modifier
[Android Compose] Composable에 Content Description 붙이기
Content Description이란? Content Description이란 안드로이드의 UI 컴포넌트에 설정되는 UI 컴포넌트를 설명하기 위한 값으로, 사용자와 개발자가 비시각적으로 앱과 소통하기 위해 사용된다. 많은 개발자들이 Content Description을 빈 값으로 설정하거나 null 값으로 설정하는 방식을 취하지만, Content Description을 빈 값으로 설정한다면, 시각적인 소통 외에 앱과 소통할 수 있는 방법이 없어진다. 일반적으로 안드로이드 휴대폰을 사용하는 시각 장애인들은 TalkBack 기능을 사용해 스크린을 읽는데, 이 TalkBack에서 사용하는 것이 바로 이 Content Description 값이다. Content Description은 단순히 시각 장애인을 위..
[Jetpack Compose] clickable 클릭 효과 제거하기 : Ripple 효과 제거하기
clickable에서 클릭 효과 제거가 필요한 이유 clickable에서 다양한 클릭 효과를 만드는 것 또한 중요하지만, 클릭 효과를 제거하는 것도 종종 필요하다. 예를 들어 뒤로 가기 버튼을 눌렀을 때 클릭 효과가 없이 뒤로 가기가 되었으면 한다던가, 필터 버튼을 눌렀을 때 뒤에 클릭 효과가 생기지 않고 필터 버튼의 색상만 변해야 한다던가 하는 요구사항이 있을 수 있다. Compose의 clickable은 기본적으로 클릭 효과를 가지고 있기 때문에, 이러한 요구사항을 맞추기 위해서는 click 효과를 제거하는 것이 필요하다. clickable에서 클릭 효과 제거하기 clickable에서 클릭 효과를 제거하기 위해서는 파라미터가 6개인 clickable 함수를 사용해야 한다. fun Modifier.cl..
[Jetpack Compose] clickable 클릭 효과 커스텀 하게 설정하기 : Custom Indication 구현하기
clickable의 기본 클릭 효과 살펴보기 이전 글에서 clickable의 기본 클릭 효과가 매우 어색한 것을 보았다. 이것이 왜 어색하게 느껴졌는지 구현체를 보면서 살펴보도록 하자. 만약 우리가 clickable { } 형태로 클릭 이벤트를 처리한다면 이 내부에서는 DefaultDebugIndication이란 클릭 효과를 사용한다. 그리고 이 클릭 효과는 아래와 같이 구현되어 있다. private object DefaultDebugIndication : Indication { private class DefaultDebugIndicationInstance( private val isPressed: State, private val isHovered: State, private val isFocused..
[Jetpack Compose] clickable 사용해 유저 클릭 이벤트 감지하기
Jetpack Compose에서 화면 클릭 이벤트 감지하기 Jetpack Compose에서 화면 클릭 이벤트를 감지하기 위해서는 Modifier의 확장 함수인 clickable을 사용하면 된다. 예를 들어 Box 컴포넌트 클릭 시 "조세영의 Kotlin World" Toast를 출력하기 위해서는 다음과 같이 만들 수 있다. class MainActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { Box( modifier = Modifier .size(300.dp) .background(Color.Blue) .clickabl..
[Android Compose Modifier] 7. padding과 border을 조합하여 중첩 테두리 만들기(Multiple Border)
이번 글에서는 하나의 modifier에서 여러개의 border을 만드는 방법을 살펴본다. Modifier에 중첩 border만들기 하나의 Modifier에 여러개의 border을 적용시키는 방법은 간단하다. border사이에 padding을 주면 border을 여러개 중첩해서 만들 수 있다. *내부 로직은 너무 깊은 내용이므로 이 글에서 다루지 않는다. 자 바깥부터 5dp씩 파란색, 빨간색, 초록색 순서로 border을 만들어보자. border 사이에 padding을 주면 중첩해서 border을 만들 수 있다. @Preview(showBackground = true, widthDp = 200, heightDp = 200) @Composable fun KotlinWorldColor() { Column( m..