Jetpack Compose 국가 코드 선택기

Jetpack Compose로 애플리케이션을 개발하는 것이 정말 즐거웠습니다. Country Code Selector 패키지를 찾고 있었습니다. 찾을 수 없을 때 직접 준비하기로 결정했습니다. 향후 프로젝트에 필요할 수 있습니다. 그래서 여러분과 공유하고 싶었습니다.

링크 : Github

하이라이트
  • 국가 번호 힌트
  • 전화 번호 visualTransformation(자동 번호 서식 지정)
  • 자동 국가 인식(SIM 카드가 삽입된 경우 SIM 카드로 감지)
  • TextField 포함
  • 커스터마이징 가능
  • 언어 번역 추가
  • 번호 인증 추가됨

  • *예시 : *

    @Composable
       fun SelectCountryWithCountryCode() {
            val getDefaultLangCode = getDefaultLangCode() // Auto detect language
            val getDefaultPhoneCode = getDefaultPhoneCode() // Auto detect phone code : +90
            var phoneCode by rememberSaveable { mutableStateOf(getDefaultPhoneCode) }
            val phoneNumber = rememberSaveable { mutableStateOf("") }
            var defaultLang by rememberSaveable { mutableStateOf(getDefaultLangCode) }
            var verifyText by remember { mutableStateOf("") }
            var isValidPhone by remember { mutableStateOf(true) }
            Column(
                modifier = Modifier.padding(16.dp)
            ) {
                Text(
                    text = verifyText,
                    fontWeight = FontWeight.Bold,
                    modifier = Modifier
                        .fillMaxWidth()
                        .wrapContentSize(Alignment.Center)
                )
                TogiCountryCodePicker(
                    pickedCountry = {
                        phoneCode = it.countryPhoneCode
                        defaultLang = it.countryCode
                    },
                    defaultCountry = getLibCountries().single { it.countryCode == defaultLang },
                    focusedBorderColor = MaterialTheme.colors.primary,
                    unfocusedBorderColor = MaterialTheme.colors.primary,
                    dialogAppBarTextColor = Color.Black,
                    dialogAppBarColor = Color.White,
                    error = isValidPhone,
                    text = phoneNumber.value,
                    onValueChange = { phoneNumber.value = it }
                )
    
                val fullPhoneNumber = "$phoneCode${phoneNumber.value}"
                val checkPhoneNumber = checkPhoneNumber(
                    phone = phoneNumber.value,
                    fullPhoneNumber = fullPhoneNumber,
                    countryCode = defaultLang
                )
                Button(
                    onClick = {
                        verifyText = if (checkPhoneNumber) {
                            isValidPhone = true
                            "Phone Number Correct"
                        } else {
                            isValidPhone = false
                            "Phone Number is Wrong"
    
                        }
                    },
                    modifier = Modifier.fillMaxWidth()
                        .padding(16.dp)
                        .height(60.dp)
                ) {
                    Text(text = "Phone Verify")
                }
            }
          }
        }
    






    좋은 웹페이지 즐겨찾기