Jetpack Compose

Jetpack Compose环境准备

Android studio对Jetpack Compose有着很好的支持，我们需要下载最新AS的预览版的Canany版本，下载地址如下：

https://developer.android.com/studio/preview?hl=zh-cn

 创建一个Jetpack Compose项目

最新的预览版的AS提供了具有Compose的创建模板，按照下面的步骤就可以创建了：

1. 如果你在Android Studio的欢迎窗口，点击 Start a new Android Studio project，如果你已经打开了Android Studio 项目，则在顶部菜单栏选择 File > New > New Project
2. 在 Select a Project Template 窗口，选择 Empty Compose Activity 并且点击下一步
3. 在Configure your project 窗口，做如下几步：
   • a. 设置项目名称, 包名和保存位置
   • b. 注意，在语言下来菜单中，Kotlin 是唯一一个可选项，因为Jetpack Compose 只能用Kotlin来写的才能运行。
   • c. Minimum API level 下拉菜单中，选择21或者更高
4. 点击 Finish

 创建成功一个基本项目工程，可以发现有一个MainActivity.kt文件，文件中的基本内容如下：

class MainActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {

        super.onCreate(savedInstanceState)

        setContent {

            Surface(color = MaterialTheme.colors.background) {

                Greeting("Android")

            }

        }

    }

}

@Composable

fun Greeting(name: String) {

    Text(text = "Hello $name!")

}

@Preview(showBackground = true)

@Composable

fun DefaultPreview() {

     Greeting("Android")

}

带有@Compose注解的函数被称为可组合函数，用来展示用户界面。该函数不具有返回值，因为它描述所需的屏幕状态。Greeting()函数会根据传入的String数据来在屏幕上展示一条文本信息。

其中我们也可以观察到，setContent（）不再是传入View或者Layout，而是一系列组合函数也就是Compose函数。而这类用于界面展示的Compose函数一般来说首字母会大写。

所有关于构建View的方法都必须添加@Compose的注解才可以。并且@Compose跟协程的Suspend的使用方法比较类似,被@Compose的注解的方法只能在同样被@Compose注解的方法中才能被调用。

@Preview注释可以在向预览界面中添加一个预览，在不进行项目部署的情况下，可以实时预览界面信息。同时，我们也可以定义多个预览界面。

@Preview的注解中比较常用的参数如下：

1. name:String: 为该Preview命名，该名字会在布局预览中显示。
2. showBackground:Boolean：是否显示背景，true为显示。
3. backgroundColor:Long： 设置背景的颜色。
4. showDecoration:Boolean：是否显示Statusbar和Toolbar，true为显示。
5. group:String：为该Preview设置group名字，可以在UI中以group为单位显示。
6. fontScale:Float:：可以在预览中对字体放大，范围是从0.01。
7. widthDp:Int：在Compose中渲染的最大宽度，单位为dp。
8. heightDp:Int：在Compose中渲染的最大高度，单位为dp。

基本语法

接下来介绍一些常见的Compose组合项的基本用法。

Text

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)方式设置，也可以使用10.sp。

• 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已经被计算出来，就会执行这个回调。

示例：

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

    )

Button

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

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

• modifier : Modifier → 设置关于Text位置信息的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方法。

示例：

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)

      )

Image

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

• painter: painterResource → 需要传入用来显示图片的资源。也可以传入库本本身自带的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就不展开介绍了。

示例：

Image(

        painter = painterResource(R.drawable.ic_launcher_background),

        contentDescription = null,

        modifier = Modifier.padding(10.dp),

        alignment = Alignment.Center

    )

布局介绍文档地址如下：

https://developer.android.com/jetpack/compose/layout?hl=zh-cn