Android全新UI編程 - Jetpack Compose 超詳細(xì)教程

作者：HyejeanMOON
鏈接：https://juejin.im/post/6858515425706115085

1. 簡介

Jetpack Compose是谷歌在2019Google i/o大會上發(fā)布的新的庫驹溃⊥课冢可以用更少更直觀的代碼創(chuàng)建View则剃，還有更強(qiáng)大的功能挑胸，以及還能提高開發(fā)速度熟吏。

第一篇文章在這里：
Android全新UI編程 - Jetpack Compose 超詳細(xì)教程第1彈

實(shí)在抱歉呜笑，最近忙著換工作颓芭，讓大家久等了横侦。

上一篇我們講了關(guān)于@Compose方法挥萌，@Preview，*Theme枉侧，Modifier等的使用方法引瀑，
這一篇我會介紹關(guān)于Text，Image榨馁，Button憨栽，Spacer組件的使用。
好了翼虫，咱開始吧屑柔。

2. 教程

2.1 Text

2.1.1 可設(shè)置參數(shù)

Text就是之前一直使用的TextView。 Text也是@Compose注解的方法珍剑，所以也需要在@Compose方法中調(diào)用掸宛。可設(shè)置的常用參數(shù)如下招拙。

text : String:
設(shè)置所需要顯示的文字唧瘾。
modifier : Modifier:
設(shè)置關(guān)于Text位置信息的Modifier。關(guān)于Modifier的使用方法查看第一篇别凤。
color : Color:
默認(rèn)是Color.Unset饰序。可以創(chuàng)建Color對象规哪，Color(0xFF000000)求豫。也可以直接使用默認(rèn)已預(yù)置的顏色，如Color.Black。
fontSize : TextUnit:
設(shè)置文字的大小注祖，默認(rèn)是TextUnit.Inherit,可以用TextUnit.Sp(10)方式設(shè)置猾蒂。
fontStyle : FontStyle:
設(shè)置字體類型均唉，默認(rèn)是null是晨。可以設(shè)置正常字體FontSytle.Normal和斜體FontStyle.Italic舔箭。
letterSpacing : TextUnit:
設(shè)置字符間距罩缴，默認(rèn)是TextUnit.Inherit，可以用TextUnit.Sp(10)方式設(shè)置层扶。
textDecoration : TextDecoration:
設(shè)置刪除線和下劃線箫章，默認(rèn)是null。刪除線TextDecoration.LineThrough,下劃線TextDecoration.UnderLine,沒有任何裝飾TextDecoration.None镜会。
textAlign : TextAlign:
設(shè)置文本對齊方式檬寂，默認(rèn)是null。左對齊TextAlign.Left,右對齊TextAlign.Right,中間對齊TextAlign.Center,拉伸填充整個(gè)容器TextAlign.Justify,還有TextAlign.Start和TextAlign.End就不解釋了戳表。
style : TextStyle :
設(shè)置TextStyle桶至，默認(rèn)是currentTextStyle()。關(guān)于TextStyle以后再講匾旭。
maxLine : :Int:
設(shè)置Text最大行數(shù)镣屹，默認(rèn)是Int.MAX_VALUE。
onTextLayout : (TextLayoutResult) -> Unit:
設(shè)置一個(gè)回調(diào)价涝，當(dāng)新的Text Layout已經(jīng)被計(jì)算出來女蜈，就會執(zhí)行這個(gè)回調(diào)。

2.1.2 示例

            Text(
                text = "Hello $name!",
                modifier = Modifier.padding(10.dp).gravity(Alignment.CenterVertically),
                color = Color.Blue,
                textAlign = TextAlign.End,
                textDecoration = TextDecoration.LineThrough,
                onTextLayout = {},
                fontStyle = FontStyle.Italic,
                maxLines = 1
            )
復(fù)制代碼

2.2 Button

2.2.1 可設(shè)置參數(shù)

Buton就是之前一直使用的ButtonView色瘩。 Buttom也是@Compose注解的方法伪窖。常用的設(shè)置參數(shù)如下。

onClick : () -> Unit:
當(dāng)按鈕被點(diǎn)擊時(shí)居兆，會被調(diào)用覆山。
modifier : Modifier:
設(shè)置關(guān)于Text位置信息的Modifier。關(guān)于Modifier的使用方法查看第一篇史辙。
enabled : Boolean:
設(shè)置按鈕的有效性汹买，默認(rèn)是true。
elevation : Dp:
調(diào)整按鈕在Z軸方向上的高度聊倔，默認(rèn)是2.dp晦毙。
disabledElevation : Dp:
調(diào)整按鈕無效時(shí)在Z軸方向上的高度，默認(rèn)是0.dp耙蔑。
shape : Shape:
調(diào)整按鈕的樣子见妒，默認(rèn)是MaterialTheme.shapes.small〉槟埃可設(shè)置的樣子如下须揣。
RoundedCornerShape: 設(shè)置圓角矩形的樣式盐股，下圖是RoundedCornerShape(30)時(shí)的樣子。

CircleShape: 可設(shè)置圓形的樣式耻卡，它是系統(tǒng)為我們提前預(yù)設(shè)的RoundedCornerShape(50)時(shí)的特殊樣子疯汁。

CutCornerShape: 可設(shè)置切角樣式，下圖是CutCornerShape(30)是的樣子卵酪。

border : Border:
設(shè)置按鈕的外邊框幌蚊，默認(rèn)是null。
Border的構(gòu)造器一共有兩種,一種是Border(size: Dp, color: Color),另一種是Border(size: Dp, brush: Brush)溃卡。
在這里只介紹第一種溢豆，第二種的主要用途是自己創(chuàng)建一個(gè)筆刷，去繪制外邊框瘸羡。比如想實(shí)現(xiàn)漸變色的外邊框的時(shí)候就可以使用第二種方法漩仙。
當(dāng)Border(3.dp, Color.Blue)的樣子如下。
backgroundColor : Color:
設(shè)置按鈕的背景顏色犹赖，默認(rèn)是MaterialTheme.colors.primary队他。
disabledBackgroundColor : Color:
設(shè)置當(dāng)按鈕無效時(shí)的背景顏色，默認(rèn)是Button.defaultDisabledBackgroundColor冷尉。
contentColor : Color:
設(shè)置按鈕的內(nèi)容顏色漱挎，上面一系列的示例圖中有黃色Android字就是因?yàn)樵O(shè)置了contentColor為黃色。
disabledContentColor : Color:
設(shè)置當(dāng)按鈕無效時(shí)的內(nèi)容顏色雀哨。
padding : InnerPadding:
設(shè)置按鈕的InnerPadding, 使用方法如下磕谅。
padding = InnerPadding(start = 1.dp, top = 2.dp, end = 3.dp, bottom = 4.dp)
text : @Composable () -> Unit:
設(shè)置Button內(nèi)的布局，需要傳入@Compose方法雾棺。

2.2.2 示例

            Button(
                text = { Text(text = name) },
                onClick = {},
                modifier = Modifier.padding(12.dp),
                backgroundColor = Color.Green,
                contentColor = Color.Yellow,
                elevation = 10.dp,
                border = Border(2.dp, Color.Red)
            )
復(fù)制代碼

2.2.3 OutlinedButton

OutlinedButton是特殊的Button, 是有外邊框的按鈕膊夹。設(shè)置方法跟上述一致。

2.2.4 TextButton

TextButton是特殊的Button, 是有外邊框的按鈕捌浩。設(shè)置方法跟上述一致放刨。

2.3 Image

2.3.1 可設(shè)置參數(shù)

Image就是之前一直使用的ImageView。 Image也是@Compose注解的方法尸饺。常用的設(shè)置參數(shù)如下进统。

asset : VectorAsset
需要傳入用來顯示圖片的VetorAsset。也可以傳入庫本本身自帶的Icon浪听，Icons.Filled.Home螟碎。
modifier : Modifier
設(shè)置關(guān)于Text位置信息的Modifier。關(guān)于Modifier的使用方法查看第一篇迹栓。
aligment : Aligment
需傳入Alignment.Vertical掉分，為Column傳入Alignment.Horizontal。
contentScale : ContentScale
這里是需要設(shè)置圖片的顯示模式，默認(rèn)是ContentScale.Inside酥郭。詳細(xì)介紹如下华坦。
ContentScale.Inside:
如果圖片大于設(shè)置的圖片顯示區(qū)域，則會按比例縮小不从，如果是小于則不進(jìn)行任何操作惜姐。
ContentScale.Crop:
保持長寬比的情況下，按比例縮小或放大使圖片大于等于圖片的顯示區(qū)域消返，使顯示區(qū)域全部顯示圖片载弄。
ContentScale.Fit:
保持長寬比的情況下，按比例縮小或放大使圖片小于等于圖片的顯示區(qū)域撵颊。
ContentScale.FillHeight:
保持長寬比的情況下，使圖片的高度等于圖片顯示區(qū)域的高度惫叛。
ContentScale.FillWidth:
保持長寬比的情況下倡勇，使圖片的長度等于圖片顯示區(qū)域的長度。
alpha : Float
設(shè)置透明度嘉涌，默認(rèn)是1.0f妻熊。
colorFilter : ColorFilter
可以設(shè)置顏色濾鏡，這里就不具體展開了仑最。

除了第一參數(shù)asset : VectorAsset以外扔役，作為代替還可以設(shè)置ImageAsset或者Painter。要傳入VectorAsset對象時(shí)可以使用vectorResource(resoureceId)方法來傳入文件警医。
同理亿胸，要傳入ImageAsset對象時(shí)可以使用imageResource(resoureceId)方法來傳入文件。 Painter就不展開介紹了预皇。

2.3.2 示例

Image(
    asset = vectorResource(id = R.drawable.ic_mllogosvg), 
    modifier = Modifier.ltr.padding(10.dp),
    alignment = Alignment.Center
    )
復(fù)制代碼

2.4 Spacer

Spacer就是之前一直使用的Space侈玄。Spacer也是@Compose注解的方法。需要顯示空白區(qū)域時(shí)吟温，可以使用Spacer序仙。

2.4.1 可設(shè)置參數(shù)

modifier : Modifier
設(shè)置關(guān)于Text位置信息的Modifier。關(guān)于Modifier的使用方法查看第一篇鲁豪。

2.4.2 示例

Spacer(Modifier.preferredWidth(16.dp))
復(fù)制代碼

最后

整理了一份《compose 完全開發(fā)手冊》詳細(xì)文檔可以點(diǎn)我下載潘悼，記得點(diǎn)贊哦~