Material You Compose 实践:多样式时钟

StyleClock.png

Google Play 下载地址

github 源码地址

首先确定主题样式的逻辑.

enum class Theme {
  DynamicTheme,
  DynamicLightTheme,
  DynamicDarkTheme,
  AutoTheme,
  LightTheme,
  DarkTheme,
  LightGreenTheme,
  DarkGreenTheme,
  LightBlueTheme,
  DarkBlueTheme,
  LightPinkTheme,
  DarkPinkTheme,
  LightOrangeTheme,
  DarkOrangeTheme,
  LightColorful2Theme,
  DarkColorful12heme,
  LightColorful1Theme,
  DarkColorful1Theme,
  LightPurpleTheme,
  DarkPurpleTheme;

  fun getColorScheme(darkTheme: Boolean, context: Context): ColorScheme = when (this) {
    DynamicTheme -> {
      if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.S) {
        if (darkTheme) dynamicDarkColorScheme(context) else dynamicLightColorScheme(context)
      } else {
        if (darkTheme) DarkColors else LightColors
      }
    }
    AutoTheme -> {
      if (darkTheme) DarkColors else LightColors
    }
    LightTheme -> LightColors
    DarkTheme -> DarkColors
    LightGreenTheme -> LightGreenColors
    DarkGreenTheme -> DarkGreenColors
    LightBlueTheme -> LightBlueColors
    DarkBlueTheme -> DarkBlueColors
    DynamicLightTheme -> if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.S) {
      dynamicLightColorScheme(context)
    } else {
      LightColors
    }
    DynamicDarkTheme -> if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.S) {
      dynamicDarkColorScheme(context)
    } else {
      DarkColors
    }
    LightPurpleTheme -> LightPurpleColors
    DarkPurpleTheme -> DarkPurpleColors
    LightColorful1Theme -> LightColorful1Colors
    DarkColorful1Theme -> DarkColorful1Colors
    LightColorful2Theme -> LightColorful2Colors
    DarkColorful12heme -> DarkColorful2Colors
    LightPinkTheme -> LightPinkColors
    DarkPinkTheme -> DarkPinkColors
    LightOrangeTheme -> LightOrangeColors
    DarkOrangeTheme -> DarkOrangeColors
  }
}

应用相关主题:

@Composable
fun PureClockTheme(
  theme: Theme = Theme.DynamicTheme,
  darkTheme: Boolean = isSystemInDarkTheme(),
  content: @Composable () -> Unit
) {
  val colorScheme = theme.getColorScheme(darkTheme, LocalContext.current)

  val view = LocalView.current
  if (!view.isInEditMode) {
    SideEffect {
      (view.context as Activity).window.statusBarColor = colorScheme.primary.toArgb()
      ViewCompat.getWindowInsetsController(view)?.isAppearanceLightStatusBars = darkTheme
    }
  }

  MaterialTheme(
    colorScheme = colorScheme,
    typography = Typography,
    content = content
  )
}

控制横竖屏旋转

通过 BoxWithConstraints 获取宽度和高度,从而灵活布局:

BoxWithConstraints {
    if (maxWidth > maxHeight) {
       //横屏代码
    } else {
       //竖屏代码
    }
}

使用 ViewModel 控制数据

val theme by viewModel.theme.collectAsState(initial = Theme.DynamicTheme)
val fontFamily by viewModel.fontFamily.collectAsState(initial = MyFontFamily.DefaultFontFamily)
val hour by viewModel.hour.observeAsState()
val minute by viewModel.minute.observeAsState()
val second by viewModel.second.observeAsState()
val amPm by viewModel.amPm.observeAsState()
val dayOfWeek by viewModel.dayOfWeek.observeAsState()
val powerPct by viewModel.powerPct.observeAsState()
val isCharging by viewModel.isCharging.observeAsState()
val formatDate by viewModel.formatDate.observeAsState()
val isShowBatteryPower by viewModel.isShowBatteryPower.collectAsState(initial = false)
val isShowCalendar by viewModel.isShowCalendar.collectAsState(initial = false)

源码地址

github 源码地址

Google Play 下载地址

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容