【Android-JetpackCompose】11、主题设置：Theme、Colors、Typography、Shapes

2023-10-09 02:20
文章标签 android 设置 主题 colors shapes jetpackcompose theme typography

本文主要是介绍【Android-JetpackCompose】11、主题设置：Theme、Colors、Typography、Shapes，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

文章目录

  • 一、颜色
  • 二、定义 Theme
  • 三、Color 的 Alpha 值
  • 四、文本、自定义组件

首先，从下面的仓库克隆代码：

git clone https://github.com/googlecodelabs/android-compose-codelabs.git
cd android-compose-codelabs/ThemingCodelab

一、颜色

Material Design 定义了一些从语义上命名的颜色：
在这里插入图片描述

primary 是主要品牌颜色，secondary 用于提供强调色。您可以为形成对比的区域提供颜色更深/更浅的变体。background 和 surface 这两种颜色用于那些容纳在概念上驻留在应用“Surface”的组件的容器。此外，Material 还定义了“on”颜色，即针对具名颜色上层的内容使用的颜色；例如，“surface”色容器中的文本应采用“on surface”颜色。

通过定义具名颜色，可以提供备用调色板，例如浅色主题和深色主题：

在这里插入图片描述

二、定义 Theme

新建 Colors.kt 代码如下：

package com.codelab.theming.ui.startimport androidx.compose.ui.graphics.Colorval Red700 = Color(0xffdd0d3c)
val Red800 = Color(0xffd00036)
val Red900 = Color(0xffc20029)
val Red200 = Color(0xfff297a2)
val Red300 = Color(0xffea6d7e)

新建 Shape.kt 代码如下：

package com.codelab.theming.ui.startimport androidx.compose.foundation.shape.CutCornerShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.Shapes
import androidx.compose.ui.unit.dpval JetnewsShapes = Shapes(small = CutCornerShape(topStart = 8.dp),medium = CutCornerShape(topStart = 24.dp),large = RoundedCornerShape(8.dp)
)

新建 Typography.kt 代码如下：

package com.codelab.theming.ui.startimport androidx.compose.material.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.sp
import com.codelab.theming.Rprivate val Montserrat = FontFamily(Font(R.font.montserrat_regular),Font(R.font.montserrat_medium, FontWeight.W500),Font(R.font.montserrat_semibold, FontWeight.W600)
)private val Domine = FontFamily(Font(R.font.domine_regular),Font(R.font.domine_bold, FontWeight.Bold)
)val JetnewsTypography = Typography(h4 = TextStyle(fontFamily = Montserrat,fontWeight = FontWeight.W600,fontSize = 30.sp),h5 = TextStyle(fontFamily = Montserrat,fontWeight = FontWeight.W600,fontSize = 24.sp),h6 = TextStyle(fontFamily = Montserrat,fontWeight = FontWeight.W600,fontSize = 20.sp),subtitle1 = TextStyle(fontFamily = Montserrat,fontWeight = FontWeight.W600,fontSize = 16.sp),subtitle2 = TextStyle(fontFamily = Montserrat,fontWeight = FontWeight.W500,fontSize = 14.sp),body1 = TextStyle(fontFamily = Domine,fontWeight = FontWeight.Normal,fontSize = 16.sp),body2 = TextStyle(fontFamily = Montserrat,fontSize = 14.sp),button = TextStyle(fontFamily = Montserrat,fontWeight = FontWeight.W500,fontSize = 14.sp),caption = TextStyle(fontFamily = Montserrat,fontWeight = FontWeight.Normal,fontSize = 12.sp),overline = TextStyle(fontFamily = Montserrat,fontWeight = FontWeight.W500,fontSize = 12.sp)
)

新建 Theme.kt 代码如下：

package com.codelab.theming.ui.startimport androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.material.MaterialTheme
import androidx.compose.material.darkColors
import androidx.compose.material.lightColors
import androidx.compose.runtime.Composable
import androidx.compose.ui.graphics.Color@Composable
fun JetnewsTheme(darkTheme: Boolean = isSystemInDarkTheme(), content: @Composable () -> Unit) {MaterialTheme(content = content, colors = if (darkTheme) DarkColors else LightColors, typography = JetnewsTypography, shapes = JetnewsShapes)
}private val LightColors = lightColors(primary = Red700,primaryVariant = Red900,onPrimary = Color.White,secondary = Red700,secondaryVariant = Red900,onSecondary = Color.White,error = Red800
)private val DarkColors = darkColors(primary = Red300,primaryVariant = Red700,onPrimary = Color.Black,secondary = Red300,onSecondary = Color.Black,error = Red200
)

最终，在 Home.kt 中引用 Theme，代码如下：

@Preview("Featured Post")
@Composable
private fun FeaturedPostPreview() {val post = remember { PostRepo.getFeaturedPost() }JetnewsTheme {FeaturedPost(post = post)}
}@Preview("Featured Post • Dark")
@Composable
private fun FeaturedPostDarkPreview() {val post = remember { PostRepo.getFeaturedPost() }JetnewsTheme(darkTheme = true) {FeaturedPost(post = post)}
}

预览效果如下：

在这里插入图片描述

三、Color 的 Alpha 值

通常情况下，我们希望通过强调或弱化内容来突出重点并体现出视觉上的层次感。Material Design 建议采用不同的不透明度来传达这些不同的重要程度。

Jetpack Compose 通过 LocalContentAlpha 实现此功能。您可以通过为此 CompositionLocal 提供一个值来为层次结构指定内容 Alpha 值。子可组合项可以使用此值，例如 Text 和 Icon 默认使用 LocalContentColor 的组合，已调整为使用 LocalContentAlpha。Material 指定了一些标准 Alpha 值（high、medium、disabled），这些值由 ContentAlpha 对象建模。请注意，MaterialTheme 默认将 LocalContentAlpha 设置为 ContentAlpha.high。

// By default, both Icon & Text use the combination of LocalContentColor &
// LocalContentAlpha. De-emphasize content by setting a different content alpha
CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.medium) {Text(...)
}
CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.disabled) {Icon(...)Text(...)
}

我们将使用内容 Alpha 值来阐明精选博文的信息层次结构。在 Home.kt 的 PostMetadata 可组合项中，重点突出元数据 medium：

+ CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.medium) {Text(text = text,modifier = modifier)
+ }

效果如下，主标题的透明度，和次标题的透明度不同，效果如下：

在这里插入图片描述

四、文本、自定义组件

如果您需要自定义 TextStyle，可以对其执行 copy 操作并替换相关属性（它只是一个 data class），或者让 Text 可组合项接受大量样式参数，这些参数会叠加到任何 TextStyle 的上层：

Text(text = "Hello World",style = MaterialTheme.typography.body1.copy(background = MaterialTheme.colors.secondary)
)

Compose 没有提供用于提取组件样式（例如，Android View 样式或 CSS 样式）的明确方法。由于所有 Compose 组件都是用 Kotlin 编写的，因此还可通过其他方法来实现相同的目的。您可以改为创建自己的自定义组件库，并在整个应用中使用这些组件。

下例中，Header 可组合项本质上是样式化的 Text，可供我们在整个应用中使用，代码如下：

@Composable
fun Header(text: String,modifier: Modifier = Modifier
) {Surface(color = MaterialTheme.colors.onSurface.copy(alpha = 0.1f),contentColor = MaterialTheme.colors.primary,modifier = modifier.semantics { heading() }) {Text(text = text,style = MaterialTheme.typography.subtitle2,modifier = Modifier.fillMaxWidth().padding(horizontal = 16.dp, vertical = 8.dp))}
}

可通过下文定制自定义的 Button，代码如下：

@Composable
fun AcmeButton(// expose Button params consumers should be able to change
) {val acmeButtonShape: Shape = ...Button(shape = acmeButtonShape,// other params)
}

@Composable
fun LoginButton(onClick: () -> Unit,modifier: Modifier = Modifier,content: @Composable RowScope.() -> Unit
) {Button(colors = ButtonConstants.defaultButtonColors(backgroundColor = MaterialTheme.colors.secondary),onClick = onClick,modifier = modifier) {ProvideTextStyle(...) { // set our own text stylecontent()}}
}

这篇关于【Android-JetpackCompose】11、主题设置：Theme、Colors、Typography、Shapes的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/169663。

相关文章

Android实现任意版本设置默认的锁屏壁纸和桌面壁纸（两张壁纸可不一致）

Android实现任意版本设置默认的锁屏壁纸和桌面壁纸（两张壁纸可不一致）

客户有些需求需要设置默认壁纸和锁屏壁纸  在默认情况下 这两个壁纸是相同的  如果需要默认的锁屏壁纸和桌面壁纸不一样 需要额外修改 Android13实现 替换默认桌面壁纸： 将图片文件替换frameworks/base/core/res/res/drawable-nodpi/default_wallpaper.*  （注意不能是bmp格式） 替换默认锁屏壁纸： 将图片资源放入vendo
阅读更多...
Android平台播放RTSP流的几种方案探究（VLC VS ExoPlayer VS SmartPlayer）

Android平台播放RTSP流的几种方案探究（VLC VS ExoPlayer VS SmartPlayer）

技术背景 好多开发者需要遴选Android平台RTSP直播播放器的时候，不知道如何选的好，本文针对常用的方案，做个大概的说明： 1. 使用VLC for Android VLC Media Player（VLC多媒体播放器），最初命名为VideoLAN客户端，是VideoLAN品牌产品，是VideoLAN计划的多媒体播放器。它支持众多音频与视频解码器及文件格式，并支持DVD影音光盘，VCD影
阅读更多...
android-opencv-jni

android-opencv-jni

//------------------start opencv--------------------@Override public void onResume(){ super.onResume(); //通过OpenCV引擎服务加载并初始化OpenCV类库，所谓OpenCV引擎服务即是 //OpenCV_2.4.3.2_Manager_2.4_*.apk程序包，存
阅读更多...
从状态管理到性能优化：全面解析 Android Compose

从状态管理到性能优化：全面解析 Android Compose

文章目录 引言一、Android Compose基本概念1.1 什么是Android Compose?1.2 Compose的优势1.3 如何在项目中使用Compose 二、Compose中的状态管理2.1 状态管理的重要性2.2 Compose中的状态和数据流2.3 使用State和MutableState处理状态2.4 通过ViewModel进行状态管理 三、Compose中的列表和滚动
阅读更多...
Android 10.0 mtk平板camera2横屏预览旋转90度横屏拍照图片旋转90度功能实现

Android 10.0 mtk平板camera2横屏预览旋转90度横屏拍照图片旋转90度功能实现

1.前言 在10.0的系统rom定制化开发中，在进行一些平板等默认横屏的设备开发的过程中，需要在进入camera2的 时候，默认预览图像也是需要横屏显示的，在上一篇已经实现了横屏预览功能，然后发现横屏预览后，拍照保存的图片 依然是竖屏的，所以说同样需要将图片也保存为横屏图标了，所以就需要看下mtk的camera2的相关横屏保存图片功能， 如何实现实现横屏保存图片功能 如图所示: 2.mtk
阅读更多...
android应用中res目录说明

android应用中res目录说明

Android应用的res目录是一个特殊的项目，该项目里存放了Android应用所用的全部资源，包括图片、字符串、颜色、尺寸、样式等，类似于web开发中的public目录，js、css、image、style。。。。 Android按照约定，将不同的资源放在不同的文件夹中，这样可以方便的让AAPT(即Android Asset Packaging Tool , 在SDK的build-tools目
阅读更多...
Android fill_parent、match_parent、wrap_content三者的作用及区别

Android fill_parent、match_parent、wrap_content三者的作用及区别

这三个属性都是用来适应视图的水平或者垂直大小，以视图的内容或尺寸为基础的布局，比精确的指定视图的范围更加方便。 1、fill_parent 设置一个视图的布局为fill_parent将强制性的使视图扩展至它父元素的大小 2、match_parent 和fill_parent一样，从字面上的意思match_parent更贴切一些，于是从2.2开始，两个属性都可以使用，但2.3版本以后的建议使
阅读更多...
Android Environment 获取的路径问题

Android Environment 获取的路径问题

1. 以获取 /System 路径为例 /*** Return root of the "system" partition holding the core Android OS.* Always present and mounted read-only.*/public static @NonNull File getRootDirectory() {return DIR_ANDR
阅读更多...
uniapp设置微信小程序的交互反馈

uniapp设置微信小程序的交互反馈

链接：uni.showToast(OBJECT) | uni-app官网 (dcloud.net.cn) 设置操作成功的弹窗： title是我们弹窗提示的文字 showToast是我们在加载的时候进入就会弹出的提示。 2.设置失败的提示窗口和标签 icon：'error'是设置我们失败的logo 设置的文字上限是7个文字，如果需要设置的提示文字过长就需要设置icon并给
阅读更多...
Tomcat性能参数设置

Tomcat性能参数设置

转自：http://blog.csdn.net/chinadeng/article/details/6591542 Tomcat性能参数设置 2010 - 12 - 27 Tomcat性能参数设置 博客分类： Java Linux Tomcat 网络应用 多线程 Socket 默认参数不适合生产环境使用，因此需要修改一些参数   1、修改启动时内存参数、并指定J
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2