JetpackCompose图片组件使用实例详细讲解

2023-05-16 11:18

短信预约 -IT技能 免费直播动态提醒

概述

在Compose中，图片组件主要有两种，分别是显示图标的Icon组件和显示图片的Image组件，当我们显示一系列的小图标的时候，我们可以使用Icon组件，当显示图片时，我们就用专用的Image组件。在Android传统的View中,我们显示图片和图标都是使用ImageView。我个人比较喜欢Compose的这种分开的方式，增加了代码的可读性。

示例解析

1.Icon图标组件

Icon组件用于展示一系列的小图标，它支持三种不同类型的图片设置，分别是：矢量图、位图、自定义绘制的图标

（1）矢量图对象，可以显示SVG格式的图标

@Composable
fun Icon(
    imageVector: ImageVector,
    contentDescription: String?,
    modifier: Modifier = Modifier,
    tint: Color = LocalContentColor.current.copy(alpha = LocalContentAlpha.current)
)

（2）位图对象，可以显示JPG,PNG格式的图标

@Composable
fun Icon(
    bitmap: ImageBitmap,
    contentDescription: String?,
    modifier: Modifier = Modifier,
    tint: Color = LocalContentColor.current.copy(alpha = LocalContentAlpha.current)
)

（3）自定义画笔，可以使用它在canvas上直接绘制图标

@Composable
fun Icon(
    painter: Painter,
    contentDescription: String?,
    modifier: Modifier = Modifier,
    tint: Color = LocalContentColor.current.copy(alpha = LocalContentAlpha.current)
)

当我们使用上面的方法去展示图标时，既可以传递具体类型的实例，也可以通过资源文件（res/drawable …）引用

// 矢量图资源
 Icon(imageVector = ImageVector.vectorResource(id = R.drawable.ic_svg), contentDescription = null)
 // 位图资源
 Icon(bitmap = ImageBitmap.imageResource(id = R.drawable.ic_bmp), contentDescription = null)
 // 画笔资源
 Icon(painter = painterResource(id = R.drawable.ic_both), contentDescription = null)

如上面的代码所示，ImageVector和ImageBitmap都提供了对应的加载drawable资源的方法，vectorResource用来加载一个矢量XML，imageResource用来加载jpg或者时png图片，而painterResource对以上的两种drawable都支持，内部会根据资源创建对应的画笔进行图标的绘制

接下来我们看下使用Icon组件显示一个具体的图标应该怎么写，代码如下：

  @Composable
    fun IconDemo(){
        Icon(imageVector = Icons.Filled.CheckCircle,
            contentDescription = null,
            tint = Color.Red
        )
    }

运行结果：

代码很简单，就展示了一个勾选的图标，这里我们直接使用的时Material包里预置的CheckCircle图标，contentDescription 参数是系统的无障碍功能，这个参数中设置的文字会被转换成语音，供视障人士听取内容，这个参数没有默认值，必须手动设置，Material包里面还提供了很多其他的图标，都可以通过Icons.xxx.xxx的方式调用。

2.Image图片组件

图片组件用来显示一张图片，和Icon图标组件一样，它有三种类型的图片设置，这里我们就以Painter类型的为例，下面为Image组件的Painter类型的参数列表：

@Composable
fun Image(
    painter: Painter,
    contentDescription: String?,
    modifier: Modifier = Modifier,
    alignment: Alignment = Alignment.Center,
    contentScale: ContentScale = ContentScale.Fit,
    alpha: Float = DefaultAlpha,
    colorFilter: ColorFilter? = null
)

contentScale参数用于指定图片在Image组件中的伸缩样式，类似于传统视图ImageView的scaleType属性，它有以下几种类型

ContentScale.Crop: 居中裁剪，类似于传统ImageView的ScaleType.CenterCrop

ContentScale.Fit: 类似于传统ImageView的ScaleType.fitCenter

ContentScale.FillHeight: 充满高

ContentScale.FillWidth: 充满宽

ContentScale.None: 不处理

ContentScale.FillBounds: 类似ScaleType.fitXY拉伸撑满宽高

colorFilter 参数用于设置一个ColorFilter，它可以通过对绘制的图片的每个像素颜色进行修改，以实现不同的图片效果，ColorFilter有三种修改方式，分别是: tint,colorMatrix,lighting.

// tint用BlendMode混合指定颜色，其中参数color将用来混合原图片每个像素的颜色
// 参数blendMode是混合的模式，blendModel有多种混合模式
// 和传统是同中使用的Xfermode的PorterDuff.Model类似
ColorFilter.tint(color: Color, blendMode: BlendMode = BlendMode.class="lazy" data-srcIn)

// colorMatrix通过传入一个RGBA四通道的4x5的数字矩阵去处理颜色的变化
// 比如降低图片的饱和度以达到图片灰化的目的
ColorFilter.colorMatrix(colorMatrix: ColorMatrix)

// lighting用来为图片应用一个简单的灯光效果
// 它由两个参数定义，第一个用于颜色相乘，第二个用于添加原图颜色
ColorFilter.lighting(multiply: Color, add: Color)

最后，我们看下简单的一个使用Image组件展示一张图片的例子

   @Composable
    fun ImageDemo()
    {
        Image(painterResource(id = R.drawable.portrait),
            contentDescription = null,
            contentScale = ContentScale.Crop,
        )
    }

运行结果：