Jetpack [대왕놀] EditText in Compose (TextField)

Android View 시스템의 EditText 는 Compose 의 'TextField' 에 매칭된다.

#

TextField 의 function signature 는 아래와 같다.

fun TextField(
    value: TextFieldValue,
    onValueChange: (TextFieldValue) -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    readOnly: Boolean = false,
    textStyle: TextStyle = LocalTextStyle.current,
    label: @Composable (() -> Unit)? = null,
    placeholder: @Composable (() -> Unit)? = null,
    leadingIcon: @Composable (() -> Unit)? = null,
    trailingIcon: @Composable (() -> Unit)? = null,
    isError: Boolean = false,
    visualTransformation: VisualTransformation = VisualTransformation.None,
    keyboardOptions: KeyboardOptions = KeyboardOptions.Default,
    keyboardActions: KeyboardActions = KeyboardActions(),
    singleLine: Boolean = false,
    maxLines: Int = Int.MAX_VALUE,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    shape: Shape =
        MaterialTheme.shapes.small.copy(bottomEnd = ZeroCornerSize, bottomStart = ZeroCornerSize),
    colors: TextFieldColors = TextFieldDefaults.textFieldColors()
)

#

TextField 의 일반적 사용 예시는 아래와 같다.

var text by remember { mutableStateOf(TextFieldValue("")) }
TextField(
	value = text,
	onValueChange = { newText -> text = newText },
	modifier = Modifier.fillMaxWidth(),
	placeholder = { Text(stringResource(R.string.hint)) },
	singleLine = true,
)

EditText  에 비해 해줘야 하는 일이 많은데, value 영역에 TextFieldValue 를 넣어줘야 하는 것 때문이다.

그냥 TextField 만 그려놓으면, 키보드 입력을 해도 그 값이 변경되지 않는다.

#

TextField 에 hint text 를 설정하려면 placeHolder 를 사용하면 된다.

단, placeHolder 는 string 을 받는 것이 아니라 composable 을 받기에.. 좀 더 자유롭게 hint 를 구성할 수 있다.

TextField(
	...
	placeholder = { Text(stringResource(R.string.hint)) },
)

#

TextField 에 single line 을 지정하려면 singleLine 을 사용하면 된다.

TextField(
	...
	singleLine = true,
)

#

TextField 에 imeOption 을 지정하려면 keyboardOptions 의 keyboardType 을 사용한다.

TextField(
	...
	keyboardOptions = KeyboardOptiopns(keyboardType = KeyboardType.Number),
)

KeyboardType 에는 Text, Ascii, Number, Phone, Uri, Email, Password, NumberPassword 가 있다.

#

TextField 에 imeAction 을 지정하려면 keyboardOptions 의 imeAction 과 keyboardActions 을 사용한다.

여기서는 focus 를 관리하는 방법도 함께 본다.

val focusManager = FocusManager.current
TextField(
	...
	keyboardOptions = KeyboardOptiopns(
    		keyboardType = KeyboardType.Number, 
        	imeAction = ImeAction.Next,
    ),
    keyboardActions = KeyboardActions(
    	onNext = { focusManager.moveFocus(FocusDirection.Down) },
        onDone = { focusManager.clearFocus() },
    )
)

ImeAction 의 const 로는 Default, None, Go, Search, Send, Previous, Next, Done 이 있다.