Jetpackを用いたAndroidのログイン画面

ほとんどすべてのAndroidアプリケーションは、ユーザーを認証するためにログインまたは登録プロセスを持ちます.この記事では、Jetpack Composeを使用してAndroidのログインと登録画面のデザインをデザインする方法を示します.これは様々なAndroidコンポーネントをカバーしようとするいくつかのポストのシリーズです.
どうかこの投稿に私を励ましてください.
このスピナーの作成中に使用する設定
作曲バージョン:1.1.0 - alpha 06
Kotlinバージョン:1.5.31
アンドロイドスタジオ:アンドロイドスタジオマルハナバチ
このチュートリアルの最終出力スクリーンショットは以下のようになります

ステップ1:「空の構成活動」を選ぶことによって、Android Studioプロジェクトをつくってください.
ステップ2:それはナビゲーションのために必要なアプリケーションレベルのgradleファイルの依存関係の下に追加

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

ステップ3:新しいファイルルートを作成します.ルート情報を格納するKT

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

ステップ4 :新しいパッケージ画面を作成する
ステップ5:画面のパッケージ画面/screenmain内の新しいファイルを作成します.KTとその下にコードをペーストします.

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

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

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

ステップ6 :新しいファイルの画面/ログインを作成します.それのコードの下の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:メインアクティビティの中.下のコードスニペット

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の完全なコードを見つけてください😊
更新された記事を取得し、私をやる気のようにヒットに従ってください
感謝😊🙏
このポストが役に立ったならば、クリックをクリックしてください👏 あなたのサポートを示すために数回の下のボタン!