frontpage做视频网站网站页面框架设计影响用户
文章目录
- 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,//图片填充方式,推荐FitcontentScale = ContentScale.FillBounds,
)//图片剪裁为圆形，用来创建头像时使用
Image(modifier = Modifier.size(100.dp).clip(CircleShape),painter = painterResource(id = R.drawable.ic_logo),contentDescription = null,//图片填充方式,推荐FitcontentScale = ContentScale.FillBounds,
)//图片剪裁为圆角矩形
Image(modifier = Modifier.size(100.dp).clip(RoundedCornerShape(16.dp)).aspectRatio(16f / 9f),painter = painterResource(id = R.drawable.ic_logo),contentDescription = null,//图片填充方式,推荐FitcontentScale = ContentScale.FillBounds,
)
我们在上面的代码中演示了Icon的用法，代码中的图标来自SDK自带的图标，我们将其从默认的黑色修改为蓝色。
Image的演示代码包含三个类型，一个是正常的图片显示，另外两个使用修饰器和contentScale参数对图片进行了剪裁，进而实现了圆形头像和圆角矩形的效果，下面是程序的运行效果图。
4. 内容总结
最后，我们对本章回中的内容做一个全面的总结：
- 图标和图片通过可组合函数Icon和Iamge实现，它们的用法类似；
- 图标或者图片的类型不同，使用的可组合函数也不同，一共有三种可组合函数；
- 显示图片时可以通过参数对图片进行剪裁或者渲染，进而实现不同的图片显示效果；
看官们，关于Jetpack中Icon与Image组件相关的内容就介绍到这里，欢迎大家在评论区交流与讨论！