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

이 부분에서는 더 많은 화면을 추가하고 몇 가지 공통 구성 요소를 만들어 앱 전체에서 재사용할 것입니다.

이 스피너를 만드는 동안 사용된 구성 — ,

작성 버전: 1.1.0-alpha06

코틀린 버전: 1.5.31

안드로이드 스튜디오 : 안드로이드 스튜디오 범블비 | 2021.1.1 패치 3

1단계: 먼저 공통 TopAppBar 구성 요소를 생성해 보겠습니다. 이 패키지 안에 component\라는 새 패키지를 만듭니다. 새 파일을 만들고 이름을 component\CustomTopAppBar.kt로 지정합니다. 이 파일의 코드 스니펫 아래에 붙여넣습니다.

@Composable
fun CustomTopAppBar(navController: NavHostController, title: String, showBackIcon : Boolean) {
    TopAppBar(
        title = {
            Text(text = title)
        },
        navigationIcon = if (showBackIcon && navController.previousBackStackEntry != null) {
            {
                IconButton(onClick = { navController.navigateUp() }) {
                    Icon(
                        imageVector = Icons.Filled.ArrowBack,
                        contentDescription = "Back"
                    )
                }
            }
        } else {
            null
        }
    )
}

2단계: 새 파일 screen\SignUp.kt를 만들고 아래 코드를 추가합니다.

@Composable
fun SignUp(navController: NavHostController) {
    Box(modifier = Modifier.fillMaxSize()) {
        ScaffoldWithTopBar(navController)
    }
}

@Composable
fun ScaffoldWithTopBar(navController: NavHostController) {
    Scaffold(
        topBar = {
            CustomTopAppBar(navController, "Signup", true)
        }, content = {
            Column(
                modifier = Modifier
                    .fillMaxSize(),
                verticalArrangement = Arrangement.Center,
                horizontalAlignment = Alignment.CenterHorizontally
            ) {
                Text(
                    text = "Sign up",
                    fontSize = 30.sp,
                    color = Color.Black
                )
            }

        })
}

3단계: 새 파일 screen\ForgotPassword.kt를 만들고 아래 코드를 추가합니다.

@Composable
fun ForgotPassword(navController: NavHostController) {
    Box(modifier = Modifier.fillMaxSize()) {
        ScaffoldWithTopBarForgotPass(navController)
    }
}

@Composable
fun ScaffoldWithTopBarForgotPass(navController: NavHostController) {
    Scaffold(
        topBar = {
            CustomTopAppBar(navController, "Forgot Password", true)
        }, content = {
            Column(
                modifier = Modifier
                    .fillMaxSize(),
                verticalArrangement = Arrangement.Center,
                horizontalAlignment = Alignment.CenterHorizontally
            ) {
                Text(
                    text = "Forgot Password",
                    fontSize = 30.sp,
                    color = Color.Black
                )
            }
        })
}

4단계: 이제 방금 만든 위 화면에 대한 탐색을 추가합니다. 이를 수행하려면 아래 코드로 ScreenMain.kt를 업데이트하십시오.

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

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

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

        composable(Routes.SignUp.route) {
            SignUp(navController = navController)
        }

        composable(Routes.ForgotPassword.route) { navBackStack ->
            ForgotPassword(navController = navController)
        }
    }
}

5단계: 로그인 화면에서 가입 화면으로 이동하려면 Login.kt의 가입 텍스트 onClick에 아래 코드를 추가합니다.

ClickableText(
    text = AnnotatedString("Sign up here"),
    modifier = Modifier
        .align(Alignment.BottomCenter)
        .padding(20.dp),
    onClick = { navController.navigate(Routes.SignUp.route) },
    style = TextStyle(
        fontSize = 14.sp,
        fontFamily = FontFamily.Default,
        textDecoration = TextDecoration.Underline,
        color = Purple700
    )
)

6단계: 로그인 화면에서 ForgotPassword 화면으로 이동하려면 Login.kt에서 비밀번호 분실 텍스트의 onClick에 아래 코드를 추가합니다.

ClickableText(
    text = AnnotatedString("Forgot password?"),
    onClick = { navController.navigate(Routes.ForgotPassword.route) },
    style = TextStyle(
        fontSize = 14.sp,
        fontFamily = FontFamily.Default
    )
)

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

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

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

이 포스팅이 도움이 되셨다면 아래 좋아요 버튼을 몇번 눌러주세요!