物流公司网站设计,毕业设计代做网站唯一,浙江信息港网,Wordpress动图主题文章目录 1. 概念介绍2. 使用方法2.1 Icon2.2 Image 3. 示例代码4. 内容总结 我们在上一章回中介绍了Jetpack中与Button相关的内容#xff0c;本章回中主要I
con与Image。闲话休提#xff0c;让我们一起Talk Android Jetpack吧#xff01; 1. 概念介绍
我们在本章回中介绍… 文章目录 1. 概念介绍2. 使用方法2.1 Icon2.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组件相关的内容就介绍到这里欢迎大家在评论区交流与讨论
