Jetpack Compose를 사용한 Android 로그인 화면 [Part-1]

거의 모든 Android 애플리케이션에는 사용자를 인증하기 위해 로그인 또는 등록 프로세스가 있습니다. 이 기사에서는 jetpack Compose를 사용하여 Android 로그인 및 등록 화면 디자인을 디자인하는 방법을 시연합니다. 이것은 다양한 Android 구성 요소를 다루려고 시도하는 여러 게시물의 시리즈가 될 것입니다.

이 게시물을 공유하고 좋아요를 눌러 저를 격려해주세요. :)

이 스피너를 만드는 동안 사용된 구성 — ,
작성 버전 : 1.1.0-alpha06
코틀린 버전: 1.5.31
안드로이드 스튜디오 : 안드로이드 스튜디오 범블비 | 2021.1.1 패치 3

이 튜토리얼의 최종 출력 스크린샷은 아래 이미지와 같습니다.



1단계: "Empty Compose 활동"을 선택하여 Android Studio 프로젝트를 만듭니다.

2단계: 탐색에 필요하므로 앱 수준 Gradle 파일에 아래 종속성을 추가합니다.

implementation "androidx.navigation:navigation-compose:2.4.0-alpha04"

3단계: 새 파일 Routes.kt를 만들어 경로 정보를 저장합니다.

sealed class Routes(val route: String) {
    object Login : Routes("Login")
}

4단계: 새 패키지 만들기 화면

5단계: screen 패키지 screen/ScreenMain.kt 안에 새 파일을 만들고 아래 코드를 붙여넣습니다.

@Composable
fun ScreenMain(){
    val navController = rememberNavController()

    NavHost(navController = navController, startDestination = Routes.Login.route) {

        composable(Routes.Login.route) {
            LoginPage(navController = navController)
        }
    }
}

6단계: 새 파일 screen/Login.kt를 만들고 아래 코드를 붙여넣습니다.

@Composable
fun LoginPage(navController: NavHostController) {
    Box(modifier = Modifier.fillMaxSize()) {
        ClickableText(
            text = AnnotatedString("Sign up here"),
            modifier = Modifier
                .align(Alignment.BottomCenter)
                .padding(20.dp),
            onClick = { },
            style = TextStyle(
                fontSize = 14.sp,
                fontFamily = FontFamily.Default,
                textDecoration = TextDecoration.Underline,
                color = Purple700
            )
        )
    }
    Column(
        modifier = Modifier.padding(20.dp),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {

        val username = remember { mutableStateOf(TextFieldValue()) }
        val password = remember { mutableStateOf(TextFieldValue()) }

        Text(text = "Login", style = TextStyle(fontSize = 40.sp, fontFamily = FontFamily.Cursive))

        Spacer(modifier = Modifier.height(20.dp))
        TextField(
            label = { Text(text = "Username") },
            value = username.value,
            onValueChange = { username.value = it })

        Spacer(modifier = Modifier.height(20.dp))
        TextField(
            label = { Text(text = "Password") },
            value = password.value,
            visualTransformation = PasswordVisualTransformation(),
            keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Password),
            onValueChange = { password.value = it })

        Spacer(modifier = Modifier.height(20.dp))
        Box(modifier = Modifier.padding(40.dp, 0.dp, 40.dp, 0.dp)) {
            Button(
                onClick = { },
                shape = RoundedCornerShape(50.dp),
                modifier = Modifier
                    .fillMaxWidth()
                    .height(50.dp)
            ) {
                Text(text = "Login")
            }
        }

        Spacer(modifier = Modifier.height(20.dp))
        ClickableText(
            text = AnnotatedString("Forgot password?"),
            onClick = { },
            style = TextStyle(
                fontSize = 14.sp,
                fontFamily = FontFamily.Default
            )
        )
    }
}

7단계: MainActivity.kt 내부에 아래 코드 스니펫 추가

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            JetpackComposeDemoTheme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colors.background
                ) {
                    ScreenMain()
                }
            }
        }
    }
}

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    JetpackComposeDemoTheme {
        ScreenMain()
    }
}

이제 jetpack Compose를 사용하여 로그인 UI가 완료되었습니다.

next part [Part-2]에서는 더 많은 화면과 해당 화면에 대한 탐색을 추가합니다.

GitHub에서 완전한 코드를 찾으세요. 팔로우하는 것을 잊지 마세요 😊

팔로우하여 업데이트된 게시물을 받고 좋아요를 눌러 동기를 부여하세요.
감사합니다 😊🙏

이 포스팅이 도움이 되셨다면 아래 박수👏 버튼을 여러번 눌러 응원해주세요!