Jetpack Compose 是用于構(gòu)建原生 Android 界面的新工具包，無需修改任何 XML 布局，也不需要使用布局編輯器。相反，只需調(diào)用可組合函數(shù)來定義所需的元素，Compose 編譯器即會完成后面的所有工作。

簡而言之，使用Compose，不再需要xml編寫頁面。

---

可組合函數(shù)（Composable function）

Compose是圍繞可組合函數(shù)構(gòu)建的，只需要描述應(yīng)用界面的外觀并提供數(shù)據(jù)依賴，而不必關(guān)注界面的構(gòu)建過程（如初始化元素、將其附加到父項等）。而創(chuàng)建Composable function，只需要添加注解@Composable到函數(shù)名稱前。

首先，我們構(gòu)建創(chuàng)建一個應(yīng)用：ComposeTutorial。在AS中選擇Empty Activity創(chuàng)建。

添加文本元素

class MainActivity : ComponentActivity() {override fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)setContent {//在此處定義布局//此處的Text方法是由Compose界面庫定義的文本Composable functionText("Hello world!")}}
}

setContent塊定義了activity的布局，在此處我們添加了Text即“Hello World!”。

自定義可組合函數(shù)

如果需要將一個函數(shù)轉(zhuǎn)換為Composable function，我們需要添加注解“@Composable”。

修改MainActivity：

class MainActivity : ComponentActivity() {override fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)setContent {MessageCard("Android")//使用我們自定義的Composable function}}
}@Composable//添加注解，使該函數(shù)成為Composable function
fun MessageCard(name: String) {Text(text = "Hello $name!")
}

在AS中預(yù)覽Composable function

借助@Preview注解，可以在AS中預(yù)覽Composable function，無需安裝到設(shè)備或虛擬器中。

唯一要求是該注解不能用于接收參數(shù)的函數(shù)中，因此在MainActivity新增如下函數(shù)：

@Preview
@Composable
fun PreviewMessageCard() {MessageCard("Android")
}

在重新構(gòu)建后，該函數(shù)沒有被調(diào)用，應(yīng)用本身不會改變，但是AS對于所有添加了@Preview注解的界面元素可以進行預(yù)覽，點擊如下兩個按鈕之一即可：

---

布局（Layout）

在此處我們實現(xiàn)一個簡單的聊天界面，顯示發(fā)送者和消息內(nèi)容，點擊消息時可縮放。

添加多個文本

class MainActivity : ComponentActivity() {override fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)setContent {//向Composable function中傳入發(fā)送者名稱和消息內(nèi)容 MessageCard(Message("Android", "Jetpack Compose"))}}
}//新建一個Message類，包含消息發(fā)送者和消息內(nèi)容
data class Message(val author: String, val body: String)@Composable
fun MessageCard(msg: Message) {Text(text = msg.author)Text(text = msg.body)
}@Preview
@Composable
fun PreviewMessageCard() {MessageCard(msg = Message("Lexi", "Hey, take a look at Jetpack Compose, it's great!"))
}

這段代碼會在內(nèi)容視圖中創(chuàng)建兩個文本元素。不過，由于未提供有關(guān)如何排列這兩個文本元素的信息，因此它們會相互重疊，使文本無法閱讀。

使用Column、Row、Box

Column，直譯為“圓柱體、長列”。

使用該函數(shù)修改MessageCard，可以垂直排列元素，使其不再重疊文本。

@Composable
fun MessageCard(msg: Message) {Column {Text(text = msg.author)Text(text = msg.body)}
}

同樣的，可以使用Row函數(shù)水平排列元素，而使用Box函數(shù)可以堆疊元素。

添加圖片元素

使用Resource Manager從照片庫中導(dǎo)入圖片，修改MessageCard：

@Composable
fun MessageCard(msg: Message) {//使用Row方法，水平排列圖片和消息Row {Image(painter = painterResource(R.drawable.profile_picture),contentDescription = "Contact profile picture",)Column {Text(text = msg.author)Text(text = msg.body)}}}

配置布局（Modifier）

使用修飾符（Modifier）實現(xiàn)。

Compose中的每一個組件都具有Modifier屬性，通過他我們可以設(shè)置組件的大小、間距、外觀，甚至添加互動事件，如點擊、觸摸事件。

@Composable
fun MessageCard(msg: Message) {//在消息周圍添加8dp的距離Row(modifier = Modifier.padding(all = 8.dp)) {Image(painter = painterResource(R.drawable.profile_picture),contentDescription = "Contact profile picture",modifier = Modifier//設(shè)置圖片大小.size(40.dp)//將圖片修剪為圓形.clip(CircleShape))//在圖片和消息之間添加一個水平的空間（Spacer），間距為8dpSpacer(modifier = Modifier.width(8.dp))Column {Text(text = msg.author)// 在發(fā)送者和消息內(nèi)容之間添加一個垂直的空間Spacer(modifier = Modifier.height(4.dp))Text(text = msg.body)}}
}

---

Material Design

Compose 旨在支持 Material Design 原則。它的許多界面元素都原生支持 Material Design。

使用

Jetpack Compose 原生提供 Material Design 3 及其界面元素的實現(xiàn)。我們使用 Material Design 樣式改進MessageCard可組合項的外觀。

在創(chuàng)建ComposeTutorial項目時，會同時創(chuàng)建一個名為“ComposeTutorialTheme”的Material主題，和一個來自Material Design 3的“Surface”。我們將用到這兩位來封裝MessageCard函數(shù)。

Material Design是圍繞Color、Typography、Shape來構(gòu)建的，我們將逐一添加這些元素。

修改MainActivity：

class MainActivity : ComponentActivity() {override fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)setContent {//使用ComposeTutorialTheme和Surface封裝MessageCard函數(shù)ComposeTutorialTheme {//將給定的組件或布局填滿父容器的界面Surface(modifier = Modifier.fillMaxSize()) {MessageCard(Message("Android", "Jetpack Compose"))}}}}
}@Preview
@Composable
fun PreviewMessageCard() {//在@Preview中也要封裝，沿用應(yīng)用主題中定義的樣式，保持統(tǒng)一ComposeTutorialTheme {Surface {MessageCard(msg = Message("Lexi", "Take a look at Jetpack Compose, it's great!"))}}
}

顏色

@Composable
fun MessageCard(msg: Message) {Row(modifier = Modifier.padding(all = 8.dp)) {Image(painter = painterResource(R.drawable.profile_picture),contentDescription = null,modifier = Modifier.size(40.dp).clip(CircleShape)//為圖像增加一個圓框.border(1.5.dp, MaterialTheme.colorScheme.primary, CircleShape))Spacer(modifier = Modifier.width(8.dp))Column {Text(text = msg.author,//通過MaterialTheme.colorScheme，使用已封裝主題中的顏色設(shè)置樣式color = MaterialTheme.colorScheme.secondary)Spacer(modifier = Modifier.height(4.dp))Text(text = msg.body)}}
}

Typography（排版）

MaterialTheme?中提供了 Material Typography 樣式，只需將其添加到?Text?可組合項中即可。

@Composable
fun MessageCard(msg: Message) {Row(modifier = Modifier.padding(all = 8.dp)) {Image(painter = painterResource(R.drawable.profile_picture),contentDescription = null,modifier = Modifier.size(40.dp).clip(CircleShape).border(1.5.dp, MaterialTheme.colorScheme.primary, CircleShape))Spacer(modifier = Modifier.width(8.dp))Column {Text(text = msg.author,color = MaterialTheme.colorScheme.secondary,style = MaterialTheme.typography.titleSmall)Spacer(modifier = Modifier.height(4.dp))Text(text = msg.body,style = MaterialTheme.typography.bodyMedium)}}
}

Shape（形狀）

@Composable
fun MessageCard(msg: Message) {Row(modifier = Modifier.padding(all = 8.dp)) {Image(painter = painterResource(R.drawable.profile_picture),contentDescription = null,modifier = Modifier.size(40.dp).clip(CircleShape).border(1.5.dp, MaterialTheme.colorScheme.primary, CircleShape))Spacer(modifier = Modifier.width(8.dp))Column {Text(text = msg.author,color = MaterialTheme.colorScheme.secondary,style = MaterialTheme.typography.titleSmall)Spacer(modifier = Modifier.height(4.dp))//將消息詳情封裝在Surface中，此時可自定義消息詳情的大小、形狀等布局Surface(shape = MaterialTheme.shapes.medium, shadowElevation = 1.dp) {Text(text = msg.body,modifier = Modifier.padding(all = 4.dp),style = MaterialTheme.typography.bodyMedium)}}}
}

啟用深色主題

又稱夜間模式。由于支持Material Design，Jetpack Compose默認能夠處理深色主題。

使用Material Design顏色、文本和背景時，系統(tǒng)會自動適應(yīng)深色背景。

//可以在文件中以單獨函數(shù)的形式創(chuàng)建多個預(yù)覽，也可以向同一個函數(shù)中添加多個注解
@Preview(name = "Light Mode")
@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES,showBackground = true,name = "Dark Mode"
)
@Composable
fun PreviewMessageCard() {ComposeTutorialTheme {Surface {MessageCard(msg = Message("Lexi", "Hey, take a look at Jetpack Compose, it's great!"))}}
}

---

列表和動畫

創(chuàng)建消息列表（LazyColumn、LazyRow）

LazyColumn、LazyRow是Compose常見的兩個組件，他們的優(yōu)點是可以延遲加載。他們只會加載當前可見的列表項，并在滾動時動態(tài)回收其他項，這使得他們適用于展示大量數(shù)據(jù)或無限滾動的列表。

在使用中，會包含一個items子項。他接受LIst作為參數(shù)，并且其lambda會接收到參數(shù)。系統(tǒng)會針對提供的List的每個項調(diào)用此lambda。

@Composable
fun Conversation(messages: List<Message>) {LazyColumn {//items子項items(messages) { message ->MessageCard(message)}}
}@Preview
@Composable
fun PreviewConversation() {ComposeTutorialTheme {Conversation(SampleData.conversationSample)}
}

在展開消息時顯示動畫效果

為了存儲某條消息是否已展開，我們使用remember和mutableStateOf函數(shù)。

可組合函數(shù)可以使用remember將本地狀態(tài)存儲到內(nèi)存中，并跟蹤傳遞給mutableStateOf的值的變化。而mutableStateOf函數(shù)可以在可組合函數(shù)內(nèi)部創(chuàng)建一個可變的狀態(tài)，并將其與UI組件進行綁定。當狀態(tài)值發(fā)生變化時，Compose會自動重繪相關(guān)的組件。

class MainActivity : ComponentActivity() {override fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)setContent {ComposeTutorialTheme {Conversation(SampleData.conversationSample)}}}
}@Composable
fun MessageCard(msg: Message) {Row(modifier = Modifier.padding(all = 8.dp)) {Image(painter = painterResource(R.drawable.profile_picture),contentDescription = null,modifier = Modifier.size(40.dp).clip(CircleShape).border(1.5.dp, MaterialTheme.colorScheme.primary, CircleShape))Spacer(modifier = Modifier.width(8.dp))// 在此變量中，跟蹤當前消息是否展開var isExpanded by remember { mutableStateOf(false) }// 當點擊該消息時，改變展開狀態(tài)Column(modifier = Modifier.clickable { isExpanded = !isExpanded }) {Text(text = msg.author,color = MaterialTheme.colorScheme.secondary,style = MaterialTheme.typography.titleSmall)Spacer(modifier = Modifier.height(4.dp))Surface(shape = MaterialTheme.shapes.medium,shadowElevation = 1.dp,) {Text(text = msg.body,modifier = Modifier.padding(all = 4.dp),// 若展開，全部顯示；不展開，最大顯示一行maxLines = if (isExpanded) Int.MAX_VALUE else 1,style = MaterialTheme.typography.bodyMedium)}}}
}

注：需要添加以下導(dǎo)入內(nèi)容才能正確使用 Kotlin 的委托屬性語法（by?關(guān)鍵字）：
import androidx.compose.runtime.getValue

import androidx.compose.runtime.setValue

使用by關(guān)鍵字是避免每次都訪問value屬性的好方法。

同時需要注意的是，我們應(yīng)該只在可組合函數(shù)的作用域之外改變狀態(tài)。這是因為可組合項可以頻繁運行、且以任何順序執(zhí)行。???????此處我們可以在clickable中修改isExpanded的值，是因為clickable不是可組合函數(shù)。

除了remember關(guān)鍵字，我們還可以使用rememberSaveable，它與前者類似，但存儲的值可以在重新創(chuàng)建activity和進程后保存下來。需要注意的是，rememberSaveable適用于UI狀態(tài)，如購物車的商品數(shù)量或選定的標簽頁，但不適用于過渡動畫狀態(tài)等。

同時我們可以加入顏色，在消息縮放時改變消息的顏色。但不能只是簡單的改變消息的背景顏色，我們應(yīng)當加入動畫，使得變化時逐步更改。

相同的，在點擊縮放時，我們也可以加上動畫，使得縮放更加順滑。

@Composable
fun MessageCard(msg: Message) {Row(modifier = Modifier.padding(all = 8.dp)) {Image(painter = painterResource(R.drawable.profile_picture),contentDescription = null,modifier = Modifier.size(40.dp).clip(CircleShape).border(1.5.dp, MaterialTheme.colorScheme.secondary, CircleShape))Spacer(modifier = Modifier.width(8.dp))var isExpanded by remember { mutableStateOf(false) }// 該變量會逐步更新顏色，animateColorAsState函數(shù)實現(xiàn)顏色之間的過渡動畫效果val surfaceColor by animateColorAsState(if (isExpanded) MaterialTheme.colorScheme.primary else MaterialTheme.colorScheme.surface,)Column(modifier = Modifier.clickable { isExpanded = !isExpanded }) {Text(text = msg.author,color = MaterialTheme.colorScheme.secondary,style = MaterialTheme.typography.titleSmall)Spacer(modifier = Modifier.height(4.dp))Surface(shape = MaterialTheme.shapes.medium,shadowElevation = 1.dp,color = surfaceColor,//加入animateContentSize，給縮放加入動畫，更加順滑modifier = Modifier.animateContentSize().padding(1.dp)) {Text(text = msg.body,modifier = Modifier.padding(all = 4.dp),maxLines = if (isExpanded) Int.MAX_VALUE else 1,style = MaterialTheme.typography.bodyMedium)}}}
}