Android Compose 02 基础控件

前言

　　在控件这一块Compose和Android view的区别其实不是很大，Android view所拥有的原生控件大部分Compose中都有所对应的控件。而且Compose还提供更加方便修改控件的方法，避免了Android view中某些与原生效果稍微不同却要重写控件的局面。

　　接下来介绍的控件名称后面的括号是这个Compose控件所对应的Android view控件，或具有相似功能的控件的名称。

基本控件介绍

文本(TextView)

在Compose中对应Android view的Textview的控件便是Text，创建一个文本框我们只需要调用Text()函数即可，因为Compose中所有控件在本质上都是一个函数。Text控件必传的参数是text即我们想要Text显示的文字，如下图所示，我们可以创建一个简单的文本框

image-20220815183205722

当然和Android view中的Textview一样，我们可以为他设置字体大小，字体颜色等等。如下图所示，我们可以创建一个字体颜色为红色，字体大小为20sp，粗体的文本框

image-20220815183634853

还有其他的一些属性，例如文字对齐方式、字体等等这里就不一一赘述了。

图片(ImageView)

Image是Compose版的ImageView组件，用于加载图片资源。和原生的AndroidView一致，原生的Compose Image组件只能加载静态的本地图片，要从网络上加载图片的话需要使用其他的第三方库。

与AndroidView中的ImageView不同的是，Image控件不止需要传入一张图片，其必传参数中还有一项ContentDescription，这个参数用于帮助视觉障碍用户理解图片的内容，一般传入一个字符串用于描述图片内容。如下图所示，可以创建一个最简单的Image组件：

image-20220816185946959

其中painter参数当要使用本地的图片时可以使用painterResource，这个用法和Android View ImageView的src用法类似，只需要传入一个图片的资源编号即可。当然painter参数不止可以传入painterResource还可以传入其他例如VectorPainter等，这里不做其他用法的赘述。

Image组件还有一些其他的参数，例如：

  • aligin参数用于修改图片的位置，有时候图片不一定占满其占位符可以利用这个参数修改对齐方式。

  • contentScale参数类似于ImageView的scaleType用于确定图片的缩放方式

  • alpha参数可以快速的调节图片的不透明度，传入的参数是一个浮点数

  • colorFilter参数可以用于快速调整图片的着色，不同状态下的图标颜色可以使用同一个图片资源只要传入不同的过滤器着色即可，例如：

    image-20220824183536912

    但需要注意的是，这个着色器只是进行单纯的着色操作，不能对图片的细节进行保留，例如原图中的浅色条纹在着色红色后就消失了，所以推荐在单一颜色的图标中使用。

按钮(Button/ImageButton)

在Compose控件中，Button一个便替代了AndroidView中Button和ImageButton甚至更多自定义Button。在Compose中Button的必传参数包括一个点击回调和其中包含的控件，重点在于后面这个包含的控件因为Compose嵌套定义组件的方式，只要传入给Button的控件不同便可以实现不同效果的Button。下图是一个最简单的Button，不包含任何其他的控件

image-20220824184707148

这个简单的按钮不包括任何文字、图片，仅仅只是一个背景色。onClick参数即Button的点击回调，当点击Button后便会执行其中的方法。content参数即ComposeButton最为方便的设计，通过传入不同的Compose组件可以变成不同类型的Button，这种设计思想被称为Slot设计即槽式设计，在设计时留下槽位方便后序复用的时候拓展。

下面展示最简单的AndroidViewButton 以及 ImageButton的实现：

image-20220824185523468 Android View Button实现方式
image-20220824185724835 Android View ImageButton实现方式
除了上述比较简单的Button配置，Button中可以调整的参数还有很多
image-20220829181328025
  • enabled 可以设置这个按钮的可用状态即可点击状态
  • elevation 可以设置按钮的阴影大小，包括不同状态下的阴影大小
    • default 默认状态
    • pressed 按下状态
    • disabled 不可用状态
    • hovered 悬浮状态
    • focused 聚焦状态
  • shape 可以设置按钮的形状compose中内置的形状有:矩形(RectangleShape)、圆角(RoundedCornerShape)、圆形(CircleShape) 其中圆角可以单独设置四个圆角不同的圆角大小
  • colors 可以设置按钮的颜色，包括不同位置的颜色

输入框(EditText/TextField)

在compose中TextField控件可以实现AndroidView中的输入框，包括EditText和TextField。在compose中TextField控件包含的功能很多，所以看起来会比别的控件复杂很多，但也是因为其功能很多所以可以帮助我们减少很多的代码量。

image-20220829185218901

由于TextField控件包含较多与**Compose状态(States)**相关的用法，这里先跳过不讲。简单的用法如上图所示，这样子可以实现一个可输入的控件。

后记

熟练运用Compose可以快速完成一些以前View需要结合代码逻辑一起实现的功能，唯一的问题是使用习惯View后突然改变到Compose开发会略觉得不适，但是只要熟练了这种开发方式，开发速度那是杠杠快！

赏

初めて会ったの日から　僕の心の全てを奪った