Jetpackを使ったAndroidのログイン画面

14992 ワード
ux compose android jetpack テキストリンク

この部分では、いくつかのより多くの画面を追加し、同様にアプリケーション全体でそれらを再利用するためにいくつかの共通のコンポーネントを作成します.
このスピナーの作成中に使用する設定

  • バージョンを作成します:1.1.0 - Alpha 06

  • 古林版:1.5.31

  • アンドロイドスタジオ:アンドロイドスタジオマルハナバチ
    ステップ1:一般的なtopappbarコンポーネントを最初に作成しましょう.このパッケージ内にComponent\という名前の新しいパッケージを作成し、新しいファイルを作成し、コンポーネント\CustomTopAppBarと呼びます.このファイルのコードスニペットの下に
    @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:新しいファイルの画面\のサインアップを作成します.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 :新しいファイル画面を作成します.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:今我々は我々が作成した上記の画面のナビゲーションを追加します.その更新画面を行うには.コード下の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:ログイン画面からサインアップ画面に移動するには、ログイン時にサインアップテキストをオンクリックします.KT
    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画面に移動するには、ログイン時に忘れられたパスワードのテキストのonclickに以下のコードを追加します.KT
    ClickableText(
    text = AnnotatedString("Forgot password?"),
    onClick = { navController.navigate(Routes.ForgotPassword.route) },
    style = TextStyle(
        fontSize = 14.sp,
        fontFamily = FontFamily.Default
    )
)
    それは、あなたがJetpackのcomposeを使用してログインUIで行われます.
    GitHubで完全なコードを見つけてください😊
    更新された記事を取得し、私をやる気のようにヒットに従ってください
    感謝😊🙏
    このポストが役に立つならば、あなたの支持を示すために、数回下のボタンのようにクリックしてください!
    • Activityの破棄
    ローカルで作成されたルールの設定を読み込みます