Jetpack Compose图片组件如何使用

本文小编为大家详细介绍“Jetpack Compose图片组件如何使用”，内容详细，步骤清晰，细节处理妥当，希望这篇“Jetpack Compose图片组件如何使用”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

概述

在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.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,
        )
    }

读到这里，这篇“Jetpack Compose图片组件如何使用”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注亿速云行业资讯频道。