柚子快報邀請碼778899分享：Android的Compose

http://yzkb.51969.com/

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 function

Text("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），間距為8dp

Spacer(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) {

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

)

}

}

}

}

柚子快報邀請碼778899分享：Android的Compose

http://yzkb.51969.com/

推薦文章