Android全新UI编程 - Jetpack Compose 超详细教程

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

1. 简介

Jetpack Compose是谷歌在2019Google i/o大会上发布的新的库。可以用更少更直观的代码创建View，还有更强大的功能，以及还能提高开发速度。

第一篇文章在这里：
Android全新UI编程 - Jetpack Compose 超详细教程 第1弹

实在抱歉，最近忙着换工作，让大家久等了。

上一篇我们讲了关于@Compose方法，@Preview，*Theme，Modifier等的使用方法，
这一篇我会介绍关于Text，Image，Button，Spacer组件的使用。
好了，咱开始吧。

2. 教程

2.1 Text

2.1.1 可设置参数

Text就是之前一直使用的TextView。 Text也是@Compose注解的方法，所以也需要在@Compose方法中调用。可设置的常用参数如下。

• text : String:
  设置所需要显示的文字。

• modifier : Modifier:
  设置关于Text位置信息的Modifier。关于Modifier的使用方法查看第一篇。

• color : Color:
  默认是Color.Unset。可以创建Color对象，Color(0xFF000000)。也可以直接使用默认已预置的颜色，如Color.Black。

• fontSize : TextUnit:
  设置文字的大小，默认是TextUnit.Inherit,可以用TextUnit.Sp(10)方式设置。

• fontStyle : FontStyle:
  设置字体类型，默认是null。可以设置正常字体FontSytle.Normal和斜体FontStyle.Italic。

• letterSpacing : TextUnit:
  设置字符间距，默认是TextUnit.Inherit，可以用TextUnit.Sp(10)方式设置。

• textDecoration : TextDecoration:
  设置删除线和下划线，默认是null。删除线TextDecoration.LineThrough,下划线TextDecoration.UnderLine,没有任何装饰TextDecoration.None。

• textAlign : TextAlign:
  设置文本对齐方式，默认是null。左对齐TextAlign.Left,右对齐TextAlign.Right,中间对齐TextAlign.Center,拉伸填充整个容器TextAlign.Justify,还有TextAlign.Start和TextAlign.End就不解释了。

• style : TextStyle :
  设置TextStyle，默认是currentTextStyle()。关于TextStyle以后再讲。

• maxLine : :Int:
  设置Text最大行数，默认是Int.MAX_VALUE。

• onTextLayout : (TextLayoutResult) -> Unit:
  设置一个回调，当新的Text Layout已经被计算出来，就会执行这个回调。

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
            )
复制代码

2.2 Button

2.2.1 可设置参数

Buton就是之前一直使用的ButtonView。 Buttom也是@Compose注解的方法。常用的设置参数如下。

• onClick : () -> Unit:
  当按钮被点击时，会被调用。

• modifier : Modifier:
  设置关于Text位置信息的Modifier。关于Modifier的使用方法查看第一篇。

• enabled : Boolean:
  设置按钮的有效性，默认是true。

• elevation : Dp:
  调整按钮在Z轴方向上的高度，默认是2.dp。

• disabledElevation : Dp:
  调整按钮无效时在Z轴方向上的高度，默认是0.dp。

• shape : Shape:
  调整按钮的样子，默认是MaterialTheme.shapes.small。可设置的样子如下。
  RoundedCornerShape: 设置圆角矩形的样式，下图是RoundedCornerShape(30)时的样子。

CircleShape: 可设置圆形的样式，它是系统为我们提前预设的RoundedCornerShape(50)时的特殊样子。

CutCornerShape: 可设置切角样式，下图是CutCornerShape(30)是的样子。

• border : Border:
  设置按钮的外边框，默认是null。
  Border的构造器一共有两种,一种是Border(size: Dp, color: Color),另一种是Border(size: Dp, brush: Brush)。
  在这里只介绍第一种，第二种的主要用途是自己创建一个笔刷，去绘制外边框。比如想实现渐变色的外边框的时候就可以使用第二种方法。
  当Border(3.dp, Color.Blue)的样子如下。
  

• backgroundColor : Color:
  设置按钮的背景颜色，默认是MaterialTheme.colors.primary。

• disabledBackgroundColor : Color:
  设置当按钮无效时的背景颜色，默认是Button.defaultDisabledBackgroundColor。

• contentColor : Color:
  设置按钮的内容颜色，上面一系列的示例图中有黄色Android字就是因为设置了contentColor为黄色。

• disabledContentColor : Color:
  设置当按钮无效时的内容颜色。

• padding : InnerPadding:
  设置按钮的InnerPadding, 使用方法如下。
  padding = InnerPadding(start = 1.dp, top = 2.dp, end = 3.dp, bottom = 4.dp)

• text : @Composable () -> Unit:
  设置Button内的布局，需要传入@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)
            )
复制代码

2.2.3 OutlinedButton

OutlinedButton是特殊的Button, 是有外边框的按钮。设置方法跟上述一致。

2.2.4 TextButton

TextButton是特殊的Button, 是有外边框的按钮。设置方法跟上述一致。

2.3 Image

2.3.1 可设置参数

Image就是之前一直使用的ImageView。 Image也是@Compose注解的方法。常用的设置参数如下。

• asset : VectorAsset
  需要传入用来显示图片的VetorAsset。也可以传入库本本身自带的Icon，Icons.Filled.Home。

• modifier : Modifier
  设置关于Text位置信息的Modifier。关于Modifier的使用方法查看第一篇。

• aligment : Aligment
  需传入Alignment.Vertical，为Column传入Alignment.Horizontal。

• contentScale : ContentScale
  这里是需要设置图片的显示模式，默认是ContentScale.Inside。详细介绍如下。
  ContentScale.Inside:
  如果图片大于设置的图片显示区域，则会按比例缩小，如果是小于则不进行任何操作。
  ContentScale.Crop:
  保持长宽比的情况下，按比例缩小或放大使图片大于等于图片的显示区域，使显示区域全部显示图片。
  ContentScale.Fit:
  保持长宽比的情况下，按比例缩小或放大使图片小于等于图片的显示区域。
  ContentScale.FillHeight:
  保持长宽比的情况下，使图片的高度等于图片显示区域的高度。
  ContentScale.FillWidth:
  保持长宽比的情况下，使图片的长度等于图片显示区域的长度。

• alpha : Float
  设置透明度，默认是1.0f。

• colorFilter : ColorFilter
  可以设置颜色滤镜，这里就不具体展开了。

除了第一参数asset : VectorAsset以外，作为代替还可以设置ImageAsset或者Painter。 要传入VectorAsset对象时可以使用vectorResource(resoureceId)方法来传入文件。
同理，要传入ImageAsset对象时可以使用imageResource(resoureceId)方法来传入文件。 Painter就不展开介绍了。

2.3.2 示例

Image(
    asset = vectorResource(id = R.drawable.ic_mllogosvg), 
    modifier = Modifier.ltr.padding(10.dp),
    alignment = Alignment.Center
    )
复制代码

2.4 Spacer

Spacer就是之前一直使用的Space。Spacer也是@Compose注解的方法。需要显示空白区域时，可以使用Spacer。

2.4.1 可设置参数

• modifier : Modifier
  设置关于Text位置信息的Modifier。关于Modifier的使用方法查看第一篇。

2.4.2 示例

Spacer(Modifier.preferredWidth(16.dp))
复制代码

最后

整理了一份《compose 完全开发手册》详细文档可以点我下载，记得点赞哦~