[Compose Focus] 1. FocusRequester을 활용해 Focus 바꾸기 - Android Compose Focus Change

FocusRequester란?

FocusRequester란 컴포즈 상에서 컴포저블(View)의 Focus를 바꿔주는 객체이다. 예를 들어 Button이 눌렸을 때 포커스가 TextField로 가야하는 경우 사용된다.

 

FocusRequester 사용법

1. FocusRequester을 Composable 내의 remember 블록에서 선언한다.

2. Modifier.focusRequester() 함수를 이용해 위에서 만든 focusRequester을 포커스를 주기 원하는 곳에 붙인다.

3. 특정 이벤트가 발생했을 때 포커스 주기를 원하면 requestFocus()을 붙인다.

@Composable
fun KotlinWorldFocusRequester() {
    ..
    val focusRequester = remember { FocusRequester() } // 1. FocusRequester을 Composable 내의 remember 블록에서 선언한다.

    OutlinedTextField(
        // 2. Modifier.focusRequester() 함수를 이용해 위에서 만든 focusRequester을 포커스를 주기 원하는 곳에 붙인다.
        modifier = Modifier
            .focusRequester(focusRequester),
        ..
    )
    ..
    Button(onClick = { focusRequester.requestFocus() }) { // 3. 특정 이벤트가 발생했을 때 포커스 주기를 원하면 requestFocus()을 붙인다.
        Text(text = "텍스트 필드에 포커스 주기")
    }
    ..
}

 

FocusRequester 예제

위를 응용해서 간단한 예제를 만들어보자. Column에 TextField와 Button이 있고 Button을 클릭하면 TextField에 Focus가 만들어지는 예제이다.

@Composable
fun KotlinWorldFocusRequester() {
    var text by remember { mutableStateOf("") }
    val focusRequester = remember { FocusRequester() }

    Column(modifier = Modifier.fillMaxSize()) {
        OutlinedTextField(
            modifier = Modifier
                .focusRequester(focusRequester),
            value = text,
            onValueChange = { text = it }
        )
        Button(onClick = { focusRequester.requestFocus() }) {
            Text(text = "텍스트 필드에 포커스 주기")
        }
    }
}

그림1. 텍스트 필드에 포커스 주기

여기서 버튼의 onClick 이벤트에 focusRequester.requestFocus()가 붙어있으므로 버튼을 누르면 텍스트 필드에 포커스가 생겨 키보드가 올라온다.

그림2. 텍스트 필드에 포커스 주기