[Android][compose] BasicTextField 이용하기

오늘은 BasicTextField를 이용하는 법에 대해 알아보자.

BasicTextField란?

Compose에서는 사용자의 키보드 입력을 받는 Composable로 TextField가 있다.

그렇다면 BasicTextField와 TextField의 차이점은 무엇일까?

BasicTextField는 text를 보여주고 사용자의 입력을 처리하기 위한 뼈대이다.

TextField는 BasicTextField의 발전된 형태로,
Material Design guideline을 따른다.
따라서 공식 문서에서는 TextField를 사용하는 것을 권장한다.

왜 BasicTextField를 사용하나?

그렇다면 왜 BasicTextField를 사용할까?

나같은 경우에는 이번 Dotoring 프로젝트를 진행하며, 디자이너님과 함께 협업해가고 있다.
Dotoring의 경우 Material Design guideline을 따르지 않고,
앱의 독자적인 디자인을 구축해나가고 있다.

TextField의 경우 내부 Text와 그를 감싸는 TextField 사이의 간격인 padding이 미리 정해져있어,
개발자의 마음대로 그 값을 조정할 수 없다.

하지만 BasicTextField를 이용하면 Text와 TextField사이의 padding값을 조절할 수 있게 된다.

BasicTextField의 매개 변수

@Composable
fun BasicTextField(
    value: TextFieldValue,
    onValueChange: (TextFieldValue) -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    readOnly: Boolean = false,
    textStyle: TextStyle = TextStyle.Default,
    keyboardOptions: KeyboardOptions = KeyboardOptions.Default,
    keyboardActions: KeyboardActions = KeyboardActions.Default,
    singleLine: Boolean = false,
    maxLines: Int = if (singleLine) 1 else Int.MAX_VALUE,
    minLines: Int = 1,
    visualTransformation: VisualTransformation = VisualTransformation.None,
    onTextLayout: (TextLayoutResult) -> Unit = {},
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    cursorBrush: Brush = SolidColor(Color.Black),
    decorationBox: @Composable (@Composable innerTextField: () -> Unit) -> Unit = @Composable { innerTextField -> innerTextField() }
): Unit

BasicTextField는 위와 같은 매개변수들을 통해서 다양한 옵션을 이용할 수 있다.

다만 TextField와는 달리 placeholder(hint)에 대한 decoration을 따로 적용하지 않는다.
따라서 이러한 decoration 값을 다음과 같이 자체적으로 전달해주어야 한다.

즉 TextField의 Text 혹은 placeholder의 padding값을 원하는 값으로 설정할 수 있다!

BasicTextField(
        value = value,
        onValueChange = onValueChange,
        modifier = modifier
            .background(
                color = colorResource(id = R.color.white),
                shape = TextFieldDefaults.TextFieldShape
            )
            .indicatorLine(
                enabled = enabled,
                isError = false,
                interactionSource = interactionSource,
                colors = colors
            )
            .size(width = 230.dp, height = 25.dp),
        visualTransformation = VisualTransformation.None,
        // internal implementation of the BasicTextField will dispatch focus events
        interactionSource = interactionSource,
        enabled = enabled,
        singleLine = singleLine
    ) {
        TextFieldDefaults.TextFieldDecorationBox(
            value = value,
            visualTransformation = VisualTransformation.None,
            innerTextField = it,
            singleLine = singleLine,
            enabled = enabled,
            // same interaction source as the one passed to BasicTextField to read focus state
            // for text field styling
            placeholder = {Text(
                text = "닉네임",
                fontSize = 13.sp) },
            colors = colors,
            interactionSource = interactionSource,
            // keep vertical paddings but change the horizontal
            contentPadding = TextFieldDefaults.textFieldWithoutLabelPadding(
                start = 2.dp, top = 1.dp, end = 1.dp, bottom = 3.dp
            )
        )
    }

Compose의 문법이 아직 다루기 어렵지만 익숙해지면 훨씬 편리할 것 같다!