Jetpack：008-Icon与Image

news2024/11/18 20:30:40

文章目录

1. 概念介绍
2. 使用方法
- 2.1 Icon
- 2.2 Image
3. 示例代码
4. 内容总结

我们在上一章回中介绍了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,
)