Browse Source

Compose Material3 主题修改

liuxiaolong 2 years ago
parent
commit
09af02e5ea

+ 14 - 6
app/src/main/java/com/convenient/android/lib/ui/sample/MainActivity.kt

@@ -49,12 +49,18 @@ fun MainPagePreview() {
 private fun MainPage() {
 
     var bottomSelectedState by remember { mutableStateOf(0) }
-
-    Scaffold(bottomBar = {
-        BottomBarView(selectedPosition = bottomSelectedState, onItemSelected = {
-            bottomSelectedState = it
-        })
-    }) {
+    Column {
+        SmallTopAppBar(title = {
+            Text(text = "组件库", style = MaterialTheme.typography.titleMedium)
+        }, colors = TopAppBarDefaults.smallTopAppBarColors(
+            containerColor = MaterialTheme.colorScheme.primary.copy(alpha = .1F)
+        ))
+        Scaffold(
+            bottomBar = {
+                BottomBarView(selectedPosition = bottomSelectedState, onItemSelected = {
+                    bottomSelectedState = it
+                })
+            }) {
             when(bottomSelectedState){
                 0->{
                     FuncListView()
@@ -64,8 +70,10 @@ private fun MainPage() {
                         Text(text = "建设中")
                     }
                 }
+            }
         }
     }
+
 }
 
 data class FuncBean(

+ 59 - 18
app/src/main/java/com/convenient/android/lib/ui/theme/Color.kt

@@ -1,24 +1,65 @@
 package com.convenient.android.lib.ui.theme
-
 import androidx.compose.ui.graphics.Color
 
-val Purple80 = Color(0xFFD0BCFF)
-val PurpleGrey80 = Color(0xFFCCC2DC)
-val Pink80 = Color(0xFFEFB8C8)
-
-val Purple40 = Color(0xFF6650a4)
-val PurpleGrey40 = Color(0xFF625b71)
-val Pink40 = Color(0xFF7D5260)
-
-
-val OnPrimaryColor = Color(0xFFFF4F4F)
-
-val BackgroundColor = Color(0xFFF5F5F5)
-
-val LightSubLargeTitleTextColor = Color(0x8A000000)
+val md_theme_light_primary = Color(0xFF00658C)
+val md_theme_light_onPrimary = Color(0xFFFFFFFF)
+val md_theme_light_primaryContainer = Color(0xFFC5E7FF)
+val md_theme_light_onPrimaryContainer = Color(0xFF001E2D)
+val md_theme_light_secondary = Color(0xFF4F616D)
+val md_theme_light_onSecondary = Color(0xFFFFFFFF)
+val md_theme_light_secondaryContainer = Color(0xFFD2E5F4)
+val md_theme_light_onSecondaryContainer = Color(0xFF0A1E28)
+val md_theme_light_tertiary = Color(0xFF62597C)
+val md_theme_light_onTertiary = Color(0xFFFFFFFF)
+val md_theme_light_tertiaryContainer = Color(0xFFE7DEFF)
+val md_theme_light_onTertiaryContainer = Color(0xFF1E1735)
+val md_theme_light_error = Color(0xFFBA1A1A)
+val md_theme_light_errorContainer = Color(0xFFFFDAD6)
+val md_theme_light_onError = Color(0xFFFFFFFF)
+val md_theme_light_onErrorContainer = Color(0xFF410002)
+val md_theme_light_background = Color(0xFFFBFCFF)
+val md_theme_light_onBackground = Color(0xFF191C1E)
+val md_theme_light_surface = Color(0xFFFBFCFF)
+val md_theme_light_onSurface = Color(0xFF191C1E)
+val md_theme_light_surfaceVariant = Color(0xFFDDE3EA)
+val md_theme_light_onSurfaceVariant = Color(0xFF41484D)
+val md_theme_light_outline = Color(0xFF71787E)
+val md_theme_light_inverseOnSurface = Color(0xFFF0F1F3)
+val md_theme_light_inverseSurface = Color(0xFF2E3133)
+val md_theme_light_inversePrimary = Color(0xFF80CFFF)
+val md_theme_light_shadow = Color(0xFF000000)
+val md_theme_light_surfaceTint = Color(0xFF00658C)
+val md_theme_light_surfaceTintColor = Color(0xFF00658C)
 
-val LightSubTitleTextColor = Color(0x61000000)
+val md_theme_dark_primary = Color(0xFF80CFFF)
+val md_theme_dark_onPrimary = Color(0xFF00344B)
+val md_theme_dark_primaryContainer = Color(0xFF004C6B)
+val md_theme_dark_onPrimaryContainer = Color(0xFFC5E7FF)
+val md_theme_dark_secondary = Color(0xFFB6C9D8)
+val md_theme_dark_onSecondary = Color(0xFF20333E)
+val md_theme_dark_secondaryContainer = Color(0xFF374955)
+val md_theme_dark_onSecondaryContainer = Color(0xFFD2E5F4)
+val md_theme_dark_tertiary = Color(0xFFCBC1E9)
+val md_theme_dark_onTertiary = Color(0xFF332C4C)
+val md_theme_dark_tertiaryContainer = Color(0xFF4A4263)
+val md_theme_dark_onTertiaryContainer = Color(0xFFE7DEFF)
+val md_theme_dark_error = Color(0xFFFFB4AB)
+val md_theme_dark_errorContainer = Color(0xFF93000A)
+val md_theme_dark_onError = Color(0xFF690005)
+val md_theme_dark_onErrorContainer = Color(0xFFFFDAD6)
+val md_theme_dark_background = Color(0xFF191C1E)
+val md_theme_dark_onBackground = Color(0xFFE1E2E5)
+val md_theme_dark_surface = Color(0xFF191C1E)
+val md_theme_dark_onSurface = Color(0xFFE1E2E5)
+val md_theme_dark_surfaceVariant = Color(0xFF41484D)
+val md_theme_dark_onSurfaceVariant = Color(0xFFC1C7CE)
+val md_theme_dark_outline = Color(0xFF8B9297)
+val md_theme_dark_inverseOnSurface = Color(0xFF191C1E)
+val md_theme_dark_inverseSurface = Color(0xFFE1E2E5)
+val md_theme_dark_inversePrimary = Color(0xFF00658C)
+val md_theme_dark_shadow = Color(0xFF000000)
+val md_theme_dark_surfaceTint = Color(0xFF80CFFF)
+val md_theme_dark_surfaceTintColor = Color(0xFF80CFFF)
 
-val LightLineColor = Color(0x1F000000)
 
-val LightListLineColor = Color(0xFFF5F5F5)
+val seed = Color(0xFF7FCFFF)

+ 0 - 7
app/src/main/java/com/convenient/android/lib/ui/theme/MaterialThemeColorExtension.kt

@@ -1,9 +1,2 @@
 package com.convenient.android.lib.ui.theme
 
-import androidx.compose.foundation.isSystemInDarkTheme
-import androidx.compose.material3.ColorScheme
-import androidx.compose.runtime.Composable
-import androidx.compose.ui.graphics.Color
-import com.convenient.android.lib.ui.theme.LightLineColor
-import com.convenient.android.lib.ui.theme.LightListLineColor
-

+ 69 - 26
app/src/main/java/com/convenient/android/lib/ui/theme/Theme.kt

@@ -3,11 +3,7 @@ package com.convenient.android.lib.ui.theme
 import android.app.Activity
 import android.os.Build
 import androidx.compose.foundation.isSystemInDarkTheme
-import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.darkColorScheme
-import androidx.compose.material3.dynamicDarkColorScheme
-import androidx.compose.material3.dynamicLightColorScheme
-import androidx.compose.material3.lightColorScheme
+import androidx.compose.material3.*
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.SideEffect
 import androidx.compose.ui.graphics.Color
@@ -16,21 +12,68 @@ import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.platform.LocalView
 import androidx.core.view.ViewCompat
 
-private val DarkColorScheme = darkColorScheme(
-    primary = Purple80,
-    secondary = PurpleGrey80,
-    tertiary = Pink80
+
+private val LightColors = lightColorScheme(
+    primary = md_theme_light_primary,
+    onPrimary = md_theme_light_onPrimary,
+    primaryContainer = md_theme_light_primaryContainer,
+    onPrimaryContainer = md_theme_light_onPrimaryContainer,
+    secondary = md_theme_light_secondary,
+    onSecondary = md_theme_light_onSecondary,
+    secondaryContainer = md_theme_light_secondaryContainer,
+    onSecondaryContainer = md_theme_light_onSecondaryContainer,
+    tertiary = md_theme_light_tertiary,
+    onTertiary = md_theme_light_onTertiary,
+    tertiaryContainer = md_theme_light_tertiaryContainer,
+    onTertiaryContainer = md_theme_light_onTertiaryContainer,
+    error = md_theme_light_error,
+    errorContainer = md_theme_light_errorContainer,
+    onError = md_theme_light_onError,
+    onErrorContainer = md_theme_light_onErrorContainer,
+    background = md_theme_light_background,
+    onBackground = md_theme_light_onBackground,
+    surface = md_theme_light_surface,
+    onSurface = md_theme_light_onSurface,
+    surfaceVariant = md_theme_light_surfaceVariant,
+    onSurfaceVariant = md_theme_light_onSurfaceVariant,
+    outline = md_theme_light_outline,
+    inverseOnSurface = md_theme_light_inverseOnSurface,
+    inverseSurface = md_theme_light_inverseSurface,
+    inversePrimary = md_theme_light_inversePrimary,
+    surfaceTint = md_theme_light_surfaceTint,
+//    surfaceTintColor = md_theme_light_surfaceTintColor,
 )
 
-private val LightColorScheme = lightColorScheme(
-    primary = Purple80,
-    onPrimary = PurpleGrey80,
-    secondary = PurpleGrey40,
-    tertiary = Pink40,
-    primaryContainer = Purple80,
-    onPrimaryContainer = Purple80,
-    secondaryContainer = Purple80,
-    tertiaryContainer = Purple80
+
+private val DarkColors = darkColorScheme(
+    primary = md_theme_dark_primary,
+    onPrimary = md_theme_dark_onPrimary,
+    primaryContainer = md_theme_dark_primaryContainer,
+    onPrimaryContainer = md_theme_dark_onPrimaryContainer,
+    secondary = md_theme_dark_secondary,
+    onSecondary = md_theme_dark_onSecondary,
+    secondaryContainer = md_theme_dark_secondaryContainer,
+    onSecondaryContainer = md_theme_dark_onSecondaryContainer,
+    tertiary = md_theme_dark_tertiary,
+    onTertiary = md_theme_dark_onTertiary,
+    tertiaryContainer = md_theme_dark_tertiaryContainer,
+    onTertiaryContainer = md_theme_dark_onTertiaryContainer,
+    error = md_theme_dark_error,
+    errorContainer = md_theme_dark_errorContainer,
+    onError = md_theme_dark_onError,
+    onErrorContainer = md_theme_dark_onErrorContainer,
+    background = md_theme_dark_background,
+    onBackground = md_theme_dark_onBackground,
+    surface = md_theme_dark_surface,
+    onSurface = md_theme_dark_onSurface,
+    surfaceVariant = md_theme_dark_surfaceVariant,
+    onSurfaceVariant = md_theme_dark_onSurfaceVariant,
+    outline = md_theme_dark_outline,
+    inverseOnSurface = md_theme_dark_inverseOnSurface,
+    inverseSurface = md_theme_dark_inverseSurface,
+    inversePrimary = md_theme_dark_inversePrimary,
+    surfaceTint = md_theme_dark_surfaceTint,
+//    surfaceTintColor = md_theme_dark_surfaceTintColor,
 )
 
 @Composable
@@ -46,20 +89,20 @@ fun SampleTheme(
             val context = LocalContext.current
             if (darkTheme) dynamicDarkColorScheme(context) else dynamicLightColorScheme(context)
         }
-        darkTheme -> DarkColorScheme
-        else -> LightColorScheme
+        darkTheme -> DarkColors
+        else -> LightColors
     }
     val view = LocalView.current
     if (!view.isInEditMode) {
         SideEffect {
-            (view.context as Activity).window.statusBarColor = Purple80.toArgb()
+            (view.context as Activity).window.statusBarColor = colorScheme.primary.toArgb()
             ViewCompat.getWindowInsetsController(view)?.isAppearanceLightStatusBars = darkTheme
         }
     }
 
-    MaterialTheme(
-        colorScheme = colorScheme,
-        typography = Typography,
-        content = content
-    )
+  MaterialTheme(
+    colorScheme = colorScheme,
+    typography = AppTypography,
+    content = content
+  )
 }

+ 96 - 34
app/src/main/java/com/convenient/android/lib/ui/theme/Type.kt

@@ -2,43 +2,105 @@ package com.convenient.android.lib.ui.theme
 
 import androidx.compose.material3.Typography
 import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.Font
 import androidx.compose.ui.text.font.FontFamily
 import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
-import com.convenient.android.lib.ui.theme.LightSubLargeTitleTextColor
-import com.convenient.android.lib.ui.theme.LightSubTitleTextColor
 
-// Set of Material typography styles to start with
-val Typography = Typography(
-    bodyLarge = TextStyle(
-        fontFamily = FontFamily.Default,
-        fontWeight = FontWeight.Normal,
-        fontSize = 16.sp,
-        lineHeight = 24.sp,
-        letterSpacing = 0.5.sp,
-        color = LightSubLargeTitleTextColor
-    ),
-    labelMedium = TextStyle(
-        color = LightSubTitleTextColor,
-        fontSize = 12.sp,
-        fontFamily = FontFamily.Default,
-        fontWeight = FontWeight.Normal
-    )
+//Replace with your font locations
+val Roboto = FontFamily.Default
 
-    /* Other default text styles to override
-    titleLarge = TextStyle(
-        fontFamily = FontFamily.Default,
-        fontWeight = FontWeight.Normal,
-        fontSize = 22.sp,
-        lineHeight = 28.sp,
-        letterSpacing = 0.sp
-    ),
-    labelSmall = TextStyle(
-        fontFamily = FontFamily.Default,
-        fontWeight = FontWeight.Medium,
-        fontSize = 11.sp,
-        lineHeight = 16.sp,
-        letterSpacing = 0.5.sp
-    )
-    */
+
+val AppTypography = Typography(
+  labelLarge = TextStyle(
+      fontWeight = FontWeight.Medium,
+      letterSpacing = 0.sp,
+      lineHeight = 20.sp,
+      fontSize = 14.sp
+  ),
+  labelMedium = TextStyle(
+      fontWeight = FontWeight.Medium,
+      letterSpacing = 0.10000000149011612.sp,
+      lineHeight = 16.sp,
+      fontSize = 12.sp
+  ),
+  labelSmall = TextStyle(
+      fontWeight = FontWeight.Medium,
+      letterSpacing = 0.10000000149011612.sp,
+      lineHeight = 16.sp,
+      fontSize = 11.sp
+  ),
+  bodyLarge = TextStyle(
+      fontWeight = FontWeight.W400,
+      letterSpacing = 0.sp,
+      lineHeight = 24.sp,
+      fontSize = 16.sp
+  ),
+  bodyMedium = TextStyle(
+      fontWeight = FontWeight.W400,
+      letterSpacing = 0.sp,
+      lineHeight = 20.sp,
+      fontSize = 14.sp
+  ),
+  bodySmall = TextStyle(
+      fontWeight = FontWeight.W400,
+      letterSpacing = 0.10000000149011612.sp,
+      lineHeight = 16.sp,
+      fontSize = 12.sp
+  ),
+  headlineLarge = TextStyle(
+      fontWeight = FontWeight.W400,
+      letterSpacing = 0.sp,
+      lineHeight = 40.sp,
+      fontSize = 32.sp
+  ),
+  headlineMedium = TextStyle(
+      fontWeight = FontWeight.W400,
+      letterSpacing = 0.sp,
+      lineHeight = 36.sp,
+      fontSize = 28.sp
+  ),
+  headlineSmall = TextStyle(
+      fontWeight = FontWeight.W400,
+      letterSpacing = 0.sp,
+      lineHeight = 32.sp,
+      fontSize = 24.sp
+  ),
+  displayLarge = TextStyle(
+      fontWeight = FontWeight.W400,
+      letterSpacing = 0.sp,
+      lineHeight = 64.sp,
+      fontSize = 57.sp
+  ),
+  displayMedium = TextStyle(
+      fontWeight = FontWeight.W400,
+      letterSpacing = 0.sp,
+      lineHeight = 52.sp,
+      fontSize = 45.sp
+  ),
+  displaySmall = TextStyle(
+      fontWeight = FontWeight.W400,
+      letterSpacing = 0.sp,
+      lineHeight = 44.sp,
+      fontSize = 36.sp
+  ),
+  titleLarge = TextStyle(
+      fontWeight = FontWeight.W400,
+      letterSpacing = 0.sp,
+      lineHeight = 28.sp,
+      fontSize = 22.sp
+  ),
+  titleMedium = TextStyle(
+      fontWeight = FontWeight.Medium,
+      letterSpacing = 0.sp,
+      lineHeight = 24.sp,
+      fontSize = 16.sp
+  ),
+  titleSmall = TextStyle(
+      fontWeight = FontWeight.Medium,
+      letterSpacing = 0.sp,
+      lineHeight = 20.sp,
+      fontSize = 14.sp
+  ),
 )

+ 2 - 4
app/src/main/res/values/themes.xml

@@ -5,10 +5,8 @@
 
         <!-- Status bar color. -->
         <!-- Customize your theme here. -->
+        <item name="android:statusBarColor">#FF00658C</item>
+
     </style>
 
-<!--    <style name="Theme.Lib" parent="android:Theme.Material.Light.NoActionBar" >-->
-<!---->
-<!--        <item name="android:statusBarColor">?attr/colorPrimaryVariant</item>-->
-<!--    </style>-->
 </resources>