Jetpack Compose之学习前的准备~

作者：TimeFine

一、为啥学习Compose

学习Compose一开始我是拒绝的，因为习惯改变太大，写xml挺好的为啥要卷Compose？

后来看了郭霖大佬的文章 写给初学者的Jetpack Compose教程，为什么要学习Compose？ 觉得大佬说的有道理：

1、写xml的方式必然是会被淘汰的，因为它太落后了。
2、虽然xml中可以用include，但是其实非常多的组件我们并没有复用，比如14sp的TextView，xml中到处都是，写多了也很烦，而Compose中声明式UI，控件可以极大的复用。
3、Compose已经趋于稳定，是时候学习一下了。
4、本来想深入Flutter，但发现招聘网站上招Flutter的太少了，于是目光转向了Compose。

二、第一个Compose应用

Compose导的包比较多，一开始建议创建新工程，这样一步到位简单一些，如下：

创建工程的时候选择其中一个，我选择的是第一个。

等项目创建好后，可以看到导入了如下的包：

dependencies {

    implementation 'androidx.core:core-ktx:1.7.0'
    implementation "androidx.compose.ui:ui:$compose_version"    <-------这里
    implementation "androidx.compose.material:material:$compose_version"   <-------这里
    implementation "androidx.compose.ui:ui-tooling-preview:$compose_version"   <-------这里
    implementation 'androidx.lifecycle:lifecycle-runtime-ktx:2.3.1'
    implementation 'androidx.activity:activity-compose:1.3.1'
    testImplementation 'junit:junit:4.13.2'
    androidTestImplementation 'androidx.test.ext:junit:1.1.5'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.5.1'
    androidTestImplementation "androidx.compose.ui:ui-test-junit4:$compose_version"  <-------这里
    debugImplementation "androidx.compose.ui:ui-tooling:$compose_version"    <-------这里
    debugImplementation "androidx.compose.ui:ui-test-manifest:$compose_version"    <-------这里
}

compose_version变量并不是抽出来的，而是系统自动生成的，整个Android应用的环境如下：

//应用的版本
minSdk 21    //最低版本21
targetSdk 33    //最高版本33


buildscript {
    ext {
        compose_version = '1.4.3'    //Compose版本
    }
}// Top-level build file where you can add configuration options common to all sub-projects/modules.
plugins {
    id 'com.android.application' version '7.2.2' apply false
    id 'com.android.library' version '7.2.2' apply false
    id 'org.jetbrains.kotlin.android' version '1.8.10' apply false   //kotlin版本
}

//Gradle版本(如下图)
7.3.3

为什么把这个列出来呢？ 因为Compose、kotlin、Gradle有版本对应关系（不是必须一一对应），如果碰到新工程编译报错，去网上查查它们的版本关系。

新创建的工程首先映入眼帘的就是MainActivity，它的结构跟传统项目的结构很不一样，如下：

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            TestComposeTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colors.background
                ) {
                    Greeting("Android")
                }
            }
        }
    }
}

@Composable
fun Greeting(name: String) {
    Text(text = "Hello $name!")
}

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    TestComposeTheme {
        Greeting("Android")
    }
}

setContentView(R.layout.activity_main)没有了，取而代之的是setContent{}，直呼看不懂…

运行程序，界面显示如下，在左上角显示了Hello Android!：

三、Compose的MainActivity里面都有什么

1、Compose的UI是kotlin DSL风格的

用xml写布局，UI就是一个个View组成的，而用Compose写布局，UI都是一个个kotlin DSL风格的函数组成的。这一点与之前相比完全颠覆了，需要在思维上做转变。

2、Composable注解

在上面MainActivity的代码中截取一段

@Composable      <---------注解
fun Greeting(name: String) {
    Text(text = "Hello $name!")
}

UI是函数，普通方法也是函数，那系统怎么知道哪些函数是要绘制到页面上的UI呢？答案就是添加了@Composable注解的函数就是需要绘制到界面上的函数。

3、Composable函数只能在Composable函数中调用

需要注意的是Composable函数只能在Composable函数中调用，还是看上面那段代码

@Composable     
fun Greeting(name: String) {
    Text(text = "Hello $name!")    <---------这里
}

看下Text函数（相当于xml中的TextView）的源码

@Composable
fun Text(
   ...
) {...}

Text函数确实也有@Composable注解。Compose UI组件都是顶级函数，可以在任意位置调用。

既然Composable函数只能在Composable函数中调用，那根Composable在哪里呢？这个根Composable实际上就是setContent提供的，看下setContent的源码：

public fun ComponentActivity.setContent(
    parent: CompositionContext? = null,
    content: @Composable () -> Unit    <---------这里
) {
   ...
}

根Composable下面第一个Composable注解函数是TestComposeTheme，这个Theme是Android系统根据Project工程名称自动生成的，我这个工程名称叫TestCompose，所以Theme就叫TestComposeTheme，并不是Android系统提供的Api，它是为界面提供的默认主题，内部子组件都继承其主题样式：

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            TestComposeTheme {   <--------这里
              ...
            }
        }
    }
}

@Composable
fun TestComposeTheme(darkTheme: Boolean = isSystemInDarkTheme(), content: @Composable () -> Unit) {
   ......
}

4、布局的预览

Android Studio支持对Composable组件进行预览，只需要为希望预览的Composable函数再添加一个@Preview注解即可。MainActivity的代码中有一个DefaultPreview函数，就是新建工程为我们默认添加专门用来预览的。

@Preview(showBackground = true)    <--------这里
@Composable
fun DefaultPreview() {
    TestComposeTheme {
        Greeting("Android")
    }
}

在传统项目中只有xml才能预览，在Compose项目中MainActivity可以直接预览：

在页面右上角，点击Split或Design就可以直接预览。

注意：当@Composable函数有参数且缺少默认值时，无法预览，studio会报错。

如果有多个添加@Preview的Composable，在预览面板可以同时看到它们，这可以带来高效的开发体验，比如可以同时预览不同主题、不同分辨率下的显示效果。@Preview也允许通过参数来设置这些不同的预览效果。以下是Preview注解的部分参数示例：

//预览界面带有背景色(绿色)
@Preview(showBackground = true, backgroundColor = 0xFF00FF00)

 //设置预览界面大小
@Preview(widthDp = 150, heightDp = 100)

//设置预览中的语言
@Preview(local = "fr-rFR")

//显示状态栏和任务栏(显示手机界面)
@Preview(showSystemUi = true)

//启动夜间模型
@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES)

//Pixel设备中预览
@Preview(device = Devices.PIXEL)

四、老项目中引入Compose

以MainActivity为例。

1、布局中引入

在xml中的根节点使用ComposeView。如下：

<?xml version="1.0" encoding="utf-8"?>
<androidx.compose.ui.platform.ComposeView      <--------这里
xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/root"           <--------给个id,方便fvb
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"/>

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        findViewById<ComposeView>(R.id.root).setContent {     <--------这里
            //开始使用Compose的UI组件
        }
    }
}

2、动态代码创建ComposeView

如下代码生成，不再需要xml文件。

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        //创建composeView
        val composeView = ComposeView(this).apply {
            setContent {
                //开始使用Compose的UI组件
            }
        }
        //设置composeView
        setContentView(composeView)
    }
}

总结：可以看出整个接入过程非常简单，所有Compose代码逻辑都承载在ComposeView之上，对原有基于View的代码侵入极小。可以大胆将已有项目逐步迁移到Compose。

五、碰到Compose还不支持的View怎么办?

不少传统视图控件在Compose中没有对应的Composable实现，例如SurfaceView、WebView等。因此在Compose中可能会有使用传统View控件的需求。Compose提供了名为AndroidView的Composable组件，允许在Composable中插入任意基于继承自View的传统视图控件。

例如使用AndroidView在Composable中显示一个WebView：

class MainActivity : ComponentActivity() {
    @SuppressLint("SetJavaScriptEnabled")
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
           AndroidView(factory = { context->   <--------AndroidView
               WebView(context).apply {       <--------WebView
                   settings.javaScriptEnabled = true
                   loadUrl("https://www.baidu.com/")
               }
           },Modifier.fillMaxSize())
        }
    }
}

可以看到Compose并没有完全撇弃View这一套，而是逐步在升级过渡，也让大家使用没有后顾之忧。

为了帮助大家更好的熟知Jetpack Compose 这一套体系的知识点，这里记录比较全比较细致的《Jetpack 入门到精通》(内含Compose) 学习笔记！！！ 对Jetpose Compose这块感兴趣的小伙伴可以参考学习下……

Jetpack 全家桶（Compose）

Jetpack 部分

  1. Jetpack之Lifecycle
  2. Jetpack之ViewModel
  3. Jetpack之DataBinding
  4. Jetpack之Navigation
  5. Jetpack之LiveData

Compose 部分
1.Jetpack Compose入门详解
2.Compose学习笔记
3.Compose 动画使用详解

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/40109.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

K8S集群内部署Rancher2.5.16

K8S集群内部署Rancher2.5.16

K8S集群内部署Rancher2.5.16 一、环境 k8s&#xff1a;1.18.20 OS&#xff1a;Anolis OS 7.9 rancher&#xff1a;2.5.16 参考官网部署文档&#xff1a;https://ranchermanager.docs.rancher.com/zh/v2.6/pages-for-subheaders/install-upgrade-on-a-kubernetes-cluster 二…
阅读更多...
springboot整合feign实现RPC调用，并通过Hystrix实现服务降级

springboot整合feign实现RPC调用，并通过Hystrix实现服务降级

目录 一、服务提供者 二、服务消费者 三、测试效果 四、开启Hystrix实现服务降级 feign/openfeign和dubbo是常用的微服务RPC框架&#xff0c;由于feigin内部已经集成ribbon&#xff0c;自带了负载均衡的功能&#xff0c;当有多个同名的服务注册到注册中心时&#xff0c;会根…
阅读更多...
Linux中常用的指令

Linux中常用的指令

ls ls [选项] [目录或文件] 功能&#xff1a;对于目录&#xff0c;列出该目录下所有的子目录和文件&#xff1b;对于文件&#xff0c;列出该文件的文件名和其他属性 常用选项&#xff1a; -a:列出目录下的所有文件&#xff0c;包括以.开头的隐藏文件 -l:列出文件的详细信息。…
阅读更多...
知识图谱推理的学习逻辑规则（上）7.19+（下）7.20

知识图谱推理的学习逻辑规则（上）7.19+（下）7.20

知识图谱推理的学习逻辑规则 摘要介绍相关工作模型 &#xff08;7.20&#xff09;知识图谱推理逻辑规则概率形式化参数化规则生成器具有逻辑规则的推理预测器 优化E步骤M步骤 实验实验设置实验结果 总结 原文&#xff1a; 摘要 本文研究了在知识图谱上进行推理的学习逻辑规则…
阅读更多...
Git基本操作命令

Git基本操作命令

** 创建仓库 **&#xff0c;用于被git管理 第一步&#xff1a; $ mkdir learngit $ cd learngit $ pwd /Users/michael/learngit第二步&#xff1a; 通过git init命令把这个目录变成Git可以管理的仓库&#xff1a; $ git init** 提交代码 **&#xff1a; 第一步&#xff…
阅读更多...
网络安全在2023好入行吗？

网络安全在2023好入行吗？

前言 023年的今天&#xff0c;慎重进入网安行业吧&#xff0c;目前来说信息安全方向的就业对于学历的容忍度比软件开发要大得多&#xff0c;还有很多高中被挖过来的大佬。 理由很简单&#xff0c;目前来说&#xff0c;信息安全的圈子人少&#xff0c;985、211院校很多都才建…
阅读更多...
Java 中 synchronized 的优化操作：锁升级、锁消除、锁粗化

Java 中 synchronized 的优化操作：锁升级、锁消除、锁粗化

由 并发编程中常见的锁策略 总结可知&#xff0c;synchronized 具有以下几个特性&#xff1a; 开始时是乐观锁&#xff0c;如果锁冲突频繁&#xff0c;就转换为悲观锁。开始是轻量级锁实现&#xff0c;如果锁被持有的时间较长&#xff0c;就转换成重量级锁。实现轻量级锁时&am…
阅读更多...
Raft算法之日志复制

Raft算法之日志复制

Raft算法之日志复制 一、日志复制大致流程 在Leader选举过程中&#xff0c;集群最终会选举出一个Leader节点&#xff0c;而集群中剩余的其他节点将会成为Follower节点。Leader节点除了向Follower节点发送心跳消息&#xff0c;还会处理客户端的请求&#xff0c;并将客户端的更…
阅读更多...
1.Docker概念

1.Docker概念

文章目录 Docker概念Docker容器与虚拟机的区别内核中的2个重要技术Linux Namespace的6大类型docker三个重要概念部署Dockeryum安装二进制安装 Docker 概念 docker是一个开源的应用容器引擎&#xff0c;基于go语言开发并遵循了apache2.0协议开源。docker可以让开发者打包他们的…
阅读更多...
AtcoderABC243场

AtcoderABC243场

A - Shampoo A - Shampoo ] 题目大意 高桥家有三个人&#xff1a;高桥、他的父亲和他的母亲。每个人每晚都在浴室洗头发。他们按照顺序使用AA、BB和CC毫升的洗发水。 问&#xff0c;今天早上瓶子里有VV毫升的洗发水。在不重新装满的情况下&#xff0c;谁会第一个用完洗发水洗头…
阅读更多...
K8s入门

K8s入门

K8s入门 目录 K8s入门namespacepoddeployment多版本扩缩容治愈能力滚动更新版本回退 serviceClusterIPNodePort ingress域名访问路径重写流量限制 存储抽象PV&PVCConfigMapSecret namespace kubectl get ns # 获取命名空间 kubectl create ns 名字 # 创建命名空间 ku…
阅读更多...
学习babylon.js --- [3] 开启https

学习babylon.js --- [3] 开启https

babylonjs提供WebVR功能&#xff0c;但是使用这个功能得用https&#xff0c;本文讲述如何使用自签名证书来开启https&#xff0c;基于第二篇文章中搭建的工程。 一 生成自签名证书 首先要安装openssl&#xff0c;这个去网上搜下就行了。安装完之后在终端下输入openssl回车可以…
阅读更多...
【CNN记录】pytorch中BatchNorm2d

【CNN记录】pytorch中BatchNorm2d

torch.nn.BatchNorm2d(num_features, eps1e-05, momentum0.1, affineTrue, track_running_statsTrue, deviceNone, dtypeNone) 功能&#xff1a;对输入的四维数组进行批量标准化处理&#xff08;归一化&#xff09; 计算公式如下&#xff1a; 对于所有的batch中样本的同一个ch…
阅读更多...
【Spring core学习四】Bean作用域和生命周期

【Spring core学习四】Bean作用域和生命周期

目录 一、Bean的作用域 &#x1f308;1、被修改的Bean值现象 &#x1f308;2、 Bean 的 6 种作⽤域 &#x1f308;3、设置作用域 二、Spring的执行流程 三、Bean的生命周期 &#x1f308;1、Bean生命周期的过程 &#x1f308;2、演示生命周期 一、Bean的作用域 &…
阅读更多...
大华相机接入web页面实现人脸识别

大华相机接入web页面实现人脸识别

先看下效果&#xff0c;中间主视频流就是大华相机&#xff08;视频编码H.264&#xff09;&#xff0c;海康相机&#xff08;视屏编码H.265&#xff09; 前端接入视屏流代码 <!--视频流--><div id"col2"><div class"cell" style"flex: …
阅读更多...
[GXYCTF2019]simple CPP

[GXYCTF2019]simple CPP

前言 三个加密区域&#xff0c;第一次是基本运算&#xff0c;八位叠加&#xff0c;z3方程 分析 第一轮加密&#xff0c;和Dst中模27异或 &#xff08;出题人对动调有很大意见呢&#xff09; 将输入的字符串按八位存入寄存器中&#xff0c;然后将寄存器内容转存到内存 第一次…
阅读更多...
数仓-零基础小白到入土-学习路线

数仓-零基础小白到入土-学习路线

数仓-零基础小白到入土-学习路线 铺垫一下下讲在前面涉及基础技术栈&#xff1a;中级&#xff1a;全部掌握之后&#x1f446;&#xff1a;去刷面试题&#xff1a; 初级中级高级博主独家面试题&#xff1a;数仓名词&#xff1a;催更我戳戳个人主页&#xff1a;[up自己的网站](ht…
阅读更多...
【电路原理学习笔记】第4章：能量与功率：4.5 稳压电源与电池

【电路原理学习笔记】第4章：能量与功率：4.5 稳压电源与电池

第4章&#xff1a;能量与功率 4.5 稳压电源与电池 电网采用交流电形式将电能从发电站传输给用户&#xff0c;这是因为交流电易于转换成适宜传输的高压和终端用户使用的低压。在远距离传输时&#xff0c;采用高电压传输的效率和效益要高得多。对于给定的功率&#xff0c;较高的…
阅读更多...
基于linux下的高并发服务器开发（第一章）- 目录操作函数

基于linux下的高并发服务器开发（第一章）- 目录操作函数

09 / 目录操作函数 &#xff08;1&#xff09;int mkdir(const char* pathname,mode_t mode); #include <sys/stat.h> #include <sys/types.h>int mkdir(const char *pathname, mode_t mode); 作用&#xff1a;创建一个目录 参数&#xff1a; pat…
阅读更多...
【OC总结- Block】

【OC总结- Block】

文章目录 前言2. Block2.1 Block的使用规范2.2 __block修饰符2.3 Block的类型2.4 Block的循环引用及解决循环引用的场景引入解决循环引用Block循环引用场景 2.5 Block的实现及其本质2.5.1 初始化部分2.5.2 调用部分2.5.3 捕获变量 Block本质2.6 Block捕获变量 和 对象2.7 Block…
阅读更多...
最新文章

Copyright @ 2022~2023