Android Compose 七：常用组件 Image

1 基本使用

在这里插入图片描述

 Image(painter = painterResource(id = R.drawable.ic_wang_lufei), contentDescription = "" )  // 图片Spacer(modifier = Modifier.height(20.dp))Image(imageVector = ImageVector.vectorResource(id = R.drawable.ic_android_black_24dp), contentDescription = "")  //矢量图Spacer(modifier = Modifier.height(20.dp))Image(bitmap = ImageBitmap.imageResource(id = R.drawable.ic_wang_lufei), contentDescription = "") //bitmap

效果
在这里插入图片描述

2 参数说明

以上三种创建方式，除了引用资源方式不同外，其他参数相同

fun Image(painter: Painter,contentDescription: String?,modifier: Modifier = Modifier,alignment: Alignment = Alignment.Center,contentScale: ContentScale = ContentScale.Fit,alpha: Float = DefaultAlpha,colorFilter: ColorFilter? = null
) fun Image(imageVector: ImageVector,contentDescription: String?,modifier: Modifier = Modifier,alignment: Alignment = Alignment.Center,contentScale: ContentScale = ContentScale.Fit,alpha: Float = DefaultAlpha,colorFilter: ColorFilter? = null
) fun Image(bitmap: ImageBitmap,contentDescription: String?,modifier: Modifier = Modifier,alignment: Alignment = Alignment.Center,contentScale: ContentScale = ContentScale.Fit,alpha: Float = DefaultAlpha,colorFilter: ColorFilter? = null,filterQuality: FilterQuality = DefaultFilterQuality
)

点点点最后点到了 Layout 是不是就可以说是Image就是Layout 然后控制图片大小形状等信息

 Layout({},modifier.then(semantics).clipToBounds().paint(painter,alignment = alignment,contentScale = contentScale,alpha = alpha,colorFilter = colorFilter)) { _, constraints ->layout(constraints.minWidth, constraints.minHeight) {}}

2.1 资源加载参数

painter: Painter,
imageVector: ImageVector, //可以通过 ImageVector.vectorResource(id = ) 获取图片后做处理再显示
bitmap: ImageBitmap, //可以通过 ImageBitmap.imageResource(id = ) 获取图片后做处理再显示
实现bitmap等比缩放

 	Image(painter = painterResource(id = R.drawable.ic_wang_lufei), contentDescription = "王路飞1" )Spacer(modifier = Modifier.height(20.dp))var bitmap = ImageBitmap.imageResource(id = R.drawable.ic_wang_lufei)//获取图片宽高等比缩放val width = bitmap.width;val height = bitmap.height;Image(bitmap = bitmap,modifier = Modifier.width(pxToDp(px = width) / 2).height(pxToDp(px = height)/2),contentDescription = "王路飞2")

效果
在这里插入图片描述

//ImageBitmap 转 Bitmapval asAndroidBitmap = bitmap.asAndroidBitmap()//Bitmap 转 ImageBitmapval  imageBitmap = asAndroidBitmap.asImageBitmap()Image(bitmap = imageBitmap,contentDescription = "王路飞2")

.asImageBitmap() 其实就是创建了一个ImageBitmap

fun Bitmap.asImageBitmap(): ImageBitmap = AndroidImageBitmap(this)internal class AndroidImageBitmap(internal val bitmap: Bitmap) : ImageBitmap {...}

 //ImageBitmap 转 Bitmapval asAndroidBitmap = bitmap.asAndroidBitmap()//Bitmap 转 ImageBitmapval  imageBitmap = asAndroidBitmap.asImageBitmap()val bitmap1 = BitmapFactory.decodeResource(Resources.getSystem(),R.drawable.ic_wang_lufei1)Image(bitmap = bitmap1.asImageBitmap(),contentDescription = "王路飞2")`

效果
在这里插入图片描述

2.2 alignment 图片对齐方式

当框大于图片大小时

Image(painter = painterResource(id = R.drawable.ic_wang_lufei), contentDescription = "王路飞1" )Spacer(modifier = Modifier.height(20.dp))Image(painter = painterResource(id = R.drawable.ic_wang_lufei),contentDescription = "王路飞1",modifier = Modifier.fillMaxWidth(),alignment = Alignment.Center)

效果居中显示效果受contentScale影响
在这里插入图片描述

2.3 contentScale 预览效果

默认 contentScale: ContentScale = ContentScale.Fit,
在这里插入图片描述
contentScale = ContentScale.Crop 宽或高撑满布局另外一方向居中显示

 Image(painter = painterResource(id = R.drawable.ic_wang_lufei),contentDescription = "王路飞1",modifier = Modifier.fillMaxWidth(),alignment = Alignment.Center,contentScale = ContentScale.Crop)

在这里插入图片描述
modifier = Modifier.fillMaxSize(),

contentScale = ContentScale.FillBounds
在这里插入图片描述
contentScale = ContentScale.FillHeight 高度撑满，宽度自适应

contentScale = ContentScale.Inside 显示图片大小

contentScale = ContentScale.FillWidth 宽度撑满高度自适应

contentScale = ContentScale.None
在这里插入图片描述

2.4 alpha = 0.5f, 透明度

Image(painter = painterResource(id = R.drawable.lufei3),contentDescription = "王路飞1",modifier = Modifier.width(300.dp).height(100.dp),alignment = Alignment.Center,contentScale = ContentScale.Crop,alpha = 0.5f,)

在这里插入图片描述

2.5 colorFilter = ColorFilter.lighting(multiply = Color.Red,add = Color.Black) 颜色过滤器

Image(painter = painterResource(id = R.drawable.lufei3),contentDescription = "王路飞1",modifier = Modifier.width(300.dp).height(100.dp),alignment = Alignment.Center,contentScale = ContentScale.Crop,colorFilter = ColorFilter.lighting(multiply = Color.Red,add = Color.Black))

在这里插入图片描述

        /*** Create a [ColorFilter] that can be used to simulate simple lighting effects.* A lighting ColorFilter is defined by two parameters, one used to multiply the source* color and one used to add to the source color** @param multiply Color that will be added to the source color when the color*          filter is applied* @param add Color used to multiply the source color when the color filter is applied.*/@Stablefun lighting(multiply: Color, add: Color): ColorFilter =actualLightingColorFilter(multiply, add)

翻译
在这里插入图片描述
另外两个滤波

        /*** Creates a color filter that applies the blend mode given as the second* argument. The source color is the one given as the first argument, and the* destination color is the one from the layer being composited.** The output of this filter is then composited into the background according* to the [Paint.blendMode], using the output of this filter as the source* and the background as the destination.** @param color Color used to blend source content* @param blendMode BlendMode used when compositing the tint color to the destination*/@Stablefun tint(color: Color, blendMode: BlendMode = BlendMode.SrcIn): ColorFilter =actualTintColorFilter(color, blendMode)/*** Create a [ColorFilter] that transforms colors through a 4x5 color matrix. This filter can* be used to change the saturation of pixels, convert from YUV to RGB, etc.** @param colorMatrix ColorMatrix used to transform pixel values when drawn*/@Stablefun colorMatrix(colorMatrix: ColorMatrix): ColorFilter =actualColorMatrixColorFilter(colorMatrix)

默认的滤波器

@kotlin.jvm.JvmInline
value class ColorMatrix(val values: FloatArray = floatArrayOf(1f, 0f, 0f, 0f, 0f,0f, 1f, 0f, 0f, 0f,0f, 0f, 1f, 0f, 0f,0f, 0f, 0f, 1f, 0f)
)

咱们稍微改个值

 Image(painter = painterResource(id = R.drawable.lufei3),contentDescription = "王路飞1",modifier = Modifier.width(300.dp).height(100.dp),alignment = Alignment.Center,contentScale = ContentScale.Crop,
//           colorFilter = ColorFilter.lighting(multiply = Color.Red,add = Color.Black)colorFilter = ColorFilter.colorMatrix(ColorMatrix(floatArrayOf(1f, 0f, 0f, 0f, 0f,0f, 0f, 0f, 0f, 0f,0f, 0f, 1f, 0f, 0f,0f, 0f, 0f, 1f, 1f))))

效果
在这里插入图片描述
实际使用中需要什么效果，咱也不知道，咱也不敢吭，试吧就

3 常用的图片效果

圆角矩形
圆形图片

  Image(painter = painterResource(id = R.drawable.ic_wang_lufei1),contentDescription = "",modifier = Modifier.clip(RoundedCornerShape(20.dp)))Spacer(modifier = Modifier.height(20.dp))Image(painter = painterResource(id = R.drawable.ic_wang_lufei1),contentDescription = "",modifier = Modifier.clip(CircleShape))

在这里插入图片描述

加边框的效果

 Spacer(modifier = Modifier.height(20.dp))Image(painter = painterResource(id = R.drawable.ic_wang_lufei1),contentDescription = "",modifier = Modifier.border(2.dp, color = Color.Red))Spacer(modifier = Modifier.height(20.dp))Image(painter = painterResource(id = R.drawable.ic_wang_lufei1),contentDescription = "",modifier = Modifier.clip(CircleShape) .border(2.dp, color = Color.Red, shape = CircleShape))

效果
在这里插入图片描述

增加边框时 shape = CircleShape 需要与image的shap一致，否则效果如下
在这里插入图片描述

4实现阴影效果

 Image(painter = painterResource(id = R.drawable.ic_wang_lufei1),contentDescription = "",modifier = Modifier.clip(CircleShape) .border(2.dp, color = Color.Red, shape = CircleShape).shadow(30.dp, shape = CircleShape,true,Color.Blue,Color.Yellow))

给image 设置shadow好像无效果
在这里插入图片描述
前边Button里说过
最后调用了Box

于是

   Box(modifier = Modifier.shadow(30.dp, shape = CircleShape,true,Color.Blue,Color.Red),){Image(painter = painterResource(id = R.drawable.ic_wang_lufei1),contentDescription = "",modifier = Modifier.clip(CircleShape).border(2.dp, color = Color.Red, shape = CircleShape))}

效果
在这里插入图片描述