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

目录

• 概述
• 示例解析
• 1.Icon图标组件
• 2.Image图片组件
• 总结

概述

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

运行结果：

总结

本文主要介绍了Icon图标组件和Image图片组件的使用方法，在开发应用时，读者应该根据自己的应用场景进行选择。写出更好更可读的界面代码。本文介绍的都属于基础知识，若要探究更高深的界面知识，请各位读者继续看后面的文章。

到此这篇关于Jetpack Compose图片组件使用实例详细讲解的文章就介绍到这了,更多相关Jetpack Compose图片组件内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！