From d8ec1b552d774851ff9f8177fc2204ef60d8c802 Mon Sep 17 00:00:00 2001 From: aotian16 Date: Wed, 12 Feb 2025 18:49:28 +0800 Subject: [PATCH] add compose --- .idea/deploymentTargetSelector.xml | 10 ++ .idea/vcs.xml | 6 + app/build.gradle.kts | 3 + .../com/example/basicscodelab/MainActivity.kt | 162 +++++++++++++++++- .../example/basicscodelab/ui/theme/Color.kt | 7 +- .../example/basicscodelab/ui/theme/Theme.kt | 15 +- app/src/main/res/values/strings.xml | 3 + gradle/libs.versions.toml | 1 + 8 files changed, 192 insertions(+), 15 deletions(-) create mode 100644 .idea/deploymentTargetSelector.xml create mode 100644 .idea/vcs.xml diff --git a/.idea/deploymentTargetSelector.xml b/.idea/deploymentTargetSelector.xml new file mode 100644 index 0000000..b268ef3 --- /dev/null +++ b/.idea/deploymentTargetSelector.xml @@ -0,0 +1,10 @@ + + + + + + + + + \ No newline at end of file diff --git a/.idea/vcs.xml b/.idea/vcs.xml new file mode 100644 index 0000000..94a25f7 --- /dev/null +++ b/.idea/vcs.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/app/build.gradle.kts b/app/build.gradle.kts index a377c2e..e0e83bb 100644 --- a/app/build.gradle.kts +++ b/app/build.gradle.kts @@ -49,6 +49,9 @@ dependencies { implementation(libs.androidx.ui.graphics) implementation(libs.androidx.ui.tooling.preview) implementation(libs.androidx.material3) + + implementation(libs.androidx.material.icons.extended) + testImplementation(libs.junit) androidTestImplementation(libs.androidx.junit) androidTestImplementation(libs.androidx.espresso.core) diff --git a/app/src/main/java/com/example/basicscodelab/MainActivity.kt b/app/src/main/java/com/example/basicscodelab/MainActivity.kt index 2b83347..f180bb7 100644 --- a/app/src/main/java/com/example/basicscodelab/MainActivity.kt +++ b/app/src/main/java/com/example/basicscodelab/MainActivity.kt @@ -1,16 +1,43 @@ package com.example.basicscodelab +import android.content.res.Configuration.UI_MODE_NIGHT_YES import android.os.Bundle import androidx.activity.ComponentActivity import androidx.activity.compose.setContent import androidx.activity.enableEdgeToEdge +import androidx.compose.animation.animateContentSize +import androidx.compose.animation.core.Spring +import androidx.compose.animation.core.spring +import androidx.compose.foundation.layout.Arrangement +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.lazy.LazyColumn +import androidx.compose.foundation.lazy.items +import androidx.compose.material.icons.Icons.Filled +import androidx.compose.material.icons.filled.ExpandLess +import androidx.compose.material.icons.filled.ExpandMore +import androidx.compose.material3.Button +import androidx.compose.material3.Card +import androidx.compose.material3.CardDefaults +import androidx.compose.material3.Icon +import androidx.compose.material3.IconButton +import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Scaffold +import androidx.compose.material3.Surface import androidx.compose.material3.Text import androidx.compose.runtime.Composable +import androidx.compose.runtime.getValue +import androidx.compose.runtime.mutableStateOf +import androidx.compose.runtime.saveable.rememberSaveable +import androidx.compose.runtime.setValue +import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier +import androidx.compose.ui.res.stringResource +import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.unit.dp import com.example.basicscodelab.ui.theme.BasicsCodelabTheme class MainActivity : ComponentActivity() { @@ -20,8 +47,7 @@ class MainActivity : ComponentActivity() { setContent { BasicsCodelabTheme { Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding -> - Greeting( - name = "Android", + MyApp( modifier = Modifier.padding(innerPadding) ) } @@ -31,17 +57,137 @@ class MainActivity : ComponentActivity() { } @Composable -fun Greeting(name: String, modifier: Modifier = Modifier) { - Text( - text = "Hello $name!", - modifier = modifier - ) +fun MyApp(modifier: Modifier = Modifier) { + + var shouldShowOnboarding by rememberSaveable { mutableStateOf(true) } + + Surface(modifier) { + if (shouldShowOnboarding) { + OnboardingScreen(onContinueClicked = { shouldShowOnboarding = false }) + } else { + Greetings() + } + } +} + +@Composable +private fun Greetings( + modifier: Modifier = Modifier, + names: List = List(1000) { "$it" } +) { + LazyColumn(modifier = modifier.padding(vertical = 4.dp)) { + items(items = names) { name -> + Greeting(name = name) + } + } +} + +@Composable +private fun Greeting(name: String, modifier: Modifier = Modifier) { + Card( + colors = CardDefaults.cardColors( + containerColor = MaterialTheme.colorScheme.primary + ), + modifier = modifier.padding(vertical = 4.dp, horizontal = 8.dp) + ) { + CardContent(name) + } +} + +@Composable +private fun CardContent(name: String) { + var expanded by rememberSaveable { mutableStateOf(false) } + + Row( + modifier = Modifier + .padding(12.dp) + .animateContentSize( + animationSpec = spring( + dampingRatio = Spring.DampingRatioMediumBouncy, + stiffness = Spring.StiffnessLow + ) + ) + ) { + Column( + modifier = Modifier + .weight(1f) + .padding(12.dp) + ) { + Text(text = "Hello, ") + Text( + text = name, style = MaterialTheme.typography.headlineMedium.copy( + fontWeight = FontWeight.ExtraBold + ) + ) + if (expanded) { + Text( + text = ("Composem ipsum color sit lazy, " + + "padding theme elit, sed do bouncy. ").repeat(4), + ) + } + } + IconButton(onClick = { expanded = !expanded }) { + Icon( + imageVector = if (expanded) Filled.ExpandLess else Filled.ExpandMore, + contentDescription = if (expanded) { + stringResource(R.string.show_less) + } else { + stringResource(R.string.show_more) + } + ) + } + } } @Preview(showBackground = true) @Composable +fun MyAppPreview() { + BasicsCodelabTheme { + MyApp(Modifier.fillMaxSize()) + } +} + +@Composable +fun OnboardingScreen( + onContinueClicked: () -> Unit, + modifier: Modifier = Modifier +) { + + Column( + modifier = modifier.fillMaxSize(), + verticalArrangement = Arrangement.Center, + horizontalAlignment = Alignment.CenterHorizontally + ) { + Text("Welcome to the Basics Codelab!") + Button( + modifier = Modifier + .padding(vertical = 24.dp), + onClick = onContinueClicked + ) { + Text("Continue") + } + } + +} + +@Preview(showBackground = true, widthDp = 320, heightDp = 320) +@Composable +fun OnboardingPreview() { + BasicsCodelabTheme { + OnboardingScreen(onContinueClicked = {}) // Do nothing on click. + } +} + +@Preview( + showBackground = true, + widthDp = 320, + uiMode = UI_MODE_NIGHT_YES, + name = "GreetingPreviewDark" +) +@Preview(showBackground = true, widthDp = 320) +@Composable fun GreetingPreview() { BasicsCodelabTheme { - Greeting("Android") + Greetings() } } \ No newline at end of file diff --git a/app/src/main/java/com/example/basicscodelab/ui/theme/Color.kt b/app/src/main/java/com/example/basicscodelab/ui/theme/Color.kt index b3a6237..2eea8de 100644 --- a/app/src/main/java/com/example/basicscodelab/ui/theme/Color.kt +++ b/app/src/main/java/com/example/basicscodelab/ui/theme/Color.kt @@ -8,4 +8,9 @@ val Pink80 = Color(0xFFEFB8C8) val Purple40 = Color(0xFF6650a4) val PurpleGrey40 = Color(0xFF625b71) -val Pink40 = Color(0xFF7D5260) \ No newline at end of file +val Pink40 = Color(0xFF7D5260) + +val Navy = Color(0xFF073042) +val Blue = Color(0xFF4285F4) +val LightBlue = Color(0xFFD7EFFE) +val Chartreuse = Color(0xFFEFF7CF) \ No newline at end of file diff --git a/app/src/main/java/com/example/basicscodelab/ui/theme/Theme.kt b/app/src/main/java/com/example/basicscodelab/ui/theme/Theme.kt index 0c03964..18d0059 100644 --- a/app/src/main/java/com/example/basicscodelab/ui/theme/Theme.kt +++ b/app/src/main/java/com/example/basicscodelab/ui/theme/Theme.kt @@ -9,18 +9,21 @@ import androidx.compose.material3.dynamicDarkColorScheme import androidx.compose.material3.dynamicLightColorScheme import androidx.compose.material3.lightColorScheme import androidx.compose.runtime.Composable +import androidx.compose.ui.graphics.Color import androidx.compose.ui.platform.LocalContext private val DarkColorScheme = darkColorScheme( - primary = Purple80, - secondary = PurpleGrey80, - tertiary = Pink80 + surface = Blue, + onSurface = Navy, + primary = Navy, + onPrimary = Chartreuse ) private val LightColorScheme = lightColorScheme( - primary = Purple40, - secondary = PurpleGrey40, - tertiary = Pink40 + surface = Blue, + onSurface = Color.White, + primary = LightBlue, + onPrimary = Navy /* Other default colors to override background = Color(0xFFFFFBFE), diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml index 4866d5c..d2c815a 100644 --- a/app/src/main/res/values/strings.xml +++ b/app/src/main/res/values/strings.xml @@ -1,3 +1,6 @@ Basics Codelab + + Show less + Show more \ No newline at end of file diff --git a/gradle/libs.versions.toml b/gradle/libs.versions.toml index 689e55d..92c4d38 100644 --- a/gradle/libs.versions.toml +++ b/gradle/libs.versions.toml @@ -11,6 +11,7 @@ composeBom = "2024.04.01" [libraries] androidx-core-ktx = { group = "androidx.core", name = "core-ktx", version.ref = "coreKtx" } +androidx-material-icons-extended = { module = "androidx.compose.material:material-icons-extended" } junit = { group = "junit", name = "junit", version.ref = "junit" } androidx-junit = { group = "androidx.test.ext", name = "junit", version.ref = "junitVersion" } androidx-espresso-core = { group = "androidx.test.espresso", name = "espresso-core", version.ref = "espressoCore" }