[TIL-230706] Jetpack Compose - Focusing

안녕하세요

이번 포스팅에는 화면이 시작하자마자 TextField에 Cursor가 Focusing 되게 처리하는 코드를 구현해보겠습니다.

 

---

focusRequester

FocusRequester는 특정 시점에 Focus를 변경 요청을 하는데 사용됩니다.

 

예제

val focusRequester = remember { FocusRequester() }

...

BasicTextField(
	modifier = Modifier
    	.fillMaxWidth().focusRequester(focusRequester)
)

...

LaunchedEffect(Unit) {
	focusRequester.requestFocus()
}

먼저 FocusRequester를 이용하여 remeber 블록으로 변수를 생성합니다.

그리고 Focusing을 할 Component에 Modifier.focusRequester(focusRequester)를 선언합니다.
마지막으로, 특정 시점에 focusRequester.requestFocus()를 호출합니다.

저는 화면이 시작할 때, focusing 변화를 주기위해 LaunchedEffect을 활용하여 focusRequester.requestFocus() 를 호출합니다.

 

결과

 

적용 전	적용 후

 

 

적용 전은 지도 상의 SearchBar 클릭 시 Cursor 가 잡히지 않아, 키보드가 올라오지 않지만,
적용 후에는 지도 상의 SearchBar 클릭 시 Focusing이 설정되어 키보드가 올라오게 된다.

---

오늘은 Jetpack Compose의 Component Focusing에 대해 포스팅해보았습니다.
잘못된 내용이 있다면 댓글 부탁드리고, 내용이 좋았다면 공감, 구독 부탁드려요