Jetpack Compose图片组件使用实例详细讲解
作者:海塔灯 时间:2021-06-09 08:15:24
概述
在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,
)
}
运行结果:
来源:https://blog.csdn.net/zxj2589/article/details/129986864
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
springBoot之如何获取接口请求数据和返回数据实现日志
java IO流 之 输出流 OutputString()的使用
c#生成站点地图(SiteMapPath)文件示例程序
高效C#编码优化原则
macOS下Spring Boot开发环境搭建教程
![](https://img.aspxhome.com/file/2023/1/85541_0s.jpg)
Java Springboot的目的你知道吗
使用fastjson中的JSONPath处理json数据的方法
java高级用法之注解和反射讲义
![](https://img.aspxhome.com/file/2023/3/65773_0s.png)
浅谈java异常链与异常丢失
java synchronized关键字的用法
java实现简单学生成绩管理系统
![](https://img.aspxhome.com/file/2023/8/98708_0s.jpg)
Android使用ContentProvider实现查看系统短信功能
![](https://img.aspxhome.com/file/2023/3/98663_0s.jpg)
Swing常用组件之单选按钮和复选框
![](https://img.aspxhome.com/file/2023/1/92721_0s.png)
Java编程倒计时实现方法示例
java微信红包实现算法
springmvc无法访问/WEB-INF/views下的jsp的解决方法
java中Vector类的常用方法详解
![](https://img.aspxhome.com/file/2023/4/60234_0s.png)
Android之使用Bundle进行IPC详解
浅谈Java中注解Annotation的定义、使用、解析
Java面试题冲刺第二十二天-- Nginx
![](https://img.aspxhome.com/file/2023/6/58916_0s.png)