作者：TimeFine

一、為啥學(xué)習(xí)Compose

學(xué)習(xí)Compose一開(kāi)始我是拒絕的，因?yàn)榱?xí)慣改變太大，寫(xiě)xml挺好的為啥要卷Compose？

后來(lái)看了郭霖大佬的文章 寫(xiě)給初學(xué)者的Jetpack Compose教程，為什么要學(xué)習(xí)Compose？ 覺(jué)得大佬說(shuō)的有道理：

1、寫(xiě)xml的方式必然是會(huì)被淘汰的，因?yàn)樗浜罅恕?br> 2、雖然xml中可以用include，但是其實(shí)非常多的組件我們并沒(méi)有復(fù)用，比如14sp的TextView，xml中到處都是，寫(xiě)多了也很煩，而Compose中聲明式UI，控件可以極大的復(fù)用。
3、Compose已經(jīng)趨于穩(wěn)定，是時(shí)候?qū)W習(xí)一下了。
4、本來(lái)想深入Flutter，但發(fā)現(xiàn)招聘網(wǎng)站上招Flutter的太少了，于是目光轉(zhuǎn)向了Compose。

二、第一個(gè)Compose應(yīng)用

Compose導(dǎo)的包比較多，一開(kāi)始建議創(chuàng)建新工程，這樣一步到位簡(jiǎn)單一些，如下：

創(chuàng)建工程的時(shí)候選擇其中一個(gè)，我選擇的是第一個(gè)。

等項(xiàng)目創(chuàng)建好后，可以看到導(dǎo)入了如下的包：

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變量并不是抽出來(lái)的，而是系統(tǒng)自動(dòng)生成的，整個(gè)Android應(yīng)用的環(huán)境如下：

//應(yīng)用的版本
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

為什么把這個(gè)列出來(lái)呢？ 因?yàn)镃ompose、kotlin、Gradle有版本對(duì)應(yīng)關(guān)系（不是必須一一對(duì)應(yīng)），如果碰到新工程編譯報(bào)錯(cuò)，去網(wǎng)上查查它們的版本關(guān)系。

新創(chuàng)建的工程首先映入眼簾的就是MainActivity，它的結(jié)構(gòu)跟傳統(tǒng)項(xiàng)目的結(jié)構(gòu)很不一樣，如下：

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)沒(méi)有了，取而代之的是setContent{}，直呼看不懂......

運(yùn)行程序，界面顯示如下，在左上角顯示了Hello Android!：

三、Compose的MainActivity里面都有什么

1、Compose的UI是kotlin DSL風(fēng)格的

用xml寫(xiě)布局，UI就是一個(gè)個(gè)View組成的，而用Compose寫(xiě)布局，UI都是一個(gè)個(gè)kotlin DSL風(fēng)格的函數(shù)組成的。這一點(diǎn)與之前相比完全顛覆了，需要在思維上做轉(zhuǎn)變。

2、Composable注解

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

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

UI是函數(shù)，普通方法也是函數(shù)，那系統(tǒng)怎么知道哪些函數(shù)是要繪制到頁(yè)面上的UI呢？答案就是添加了@Composable注解的函數(shù)就是需要繪制到界面上的函數(shù)。

3、Composable函數(shù)只能在Composable函數(shù)中調(diào)用

需要注意的是Composable函數(shù)只能在Composable函數(shù)中調(diào)用，還是看上面那段代碼

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

看下Text函數(shù)（相當(dāng)于xml中的TextView）的源碼

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

Text函數(shù)確實(shí)也有@Composable注解。Compose UI組件都是頂級(jí)函數(shù)，可以在任意位置調(diào)用。

既然Composable函數(shù)只能在Composable函數(shù)中調(diào)用，那根Composable在哪里呢？這個(gè)根Composable實(shí)際上就是setContent提供的，看下setContent的源碼：

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

根Composable下面第一個(gè)Composable注解函數(shù)是TestComposeTheme，這個(gè)Theme是Android系統(tǒng)根據(jù)Project工程名稱自動(dòng)生成的，我這個(gè)工程名稱叫TestCompose，所以Theme就叫TestComposeTheme，并不是Android系統(tǒng)提供的Api，它是為界面提供的默認(rèn)主題，內(nèi)部子組件都繼承其主題樣式：

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

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

4、布局的預(yù)覽

Android Studio支持對(duì)Composable組件進(jìn)行預(yù)覽，只需要為希望預(yù)覽的Composable函數(shù)再添加一個(gè)@Preview注解即可。MainActivity的代碼中有一個(gè)DefaultPreview函數(shù)，就是新建工程為我們默認(rèn)添加專門(mén)用來(lái)預(yù)覽的。

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

在傳統(tǒng)項(xiàng)目中只有xml才能預(yù)覽，在Compose項(xiàng)目中MainActivity可以直接預(yù)覽：

在頁(yè)面右上角，點(diǎn)擊Split或Design就可以直接預(yù)覽。

注意：當(dāng)@Composable函數(shù)有參數(shù)且缺少默認(rèn)值時(shí)，無(wú)法預(yù)覽，studio會(huì)報(bào)錯(cuò)。

如果有多個(gè)添加@Preview的Composable，在預(yù)覽面板可以同時(shí)看到它們，這可以帶來(lái)高效的開(kāi)發(fā)體驗(yàn)，比如可以同時(shí)預(yù)覽不同主題、不同分辨率下的顯示效果。@Preview也允許通過(guò)參數(shù)來(lái)設(shè)置這些不同的預(yù)覽效果。以下是Preview注解的部分參數(shù)示例：

//預(yù)覽界面帶有背景色(綠色)
@Preview(showBackground = true, backgroundColor = 0xFF00FF00)

 //設(shè)置預(yù)覽界面大小
@Preview(widthDp = 150, heightDp = 100)

//設(shè)置預(yù)覽中的語(yǔ)言
@Preview(local = "fr-rFR")

//顯示狀態(tài)欄和任務(wù)欄(顯示手機(jī)界面)
@Preview(showSystemUi = true)

//啟動(dòng)夜間模型
@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES)

//Pixel設(shè)備中預(yù)覽
@Preview(device = Devices.PIXEL)   

四、老項(xiàng)目中引入Compose

以MainActivity為例。

1、布局中引入

在xml中的根節(jié)點(diǎn)使用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"           <--------給個(gè)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 {     <--------這里
            //開(kāi)始使用Compose的UI組件
        }
    }
}

2、動(dòng)態(tài)代碼創(chuàng)建ComposeView

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

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        //創(chuàng)建composeView
        val composeView = ComposeView(this).apply {
            setContent {
                //開(kāi)始使用Compose的UI組件
            }
        }
        //設(shè)置composeView
        setContentView(composeView)
    }
}

總結(jié)：可以看出整個(gè)接入過(guò)程非常簡(jiǎn)單，所有Compose代碼邏輯都承載在ComposeView之上，對(duì)原有基于View的代碼侵入極小?？梢源竽憣⒁延许?xiàng)目逐步遷移到Compose。

五、碰到Compose還不支持的View怎么辦?

不少傳統(tǒng)視圖控件在Compose中沒(méi)有對(duì)應(yīng)的Composable實(shí)現(xiàn)，例如SurfaceView、WebView等。因此在Compose中可能會(huì)有使用傳統(tǒng)View控件的需求。Compose提供了名為AndroidView的Composable組件，允許在Composable中插入任意基于繼承自View的傳統(tǒng)視圖控件。

例如使用AndroidView在Composable中顯示一個(gè)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并沒(méi)有完全撇棄View這一套，而是逐步在升級(jí)過(guò)渡，也讓大家使用沒(méi)有后顧之憂。