[Android] TextField 사용법 (Jetpack Compose)

TextField 기본 사용법

• TextField를 사용하려면 mutableStateOf를 사용하여 입력 값을 관리해야 한다.

 

기본 예제

@Composable
fun SimpleTextField() {
    var text by remember { mutableStateOf("") }

    TextField(
        value = text,
        onValueChange = { text = it },
        label = { Text("입력하세요") }
    )
}

• value: 현재 입력된 텍스트 값
• onValueChange: 사용자가 입력할 때마다 호출되는 콜백

 

OutlinedTextField 사용 (테두리 있는 입력창)

@Composable
fun OutlinedTextFieldExample() {
    var text by remember { mutableStateOf("") }

    OutlinedTextField(
        value = text,
        onValueChange = { text = it },
        label = { Text("이름을 입력하세요") },
        modifier = Modifier.fillMaxWidth()
    )
}

• OutlinedTextField: TextField와 기능은 같지만 테두리가 있음
• modifier = Modifier.fillMaxWidth(): 가로 전체를 차지하도록 설정

 

TextField에 아이콘 추가하기

@Composable
fun TextFieldWithIcon() {
    var text by remember { mutableStateOf("") }

    TextField(
        value = text,
        onValueChange = { text = it },
        label = { Text("검색") },
        leadingIcon = { Icon(Icons.Default.Search, contentDescription = "검색 아이콘") },
        trailingIcon = { 
            if (text.isNotEmpty()) {
                IconButton(onClick = { text = "" }) {
                    Icon(Icons.Default.Close, contentDescription = "삭제")
                }
            }
        },
        modifier = Modifier.fillMaxWidth()
    )
}

• leadingIcon: 입력창 왼쪽에 아이콘 추가
• trailingIcon: 입력창 오른쪽에 아이콘 추가 (여기서는 텍스트가 있을 때만 X 버튼 표시)

 

비밀번호 입력창 (PasswordTextField)

@Composable
fun PasswordTextField() {
    var password by remember { mutableStateOf("") }
    var isPasswordVisible by remember { mutableStateOf(false) }

    TextField(
        value = password,
        onValueChange = { password = it },
        label = { Text("비밀번호") },
        visualTransformation = if (isPasswordVisible) VisualTransformation.None else PasswordVisualTransformation(),
        trailingIcon = {
            val image = if (isPasswordVisible) Icons.Default.Visibility else Icons.Default.VisibilityOff
            IconButton(onClick = { isPasswordVisible = !isPasswordVisible }) {
                Icon(image, contentDescription = "비밀번호 보이기/숨기기")
            }
        },
        modifier = Modifier.fillMaxWidth()
    )
}

• PasswordVisualTransformation(): 입력된 내용을 ●로 표시
• isPasswordVisible을 통해 비밀번호 가리기/보이기 설정

 

 

TextField에 최대 글자 수 제한하기

@Composable
fun LimitedTextField() {
    var text by remember { mutableStateOf("") }
    val maxLength = 20

    Column {
        TextField(
            value = text,
            onValueChange = { if (it.length <= maxLength) text = it },
            label = { Text("메시지 입력") },
            modifier = Modifier.fillMaxWidth()
        )
        Text(text = "${text.length} / $maxLength", modifier = Modifier.align(Alignment.End))
    }
}

• if (it.length <= maxLength) text = it: 글자 수 제한 적용
• 현재 글자 수와 최대 글자 수를 표시

 

TextField에 포커스 적용 및 키보드 조작

@Composable
fun FocusTextField() {
    var text by remember { mutableStateOf("") }
    val focusRequester = remember { FocusRequester() }
    val keyboardController = LocalSoftwareKeyboardController.current

    Column {
        TextField(
            value = text,
            onValueChange = { text = it },
            label = { Text("포커스를 적용해보세요") },
            modifier = Modifier
                .fillMaxWidth()
                .focusRequester(focusRequester)
                .onFocusChanged { if (it.isFocused) println("포커스 됨") }
        )
        Button(onClick = { focusRequester.requestFocus() }) {
            Text("포커스 주기")
        }
        Button(onClick = { keyboardController?.hide() }) {
            Text("키보드 숨기기")
        }
    }
}

• focusRequester.requestFocus(): 버튼 클릭 시 TextField에 포커스 적용
• keyboardController?.hide(): 키보드 숨기기

 

TextField 커스텀 스타일 적용

@Composable
fun StyledTextField() {
    var text by remember { mutableStateOf("") }

    OutlinedTextField(
        value = text,
        onValueChange = { text = it },
        label = { Text("커스텀 스타일") },
        colors = TextFieldDefaults.outlinedTextFieldColors(
            focusedBorderColor = Color.Blue,
            unfocusedBorderColor = Color.Gray,
            cursorColor = Color.Red,
            textColor = Color.Black
        ),
        modifier = Modifier.fillMaxWidth()
    )
}

• focusedBorderColor: 포커스 상태에서 테두리 색상
• unfocusedBorderColor: 포커스가 없을 때 테두리 색상\
• cursorColor: 커서 색상