Jetpack Compose(一)-学习Compose前的准备

一、为啥学习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这一套，而是逐渐在晋级过渡，也让我们使用没有后顾之虑。

学习笔记

初学Compose，如有错误欢迎批评指正。

学习资料如下：
Jetpack Compose博物馆

实体书 Jetpack Compose从入门到实战