[Compose] 한국 이름 입력을 위한 TextField 구현 (+천지인)

2024. 11. 20. 00:24·📂 Android/Compose
반응형

한국에서 이름 입력 시, 천지인 키보드와 삼성 한손모아키 키보드의 호환성을 고려해야 합니다. 

특히, 두 키보드에서 미들닷(ㆍᆢ)의 표현이 다르기 때문에 이를 적절히 처리하는 정규표현식을 사용해야 합니다.

 

정규표현식

입력 필터링을 위한 정규표현식은 다음과 같습니다:

val regex = Regex("^[가-힣ㆍᆞᆢㄱ-ㅎㅏ-ㅣ]*$")

 

이 정규표현식은 한글 문자(가-힣), 미들닷(ㆍ, ᆢ), 그리고 자음(ㄱ-ㅎ)과 모음(ㅏ-ㅣ)을 포함하여 

오직 한국어만 입력받도록 설정합니다.

미들닷(ㆍ)이 두 개인 이유는 삼성의 한손모아키에서 사용되는 미들닷(ㆍ)이 천지인과 다르기 때문에

이를 모두 대응하기 위해 추가하였습니다.

 

예시 코드

아래는 Compose를 사용하여 한국어 입력을 처리하는 KoreanTextField 컴포저블 함수의 예시입니다.

@Composable
fun KoreanTextField(
    value: String,
    onValueChange: (String) -> Unit,
    modifier: Modifier = Modifier,
    textStyle: TextStyle = TextStyle.Default
) {
    val regex = Regex("^[가-힣ㆍᆞᆢㄱ-ㅎㅏ-ㅣ]*$")
    
    BasicTextField(
        value = value,
        onValueChange = { newValue ->
            if (newValue.isEmpty() || regex.matches(newValue)) {
                onValueChange(newValue)
            }
        },
        modifier = modifier
            .fillMaxWidth()
            .border(1.dp, Color.Gray)
            .padding(8.dp),
        textStyle = textStyle,
        singleLine = true,
        keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Text)
    )
}

 

 

사용 예시

아래는 KoreanTextField를 사용하는 화면의 예시입니다.

@Composable
fun Screen() {
    var text by remember { mutableStateOf("") }
    
    KoreanTextField(
        value = text,
        onValueChange = { text = it }
    )
}

 

 

정리

이 코드는 천지인 키보드와 삼성 한손모아키 키보드에서 한글 이름을 올바르게 입력받을 수 있도록 도와줍니다. 

정규표현식을 통해 입력값을 필터링하고, 사용자가 입력한 내용이 유효할 경우에만 상태를 업데이트합니다. 

반응형

'Android > Compose' 카테고리의 다른 글

[Compose] SMS Retriever API - SMS 인증번호 자동입력  (0) 2024.10.01
[Compose] SnackBar Duration Custom  (0) 2024.10.01
[Compose] Modifier Extension - DrawScrollbar  (0) 2024.09.25
[Compose] Modifier Extension - AddFocusCleaner  (0) 2024.09.25
[Compose] LazyColumn Drag And Drop Reordering  (0) 2024.09.09
'Android/Compose' 카테고리의 다른 글
  • [Compose] SMS Retriever API - SMS 인증번호 자동입력
  • [Compose] SnackBar Duration Custom
  • [Compose] Modifier Extension - DrawScrollbar
  • [Compose] Modifier Extension - AddFocusCleaner
Moondev
Moondev
공부 기록장
  • Moondev
    Moondev
    Moondev
  • 전체
    오늘
    어제
    • 분류 전체보기
      • Android
        • ViewSystem
        • Compose
      • Language
        • Kotlin
      • Review
        • 프로젝트 후기
        • Conference 후기
        • 우아한테크코스 후기
      • Etc
        • Git
        • Gradle
  • 링크

    • GitHub
  • 인기 글

  • 300x250
  • hELLO· Designed By정상우.v4.10.3
Moondev
[Compose] 한국 이름 입력을 위한 TextField 구현 (+천지인)
상단으로

티스토리툴바