compose

DropDownMenu란? DropDownMenu는 버튼을 눌렀을 때 선택지를 보여주는 메뉴 아이템이다. 동작은 그림1과 같다. Compose의 DropDownMenu Compose의 Material package에서는 compose.ui.window 패키지의 Popup을 활용해서 DropDownMenu를 만드는 것을 지원한다. Popup을 활용함으로써 부모 Composable의 제약사항(크기 등)에 종속되지 않는 컴포저블을 만들 수 있다. 또한 Material package에서는 미리 디자인된 컴포저블인 DropDownMenuItem 또한 지원한다. DropDownMenuItem을 이용하면 DropDownMenu에 들어갈 아이템들을 쉽게 만들 수 있다. 우리는 이번 글에서 DropDownMenu와 Dr..

FocusRequester란? FocusRequester란 컴포즈 상에서 컴포저블(View)의 Focus를 바꿔주는 객체이다. 예를 들어 Button이 눌렸을 때 포커스가 TextField로 가야하는 경우 사용된다. FocusRequester 사용법 1. FocusRequester을 Composable 내의 remember 블록에서 선언한다. 2. Modifier.focusRequester() 함수를 이용해 위에서 만든 focusRequester을 포커스를 주기 원하는 곳에 붙인다. 3. 특정 이벤트가 발생했을 때 포커스 주기를 원하면 requestFocus()을 붙인다. @Composable fun KotlinWorldFocusRequester() { .. val focusRequester = reme..

LaunchedEffect 살펴보기 LaunchedEffect는 Composable에서 컴포지션이 일어날 때 suspend fun을 실행해주는 Composable이다. @Composable fun LaunchedEffect( key1: Any?, block: suspend CoroutineScope.() -> Unit ) { .. } 리컴포지션은 Composable의 State가 바뀔 때마다 일어나므로, 만약 매번 리컴포지션이 일어날 때마다 이전 LaunchedEffect가 취소되고 다시 수행된다면 매우 비효율적일 것이다. 이를 해결하기 위해 LaunchedEffect는 key라 불리는 기준값을 두어 key가 바뀔 때만 LaunchedEffect의 suspend fun을 취소하고 재실행한다. 예를 들어 ..

Compose의 State 선언형 UI 프레임워크인 Compose는 Stateless함이 가장 큰 장점이다. UI에 대한 UI상태의 상호 의존성을 끊을 수 있다면 UI의 재사용성이 생기고, UI에 대한 테스트 또한 가능해지기 때문이다. Compose Stateless의 장점 1. UI 재사용성 2. UI 테스트 가능성 하지만 가끔 상태가 UI에 저장되어야만 하는 경우가 있다. 대표적으로 TextField가 있다. TextField는 어떤 텍스트가 입력되었는지를 저장해야 하기 때문에 상태를 가져야 한다. 아래에서 제목을 가지도록 Custom한 TextField인 TextFieldWithTitle을 보자. @Composable fun TextFieldWithTitle(title: String) { var t..

Button의 contentPadding 이해하기 Button의 contentPadding 프로퍼티는 Row영역에 padding을 준다. Button의 contentPadding에 들어가는 값은 PaddingValues 인터페이스를 상속받은 객체이다. contentPadding: PaddingValues = ButtonDefaults.ContentPadding contentPadding을 만드는 방법 우리는 Compose에서 제공해주는 총 3가지 함수를 이용해 PaddingValues를 상속받는 PaddingValuesImpl 객체를 만들어낼 수 있다. 상하좌우에 모두 같은 크기의 padding을 주는 방법 fun PaddingValues(all: Dp): PaddingValues = PaddingVal..