[Android Compose] TextField Focus 주기

How to request focus on TextField in Jetpack Compose

 

 

---

컴포즈에서는 FocusRequester를 통해 TextField에 포커스를 줄 수 있습니다.

Modifier.focusRequest()에다가 FocusRequest 변수를 생성해 넣어줌으로써

해당 위젯에 포커스를 이래라 저래라 하는 요청을 보낼 수 있습니다.

val focusRequester = remember { FocusRequester() }
var value by remember { mutableStateOf("hello") }

TextField(
    value = value,
    onValueChange = {
         value = it
    },
    modifier = Modifier.focusRequester(focusRequester)
)

focusRequester 변수를 remember로 선언해야 Recomposition을 타면서 제 기능을 할 수 있어요.

 

 

 

FocusRequester를 통해 할 수 있는 기능은 3가지 입니다.

 

Capture Focus

fun captureFocus(): Boolean

포커스를 꽉 잡고 있게 하는 함수입니다.

포커스가 capture되고 있다면, 포커스 해제 및 이동을 할 수 없습니다.

 

Free Focus

fun freeFocus(): Boolean

포커스가 가 있으면, 포커스 해제가 가능케하는 함수입니다.

 

 

두 함수의 예시를 보여드리겠습니다.

입력값의 길이가 5 이상일 때는 포커스 이동 불가, 미만일 때는 포커스 이동 가능의 경우입니다.

val focusRequester1 = remember { FocusRequester() }
val focusRequester2 = remember { FocusRequester() }
var value1 by remember { mutableStateOf("apple") }
var value2 by remember { mutableStateOf("banana") }
    
TextField(
   value = value1,
   onValueChange = {
        value1 = it.apply { 
            if (length > 5) focusRequester1.captureFocus() else focusRequester1.freeFocus()
        }
   },
   modifier = Modifier.focusRequester(focusRequester1)
)

TextField(
   value = value2,
   onValueChange = {
        value2 = it
   },
   modifier = Modifier.focusRequester(focusRequester2)
)

 

위 코드는 padding과 같은 부수 코드는 제외하였습니다.

첫번째 TextField의 입력값의 길이가 5 이상이 될 때,

두번째 TextField로 포커스를 이동시킬 수 없는 것을 확인할 수 있습니다.

 

 

Request Focus

fun requestFocus(): Unit

포커스를 주는 함수입니다.

해당 함수를 호출하면 Modifier.focusRequester로 지정한 곳에 포커스가 잡히게 됩니다.

 

 

 

FocusRequester를 하나만 생성해서 두 곳에 두면 안되나요?

제대로 동작하지 않습니다.

val focusRequester = remember { FocusRequester() }
var input1 by remember { mutableStateOf("1") }
var input2 by remember { mutableStateOf("2") }

LaunchedEffect(true) {
   focusRequester.requestFocus()
}

Box(
   modifier = Modifier.fillMaxSize(),
   contentAlignment = Alignment.Center
) {
  Column {
     TextField(
         value = input1,
         onValueChange = { input1 = it },
         modifier = Modifier.focusRequester(focusRequester)
     )

     TextField(
         value = input2,
         onValueChange = { input2 = it },
         modifier = Modifier.focusRequester(focusRequester)
     )
  }
}

위의 코드를 빌드해보면 런타임 에러는 발생하지 않지만,

focusRequester에게 첫번째 혹은 두번째 텍스트필드에 포커스를 주라고 요청할 수가 없게 됩니다.

구분할 수가 없으니까요..

 

실제 동작

 

FocusRequester를 2개 넣어놓고, 버튼 눌렀을 때 다음 focusRequester.requestFocus를 요청하면 안되나요?

val focusRequester1 = remember { FocusRequester() }
    val focusRequester2 = remember { FocusRequester() }
    var input1 by remember { mutableStateOf("1") }
    var input2 by remember { mutableStateOf("2") }

    LaunchedEffect(true) {
        focusRequester1.requestFocus()
    }

    Box(
        modifier = Modifier.fillMaxSize().padding(top = 20.dp),
        contentAlignment = Alignment.TopCenter
    ) {
        Column {
            TextField(
                value = input1,
                onValueChange = { input1 = it },
                modifier = Modifier.focusRequester(focusRequester1)
            )

            TextField(
                value = input2,
                onValueChange = { input2 = it },
                modifier = Modifier.focusRequester(focusRequester2)
            )

            Button(
                onClick = {
                    focusRequester2.requestFocus()
                },
                modifier = Modifier.padding(top = 10.dp)
            ){
                Text("focus 이동!")
            }
        }
    }

위와 같은 코드면 동작을 하긴 합니다.

 

다른 프로젝트에서는 안 됐었는데,,,

올바른 방법인지는 모르겠네요,, 😅

본문 아래에 쓰여있는 focusManager를 활용하는 방법도 있습니다.

---

여러가지 케이스별로 포커스를 주는 방법을 적어보도록 하겠습니다.

 

1. 화면 진입시 포커스 인 -> 키보드 올라오게 하기

val focusRequester = remember { FocusRequester() }
var input by remember { mutableStateOf("") }

LaunchedEffect(focusRequester) {
	focusRequester.requestFocus()
}

BasicTextField(
	value = input,
	onValueChange = { input = it },
	modifier = Modifier.focusRequester(focusRequester)
)

1️⃣ 포커스를 주는 변수 (FocusRequester)를 생성해주고

2️⃣ 포커스가 필요한 TextField 속 Modifier 안에 변수를 넣어주고

3️⃣ 화면 진입시 함수가 호출되도록 LaunchedEffect를 통해 

requestFocus 함수를 넣어주면됩니다

 

LauchedEffect 파라미터안에 true 가 들어가도 무방합니다.

화면 생성시 한 번만 호출되면 되니까요.

 

 

하지만 LaunchedEffect 밖에서 requestFocus를 하면 아래와 같은 오류가 발생하게 됩니다.

Caused by: java.lang.IllegalStateException: 
       FocusRequester is not initialized. Here are some possible fixes:
    
       1. Remember the FocusRequester: val focusRequester = remember { FocusRequester() }
       2. Did you forget to add a Modifier.focusRequester() ?
       3. Are you attempting to request focus during composition? Focus requests should be made in
       response to some event. Eg Modifier.clickable { focusRequester.requestFocus() }

해당 예시는 3번의 이유에서 발생하는데요,

아직 TextField가 그려지기 전 (during compostion)이라

Modifier.focusRequester()가 들어오지 않았기 때문입니다.

---

2. 값이 있는 텍스트 필드에 포커스 인 -> 커서 끝으로 보내기

TextField에 값을 넣어주면서 포커스를 주면,

Cursor가 맨 마지막으로 가지 않는 문제가 발생합니다.

 

 

컴포즈에는 TextFieldValue라는 함수가 있어 TextField에서 활용할 수 있습니다.

이 TextFieldValue에는 text와 selection, compostion 세 가지 항목이 존재합니다.

@Immutable
class TextFieldValue constructor(
    text: String = "",
    selection: TextRange = TextRange.Zero,
    composition: TextRange? = null
)

 

 그리고 그 selection은 커서를 다룰 수 있어요.

 

var text by remember { mutableStateOf("hello") }
var input by remember {
    mutableStateOf(TextFieldValue(
        text = text,
        selection = TextRange(text.length))
    )
}
val focusRequester = remember { FocusRequester() }

LaunchedEffect(true) {
   focusRequester.requestFocus()
}

TextField(
    value = input,
    onValueChange = { input = it },
    modifier = Modifier.focusRequester(focusRequester)
)

 

이 selection의 TextRange를 value의 길이 값으로 설정하면 커서를 끝으로 보낼 수 있습니다.

 

 

+

별도 text 변수 없이 selection을 TextRange(Int.MAX_VALUE)로 지정해줘서

아싸리 맨 끝으로 보내주는 방법도 있다고 참고하시면 좋을 것 같습니다.

 

---

3. TextField가 2개 이상있을 때,

화면 진입 시 첫번재 TextField에 포커스 인 -> 이벤트시 다음 TextField로 포커스 옮기기

 

현재 보이는 화면의 포커스를 제어하는 인터페이스가 있습니다.

FocusManager인데요, Focus manager가 할 수 있는 기능은 크게 2가지 입니다.

 

clear focus

fun clearFocus(force: Boolean! = false): Unit

화면에 잡혀있는 포커스를 해제시킵니다.

핸드폰 번호 입력하면 바로 키보드 내려가게 할 때 활용할 수 있습니다.

 

val focusManager : FocusManager = LocalFocusManager.current
    var input by remember { mutableStateOf("") }

    Box(
        Modifier.fillMaxSize(),
        contentAlignment = Alignment.Center
    ) {
        TextField(
            value = input,
            onValueChange = {
                input = it.apply {
                    if (length >= 11) focusManager.clearFocus()
                }
            }
        )
    }

 

 

move focus

fun moveFocus(focusDirection: FocusDirection!): Boolean

포커스를 다른 곳(Down, Up, Left, Right 방향)으로 이동시켜 줍니다.

회원가입시 아이디를 입력하면 비밀번호를 입력하도록 이동시킬 때 활용할 수 있습니다.

 

 val focusManager : FocusManager = LocalFocusManager.current
    var input1 by remember { mutableStateOf("1") }
    var input2 by remember { mutableStateOf("2") }

    Box(
        Modifier
            .fillMaxSize()
            .padding(top = 20.dp),
        contentAlignment = Alignment.TopCenter
    ) {
        Column {
            TextField(
                value = input1,
                onValueChange = {
                    input1 = it
                }
            )

            TextField(
                value = input2,
                onValueChange = {
                    input2 = it
                }
            )

            Button(
                onClick = { focusManager.moveFocus(FocusDirection.Down) },
                modifier = Modifier.padding(top = 10.dp)
            ) {
                Text(
                    "Focus 이동!"
                )
            }
        }

위 코드는 포커스를 아래로 이동시키는 예시입니다.

FocusDirection.Down을 이용하였습니다.

 

 

 

그러면 move focus를 이용하여

화면 진입 시 첫번재 TextField에 포커스 인 -> 이벤트시 다음 TextField로 포커스 옮기기 의 상황을 보겠습니다.

val firstFocus = remember { FocusRequester() }
    val focusManager = LocalFocusManager.current
    var isClicked by remember { mutableStateOf(false) }

    LaunchedEffect(firstFocus) {
        firstFocus.requestFocus()
    }

    LaunchedEffect(isClicked) {
        if (isClicked) {
            focusManager.moveFocus(FocusDirection.Down)
            isClicked = false
        }
    }

        var inputId by remember { mutableStateOf("") }
        var inputPw by remember { mutableStateOf("") }

        Column {
            TextField(
                value = inputId,
                onValueChange = { inputId = it },
                modifier = Modifier.focusRequester(firstFocus)
            )

            Button(
                onClick = {
                    isClicked = true
                }
            ) {
                Text(
                    text = "Focus 이동!",
                )
            }

            TextField(
                value = inputPw,
                onValueChange = { inputPw = it },
            )
        }

이번에는 버튼에 state를 줘서 해당 버튼이 클릭시 LaunchedEffect가 동작하도록 하였습니다.

그리고 그와 함께 focus manager로 포커스가 아래로 이동하도록 하면 

두번째 TextField로 포커스가 이동되는 걸 확인할 수 있습니다.

 

 

참고로 TextField외에도 포커스 지정이 가능합니다.

 modifier = Modifier.focusable(true)

버튼에 focusable(true)를 넣어주면 

버튼을 클릭해도 아래의 TextField로 포커스가 이동하지 않습니다.

 

반대로 포커스가 필요없는 컴포넌트에 false를 넣으면 

move focus할 때 제외하고 넘어갈 수 있습니다.

 

 

 

---

 

참고

https://developer.android.com/reference/kotlin/androidx/compose/ui/focus/package-summary

androidx.compose.ui.focus  |  Android Developers