阅读 4262

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

0. 注意

这篇文章是参照了比较老的API,所以不推荐大家再阅读了。
最新的文章在这里:juejin.cn/post/695495…

1. 简介

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

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

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

上一篇我们讲了关于@Compose方法,@Preview*ThemeModifier等的使用方法,
这一篇我会介绍关于TextImageButtonSpacer组件的使用。
好了,咱开始吧。

2. 教程

2.1 Text

2.1.1 可设置参数

Text就是之前一直使用的TextViewText也是@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.StartTextAlign.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就是之前一直使用的ButtonViewButtom也是@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就是之前一直使用的ImageViewImage也是@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就是之前一直使用的SpaceSpacer也是@Compose注解的方法。需要显示空白区域时,可以使用Spacer

2.4.1 可设置参数

  • modifier : Modifier

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

2.4.2 示例

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

3.其他

一直很想快点把第二篇写出来,但是最近实在太忙了,所以耽搁了很久,抱歉抱歉。

第一篇和第二篇都是关于组件的介绍,可能会比较枯燥无聊。
希望大家能坚持住,下一篇想讲一讲关于在Jetpack Compose中RecyclerView的“使用”,可能会稍微有趣一点。

Jetpack Compose官网
JetpackComposeDemo Github

Android全新UI编程 - Jetpack Compose 超详细教程:
第一弹
第二弹
第三弹

其他教程:
神一样的存在,Dagger Hilt !!
Android10的分区存储机制(Scoped Storage)适配教程
Android Jetpack Room的详细教程
Android的属性动画(Property Animation)详细教程
Android ConstraintLayout的易懂教程
Google的MergeAdapter的使用
Paging在Android中的应用
Android UI测试之Espresso
Android WorkManager的使用

文章分类
Android
文章标签