首页 > 编程语言 >Android Compose 入门,深入底层源码分析

Android Compose 入门,深入底层源码分析

时间:2024-04-10 17:46:25浏览次数:28  
标签:Compose 颜色 函数 val MaterialTheme Composable 源码 修饰 Android

Android Compose 入门,深入底层源码分析

我是跟着AS官网学习的,但是官方的教程写的不是很详细.官网链接
首先创建一个Compose项目,目录结构是这样:
ui
-> theme
-> -> Color.kt
-> -> Theme.kt
-> -> Type.kt
MainActivity.kt
通过阅读源码,发现实际上还少了一个Shapes.kt,我手动添加了.

Type.kt

/**  
 * 存放组件的Style  
 * Typography全部是文字的属性
 * 点开Typography的代码,结构很简单.
 * 存了一些TextStyle,提供以下功能:
 * 主构造函数: 使用一些默认参数初始化各个TextStyle
 * copy: 复制一份
 * equals: 比较每一个TextStyle
 * hashCode: 计算hash,把每个TextStyle都计算进去.
 * fromToken: internal修饰,为Typography类增加拓展函数,根据传进来的enum,确认获取哪个TextStyle.
 * 在class外部还有一个对象:
 * LocalTypography: internal修饰,被MaterialTheme作为默认参数使用
 */  
val Typography = Typography(  
    bodyLarge = TextStyle(  
        fontFamily = FontFamily.Default,  
        fontWeight = FontWeight.Normal,  
        fontSize = 16.sp,  
        lineHeight = 24.sp,  
        letterSpacing = 0.5.sp  
    )
)

Color.kt

/**  
 * 存放颜色值
 * darkColorScheme和lightColorScheme都属于ColorScheme  
 * 点开ColorScheme的代码,结构很简单.
 * 存了一些Color,提供以下功能:
 * 主构造函数: 颜色委托给mutableStateOf,使颜色值的变化可以被Compose观察.
 * copy: 复制一份
 * 剩下的是一些函数:
 * lightColorScheme: 提供默认的白天模式颜色
 * darkColorScheme: 提供默认的夜间模式颜色
 * ColorScheme.contentColorFor: 为ColorScheme类增加拓展函数,根据背景色使用对应的前景色,如果颜色不匹配,返回透明色.
 * contentColorFor: 提供一个函数,import这个函数来使用,如果颜色不匹配,返回黑色.
 * applyTonalElevation: internal修饰,为ColorScheme类增加拓展函数,返回新背景色,传入的背景色加上高度.
 * surfaceColorAtElevation: 为ColorScheme类增加拓展函数,计算不同高度的surface表面色调.
 * updateColorSchemeFrom: internal修饰,为ColorScheme类增加拓展函数,更新颜色,成本很高,但颜色委托给了mutableStateOf,忽略不变化的颜色值,提高运行效率.
 * fromToken: internal修饰,为ColorScheme类增加拓展函数,根据传进来的enum,确认获取哪个Color.
 * toColor: internal修饰,为ColorSchemeKeyTokens类增加拓展函数,将enum转换为对应的颜色,调用fromToken.
 * 在class外部还有两个对象:
 * LocalColorScheme: internal修饰,被MaterialTheme作为默认参数使用,默认使用lightColorScheme.
 * DisabledAlpha: internal修饰,禁用状态的前景色.比如禁用按钮的文字颜色.
 */  
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 DarkColorScheme = darkColorScheme(  
    primary = Purple80,  
    secondary = PurpleGrey80,  
    tertiary = Pink80  
)  
  
//浅色模式  
val LightColorScheme = lightColorScheme(  
    primary = Purple40,  
    secondary = PurpleGrey40,  
    tertiary = Pink40,  
)

Shapes.kt

/**  
 * 默认创建的项目里没有创建Shapes  
 * 这里也简单介绍一下  
 * 点开Shapes代码,结构很简单.  
 * 存放了一些形状,提供以下功能:  
 * 主构造函数: 存放一些CornerBasedShape  
 * CornerBasedShape基于角的形状,子类有: AbsoluteCutCornerShape,AbsoluteRoundedCornerShape,CutCornerShape,RoundedCornerShape.  
 * https://developer.android.com/reference/kotlin/androidx/compose/foundation/shape/CornerBasedShape * copy: 复制一份  
 * equals: 比较每个shape  
 * hashCode: 计算hash,把每个shape都计算进去.  
 * 类外部:  
 * ShapeDefaults: 提供CornerBasedShape的默认参数  
 * top,bottom,start,end: internal修饰,帮助组件获取Shape.  
 * fromToken: internal修饰,根据传入的enum,返回对应的Shape.  
 * toShape: internal修饰,为ShapeKeyTokens增加扩展函数,把enum转为Shape,调用fromToken.  
 * LocalShapes: internal修饰,被MaterialTheme作为默认参数使用,默认使用ShapeDefaults.  
 */val shapes = Shapes(  
    extraSmall = ShapeDefaults.ExtraSmall  
)

Theme.kt

/**  
 * 构建一个Theme用来使用  
 * 如果不用自己构建的theme,会使用默认的theme.  
 * Theme很简单,分为两部分.  
 * 由Compose托管的:  
 * 使用colorScheme,shapes,typography,content创建一个MaterialTheme.  
 * content使用这个MaterialTheme,并且这个MaterialTheme会递归传递给content内的@Composable修饰的函数.  
 * 非Compose托管的:  
 * 一些不属于View的,属于window的.如状态栏颜色,导航栏是否显示等.  
 * 然后是MaterialTheme的源码
 * MaterialTheme是一个@Composable修饰的函数,按照顺序拆解:
 * rememberedColorScheme,用来更新颜色.调用updateColorSchemeFrom.使用remember让currentComposer缓存colorScheme.copy()返回的对象,下次重组时继续使用该值,涉及的内容太多,这里不再深入.
 * rippleIndication,波纹动画,默认使用透明色,也就是没有波纹动画.
 * selectionColors,文字选中颜色,默认使用:rememberedColorScheme.primary
 * CompositionLocalProvider,一个@Composable修饰的函数,使用上面的参数构建一个ProvidedValue对象,调用currentComposer.startProviders保存这些对象,然后调用content绘制,绘制时会使用这些ProvidedValue对象,然后调用currentComposer.endProviders()终止记录.
 */  
/**  
 * @param darkTheme 是否是深色模式  
 * @param dynamicColor 动态颜色 安卓12(api31) 新增,会基于系统壁纸的颜色使用对应的颜色,https://developer.android.com/develop/ui/views/theming/dynamic-colors  
 * @param content Composable代码块,使用colorScheme作为主题色  
 */  
@Composable  
fun Study1Theme(  
    darkTheme: Boolean = isSystemInDarkTheme(),  
    dynamicColor: Boolean = true,  
    content: @Composable () -> Unit  
) {  
    //Material Design 需要的颜色  
    val colorScheme = when {  
        //使用动态颜色,跟随壁纸,只有大于api31才能使用  
        dynamicColor && Build.VERSION.SDK_INT >= Build.VERSION_CODES.S -> {  
            val context = LocalContext.current  
            if (darkTheme) dynamicDarkColorScheme(context) else dynamicLightColorScheme(context)  
        }  
  
        darkTheme -> DarkColorScheme  
        else -> LightColorScheme  
    }  
  
    //获取View,@Composable的组合函数实际上是一个View  
    val view = LocalView.current  
    //不是编辑模式的情况下,设置一些参数  
    if (!view.isInEditMode) {  
        //window不是Compose管理的对象,需要用SideEffect来共享Compose状态,SideEffect保证每次重组后都会执行  
        SideEffect {  
            //设置status bar 颜色  
            val window = (view.context as Activity).window  
            window.statusBarColor = colorScheme.primary.toArgb()  
            WindowCompat.getInsetsController(window, view).isAppearanceLightStatusBars = darkTheme  
        }  
    }  
  
    //颜色,字体,代码块构建一个MaterialTheme对象,代码块的MaterialTheme对象会使用这个构建的对象  
    MaterialTheme(  
        colorScheme = colorScheme,  
        typography = typography,  
        shapes = shapes,  
        content = content  
    )  
}

MainActivity.kt

这个没什么好说的,官方的教程说的很明白了.这里简单贴一下代码.

class MainActivity : ComponentActivity() {  
    override fun onCreate(savedInstanceState: Bundle?) {  
        super.onCreate(savedInstanceState)  
        //setContent是Kotlin的扩展函数,使用Compose创建窗口  
        setContent {  
            //Study1Theme在theme/Theme.kt里,生成MaterialTheme给整个代码块用  
            Study1Theme(dynamicColor = false) {  
                //使用一个@Composable函数来作为界面的入口  
                MyApp(Modifier.fillMaxSize())  
            }  
        }    }  
  
    //界面入口,用来复用函数  
    @Composable  
    fun MyApp(modifier: Modifier = Modifier){  
        //Surface,一般显示组件的颜色,如卡片,表格,菜单的背景色  
        Surface(  
            //Modifier.fillMaxSize() 铺满父组件  
            modifier = modifier,  
            //使用Study1Theme里创建的MaterialTheme的colorScheme  
            //colorScheme现在有深色浅色两种模式,也可以添加更多风格.  
            color = MaterialTheme.colorScheme.primary  
        ) {  
            //Surface函数的最后一个参数是content: @Composable () -> Unit  
            //@Composable注解修饰的函数只能被同样@Composable修饰的函数调用  
            SayHello("Android")  
        }  
    }  
  
    //显示一个文本  
    @Composable  
    fun SayHello(name: String, modifier: Modifier = Modifier) {  
        Surface(color = MaterialTheme.colorScheme.primary) {  
            Text(  
                text = "Hello $name!",  
                modifier = modifier.padding(24.dp)  
            )  
        }  
    }  
  
    //Preview可以预览无参或者有默认参数的Compose函数  
    @Preview(showBackground = true, name = "Say Hello Preview")  
    @Composable  
    fun SayHelloPreview(name: String = "Compose") {  
        Study1Theme(dynamicColor = false) {  
            MyApp()  
        }  
    }  
}

标签:Compose,颜色,函数,val,MaterialTheme,Composable,源码,修饰,Android
From: https://www.cnblogs.com/laomuji666/p/18126525

相关文章

  • OpenCV与AI深度学习 | 实战 | 使用OpenCV确定对象的方向(附源码)
    本文来源公众号“OpenCV与AI深度学习”,仅用于学术分享,侵权删,干货满满。原文链接:实战|使用OpenCV确定对象的方向(附源码)导读本文将介绍如何使用OpenCV确定对象的方向(即旋转角度,以度为单位)。 1先决条件   安装Python3.7或者更高版本。可以参考下文链接:    ......
  • 【带源码】如何开发一个视频打赏,付费观看视频的系统?
    【带源码】如何开发一个视频打赏,付费观看视频的系统?开发指南来了最近非常火爆的视频打赏系统,有用户端,管理端,代理端风口来了,系统部署简单,需要详细部署教程的可以留下评论哦!功能模块:支持视频付费,图片合集付费代理分销会员开通单片付费对接易支付后台功能灵活配置......
  • 对于交互型数字人源码您了解多少!
    作为AI的应用场景之一,数字人在市场上的普及度比大模型高很多。可以作为智能客服,解答业务问题或者办理业务,推荐产品。交互型数字人是指能与人类进行实时交互对话的数字人,可以作为智能客服,解答业务问题或者办理业务,推荐产品。中国电信app首页的AI筱翼,是一种常见的数字人智能客服,电......
  • 免费分享Springboot+Vue的停车场管理系统源码,真酷啊
    今天给大家分享一套基于Springboot+Vue的停车场管理系统源码,在实际项目中可以直接复用。(免费提供,文末自取)一、系统运行图1、登陆页面2、车位管理3、车辆进出管理设计一个SpringBoot+Vue的停车场管理系统时,需要注意以下细节:1.用户权限管理:确保系统具有不......
  • 深入理解 Semaphore 【源码分析】
    SemaphoreSemaphore是信号量的意思,一般用来控制同时访问某个资源的线程数量,协调各个线程合理的访问公共资源,Semaphore的底层依赖的是AQS。Semaphore使用计数器来控制对共享资源的访问,如果计数器大于0,则表示允许访问共享资源,如果为0,则表示共享资源已经达到访问的上......
  • java计算机毕业设计二次元信息分享平台(附源码+springboot+开题+论文+部署)
    本系统(程序+源码)带文档lw万字以上 文末可获取一份本项目的java源码和数据库参考。系统程序文件列表开题报告内容研究背景随着数字化时代的到来,二次元文化在全球范围内迅速崛起,成为年轻一代热衷的亚文化现象。二次元内容涵盖动漫、游戏、小说等多个领域,吸引了庞大的粉丝群......
  • java计算机毕业设计二手车平台交易系统(附源码+springboot+开题+论文+部署)
    本系统(程序+源码)带文档lw万字以上 文末可获取一份本项目的java源码和数据库参考。系统程序文件列表开题报告内容研究背景随着经济的不断发展与人们生活水平的提高,汽车已成为人们日常生活中不可或缺的交通工具。然而,二手车市场的快速发展也带来了一系列问题,如信息不对称、......
  • Android 相对布局RelativeLayout 代码示例
    文字分别放在左上,右上,中间,左下,右下五个地方; <?xmlversion="1.0"encoding="utf-8"?><RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"x......
  • [kernel] 带着问题看源码 —— setreuid 何时更新 saved-set-uid (SUID)
    前言在写《[apue]进程控制那些事儿》/"进程创建"/"更改进程用户ID和组ID"一节时,发现setreuid更新实际用户ID(RUID)或有效用户ID(EUID)时,保存的设置用户ID(savedset-user-idSUID)只会随EUID变更,并不像man上说的会随RUID变更(mansetreuid):Ifthe......
  • Android 无线调试 adb connect ip:port 失败
    1.在手机打开无线调试使用adbconnect连接adbconnect192.168.14.164:39511如果连接成功,查看连接的设备,忽略配对下面的步骤.adbdevices如果连接失败:failedtoconnectto192.168.14.164:39511如果失败了,可以杀死一下进程,然后执行后面的操作adb......