Jetpack：008-Icon与Image

我们在上一章回中介绍了Jetpack中与Button相关的内容，本章回中主要I con与Image。闲话休提，让我们一起Talk Android Jetpack吧！

1. 概念介绍

我们在本章回中介绍的Icon和Image主要用来显示图标和图片，这些都是程序中必不可少的内容。图标通常是小的图片或者矢量图，它通过Icon()可组合函数来实现。

图片通常都是当作背景，它通过可组合函数Image()来实现。图片和图标中显示的资源都位于drawable目录下，此外，图片资源还可以使用网络链接中的图片。不过本章回中先不作介绍。在接下来的小节中我们将详细介绍Icon与Image的使用方法。

2. 使用方法

2.1 Icon

可组合函数Icon()提供了相关的参数来控制自己，下面是常用的参数：

• tint参数：主要用来控制图标的颜色；
• contentDescription参数：主要图标的描述，可以设置为空；
• painter/bitmap/imageVector参数：主要用来存放图标资源；

最后一个参数在功能上相同，不过它的类型不同，而且导致Icon()函数也不同,因此有三种重载函数。如果是drawable中的资源通常使用painter,如果是bitmap通常使用bitmap(比如把文件中的图片转换成bitmap后再显示)，如果是矢量图通常使用imageVector。

2.2 Image

可组合函数Image()提供了相关的参数来控制自己，下面是常用的参数：

• contentDescription参数：主要图标的描述，可以设置为空；
• alignment参数：主要用来控制图片的对齐方式；
• contentScale参数：主要用来控制图片的填充方式；
• alpha参数：主要用来控制图片的透明度；
• colorFilter参数：主要用来控制图片的混合颜色；
• painter/bitmap/imageVector参数：主要用来存放图片资源；

关于contentScale参数所代码的图片填充方式，可以参考官方文档，文档中介绍了所有的填充方式并且配合有效果图。

最后一个参数的类型和Icon中同名参数和类型一样，它也会导致Iamge()函数的类型不同,因此有三种重载函数。详细用法参数Icon中的介绍。

3. 示例代码

//图标
Icon(
    //控制icon的颜色
    tint = Color.Blue,
    imageVector = Icons.Default.FavoriteBorder,
    contentDescription = null)

//图片
Image(
    painter = painterResource(id = R.drawable.ic_logo),
    contentDescription = null,
    //图片填充方式,推荐Fit
    contentScale = ContentScale.FillBounds,
)

//图片剪裁为圆形，用来创建头像时使用
Image(
    modifier = Modifier
        .size(100.dp)
        .clip(CircleShape),
    painter = painterResource(id = R.drawable.ic_logo),
    contentDescription = null,
    //图片填充方式,推荐Fit
    contentScale = ContentScale.FillBounds,
)

//图片剪裁为圆角矩形
Image(
    modifier = Modifier
        .size(100.dp)
        .clip(RoundedCornerShape(16.dp))
        .aspectRatio(16f / 9f),
    painter = painterResource(id = R.drawable.ic_logo),
    contentDescription = null,
    //图片填充方式,推荐Fit
    contentScale = ContentScale.FillBounds,
)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

我们在上面的代码中演示了Icon的用法，代码中的图标来自SDK自带的图标，我们将其从默认的黑色修改为蓝色。

Image的演示代码包含三个类型，一个是正常的图片显示，另外两个使用修饰器和contentScale参数对图片进行了剪裁，进而实现了圆形头像和圆角矩形的效果，下面是程序的运行效果图。

4. 内容总结

最后，我们对本章回中的内容做一个全面的总结：

• 图标和图片通过可组合函数Icon和Iamge实现，它们的用法类似；
• 图标或者图片的类型不同，使用的可组合函数也不同，一共有三种可组合函数；
• 显示图片时可以通过参数对图片进行剪裁或者渲染，进而实现不同的图片显示效果；

看官们，关于Jetpack中Icon与Image组件相关的内容就介绍到这里，欢迎大家在评论区交流与讨论！