Compose TextField, OutlinedTextField

7월 30, 2024

TextField

TextField는 문자나 숫자를 사용자가 키보드를 통하여 직접 작성하도록 하여 입력 받을 수 있는 컴포넌트이다.

자유롭게 작성이 가능하지만 키보드의 입력 타입을 제한하여 의도 된 형태로만 입력 할 수 있도록 제한을 할 수도 있다.

그림1. 숫자 입력

선택지가 제한된 경우에는 라디오 버튼이나 체크 박스를 사용할 수 있지만

그렇지 않은 경우도 많기 때문에 TextField가 많이 사용된다.

TextField 구현

TextField를 구현하기에 앞서 우선 크게 나누면 TextField는 기본적인 TextField와 테두리가 있는 OutlinedTextField 2가지가 있다.

이 두 TextField는 디자인 차이일 뿐 동일한 파라미터를 사용하고 구현하기 때문에 사용하는 화면 레이아웃에 맞는 것을 사용하면 된다.

TextField

기본적인 TextField로 문자나 숫자를 입력 받을 수 있다.

colors 파라미터에서 TextFieldDefaults.colors로 TextField의 배경색, 지시자 색, 포커스 여부에 따른 색 등을 지정할 수 있는데

해당 예시에서는 unfocusedContainerColor를 Transparent로 지정하여서 TextField의 포커스가 없을 때는 색이 없지만, 선택하면 ContainerColor가 나타나는 것을 그림 1에서 볼 수 있다.

그림2. TextField

TextField(
        value = text, onValueChange = { setOnTextChange(it) },
        colors = TextFieldDefaults.colors(
//            focusedContainerColor = Color.Transparent,
            unfocusedContainerColor = Color.Transparent,
            focusedIndicatorColor = Color.Green,
            unfocusedIndicatorColor = Color.Blue
        ),
        textStyle = TextStyle(textAlign = TextAlign.End, fontSize = 20.sp)
    )

TextStyle 사용하여 문자의 정렬이나 폰트 사이즈를 지정할 수도 있다.

OutlinedTextField

OutlinedTextField는 TextField와 달리 outline 즉, 테두리가 있는 TextFiled 이다.

각 파라미터들을 살펴보면

label : "Name" 텍스트를 지정하였는데, 무엇을 입력하는지 표시할 수 있다.
keyboardOptions : 키보드 옵션을 지정(숫자 키보드가 나타남)
isError : 에러 판별
trailingIcon : 추가 아이콘
supportingText : 보조 텍스트

그림3. OutlinedTextField

OutlinedTextField(
    value = text, onValueChange = { setOnTextChange(it) },
    label = { Text(text = "Name") },
    keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number),
    isError = !text.isDigitsOnly(),
    trailingIcon = {
        if (!text.isDigitsOnly()) {
            Icon(imageVector = Icons.Filled.Info, contentDescription = "error",
                tint = MaterialTheme.colorScheme.error)
        }
    },
    supportingText = {
        if (!text.isDigitsOnly()) {
            Text(text = "Only Number!!", fontSize = 14.sp)
        }
    }
)

해당 예시에서는 keyboardOptions, isError, trailingIcon, supportingText를 사용하여서 숫자만을 입력 하도록 유도하고 있는데

우선 키보드 타입을 Number로 숫자를 입력하도록 하면서

isError로 숫자가 아닌 문자가 있을 경우 에러로 판별하여 trailingIcon, supportingText를 사용하여 수정해야 하는 점을 사용자에게 알려준다.

이런 식으로 원하는 형태로 입력 값을 제한할 수 있다.

마지막으로 TextFiled에서 사용한 파라미터들을 OutlinedTextFiled에서 사용이 가능하며

당연히 그 반대도 가능하므로 이것들을 활용하면 원하는 디자인의 TextField 구현해낼 수 있다.

참고

전체 코드 | Github

이 블로그 검색

Compose World