用Compose来搞个水墨画效果吧

最新推荐文章于 2024-04-26 11:56:15 发布
最新推荐文章于 2024-04-26 11:56:15 发布
阅读量643 收藏 3
点赞数
文章标签： canvas android 数据可视化 webgl opengl
原文链接：https://juejin.cn/post/6947700226858123271
版权


/   今日科技快讯   /

近日，阿拉丁研究院正式发布《2021年上半年小程序互联网发展白皮书》。据白皮书数据统计，2021年上半年全网小程序数量超过700万！其中微信小程序DAU超4.1亿，数量超过430万，MAU9亿，日人均使用时长1350秒。

/   作者简介   /

大家周五好，周末好好休息，我们下周见！

本篇文章转载自路很长OoO的博客，文章主要和大家分享了他使用Compose实现水墨画效果的实践体会，相信会对大家有所帮助！

文章地址：

https://juejin.cn/post/6947700226858123271

/   水墨画效果   /

前两天看掘金发现一位前端大佬写的水墨变彩色效果很好看，今天咱们用Compose来实现一下效果。效果如下，效果是前端大佬们做的效果。

/   分析动态效果   /

1. 第一我们可以看到图片【黑色】变【彩色】

2. 第二点击之后不规则区域逐渐放大且显示出底部彩色照片

效果也许比较简单，但要做好提供大家使用可能需要做好几点：

  • 图片显示大小正好适配画布大小

  • 点击任意地方从此处开始放大

  • 自定义不规则放大区域

/   素材寻找   /

我们百度一张觉得喜欢的任意图片，然后用PS打开。图像->调整->黑白，即可得到水墨画效果的黑白图片，导出图片备用。

/   PorterDuffXfermode   /

Android绘制中可以通PorterDuffXfermode将绘制图形的像素与Canvas中对应位置的像素按照一定规则进行混合，形成新的像素值来更新Canvas中最终像素颜色值，这样会创建很多可能性的特效。使用PorterDuffXfermode时，将其作为参数传给Paint.setXfermode(Xfermode xfermode)方法，再用该画笔paint进行绘图时Android就会使用传入的PorterDuffXfermode，如果不想再使用Xfermode，那么可以执行Paint.setXfermode(null)。

PorterDuffXfermode支持以下十几种像素颜色的混合模式，分别为：CLEAR、SRC、DST、SRC_OVER、DST_OVER、SRC_IN、DST_IN、SRC_OUT、DST_OUT、SRC_ATOP、DST_ATOP、XOR、DARKEN、LIGHTEN、MULTIPLY、SCREEN。

从上面我们可以看到PorterDuff.Mode为枚举类，一共有16个枚举值：

1.PorterDuff.Mode.CLEAR

所绘制不会提交到画布上。

2.PorterDuff.Mode.SRC

显示上层绘制图。

3.PorterDuff.Mode.DST

显示下层绘制图片

4.PorterDuff.Mode.SRC_OVER

正常绘制显示，上下层绘制叠盖。

5.PorterDuff.Mode.DST_OVER

上下层都显示。下层居上显示。

6.PorterDuff.Mode.SRC_IN

取两层绘制交集。显示上层。

7.PorterDuff.Mode.DST_IN

取两层绘制交集。显示下层。

8.PorterDuff.Mode.SRC_OUT

取上层绘制非交集部分。

9.PorterDuff.Mode.DST_OUT

取下层绘制非交集部分。

10.PorterDuff.Mode.SRC_ATOP

取下层非交集部分与上层交集部分

11.PorterDuff.Mode.DST_ATOP

取上层非交集部分与下层交集部分

12.PorterDuff.Mode.XOR

异或：去除两图层交集部分

13.PorterDuff.Mode.DARKEN

取两图层全部区域，交集部分颜色加深

14.PorterDuff.Mode.LIGHTEN

取两图层全部，点亮交集部分颜色

15.PorterDuff.Mode.MULTIPLY

取两图层交集部分叠加后颜色

16.PorterDuff.Mode.SCREEN

取两图层全部区域，交集部分变为透明色

将图片适配到Canvas

一个好的自定义，要让开发者使用起来方便，而我们的图片大小不一，那绘制到画布上肯定会大小不一，那我们将图片宽高设置为画布的宽高即可。

android中我们知道图片的压缩分为质量压缩,采样率压缩等。如果熟悉的应该对于下面的方法不会陌生。

//提供了我们很好的工具用来进行长宽来进行对图片的缩放。获取新的Bitmap。
Bitmap createScaledBitmap(@NonNull Bitmap src, int dstWidth, int dstHeight,
boolean filter)

我们将两个素材图片扔到资源文件下面，开始将图片绘制到画布上。我们的画布多大，那么图片就应该缩放到我们的画布上。代码如下，我们创建了一个400.dp宽和200.dp高的画布，然后获取和画布大小一致缩放后的Bitmap，绘制到画布上。

@Preview
@Composable
fun InkColorCanvas() {
    val imageBitmap = getBitmap(R.drawable.csmr)
    val imageBitmap_default = getBitmap(R.drawable.hbmr)
    Canvas(
        modifier = Modifier
            .width(400.dp)
            .height(200.dp)
    ) {
        drawIntoCanvas { canva ->
            //彩色图片，获取新的bitmap，宽高和画布宽高一致适配画布
            val multiColorBitmpa = Bitmap.createScaledBitmap(
                imageBitmap.asAndroidBitmap(),
                size.width.toInt(),
                size.height.toInt(), false
            )
            //黑白图片
            val blackColorBitmpa = Bitmap.createScaledBitmap(
                    imageBitmap_default.asAndroidBitmap(),
                    size.width.toInt(),
                    size.height.toInt(),
                    false
                )
            //新建画笔    
            val paint = Paint().asFrameworkPaint()
            //绘制图片到画布上
            canva.nativeCanvas.drawBitmap(multiColorBitmpa, 0f, 0f, paint) 
        }
    }
}

同样我们任意设置画布的宽高,应该自动缩放。不用我们开发者担心。即使屏幕旋转之后也会再次测量自动适配。

 //自动填充整个屏幕,旋转屏幕也自动适配。
 Canvas(modifier = Modifier
            .fillMaxWidth()
            .fillMaxHeight()
    )

效果如下：

保存当前画布图层

不管在基本的UI设计软件中如PhotoShop中，或者视频编辑软件Primere等图层是最基本的概念，当然在编程绘制中也有图层的概念。Android绘制中Canvas.saveLayer可以将当前的画布内容作为图层保存到堆栈中，达到图层的概念，创建一个新的Layer到“栈”中，可以使用saveLayer, savaLayerAlpha，从“栈”中推出一个Layer，可以使用restore,restoreToCount。但Layer入栈时，后续的DrawXXX操作都发生在这个 Layer上，而Layer退栈时，就会把本层绘制的图像“绘制”到上层或是Canvas上，在复制Layer到Canvas上时，可以指定Layer的 透明度(Layer），这是在创建Layer时指定的：public int saveLayerAlpha(RectF bounds, int alpha, int saveFlags)等，一句话多多动手。

//保存图层
val layerId: Int = canva.nativeCanvas.saveLayer(
    0f,
    0f,
    size.width,
    size.height,
    paint,
)

绘制黑白Bitmap

上个步骤中我们已经将彩色画布保存为图层推入堆栈内部。我们再次绘制黑白图Bitmap作为顶层图层。

@Preview
@Composable
fun InkColorCanvas() {
    val imageBitmap = getBitmap(R.drawable.csmr)
    val imageBitmap_default = getBitmap(R.drawable.hbmr)
    Canvas(
        modifier = Modifier
            .fillMaxWidth()
            .fillMaxHeight()
    ) {
        drawIntoCanvas { canva ->
            val multiColorBitmpa = Bitmap.createScaledBitmap(
                imageBitmap.asAndroidBitmap(),
                size.width.toInt(),
                size.height.toInt(), false
            )
            val blackColorBitmpa = Bitmap.createScaledBitmap(
                    imageBitmap_default.asAndroidBitmap(),
                    size.width.toInt(),
                    size.height.toInt(),
                    false
                )
            val paint = Paint().asFrameworkPaint()
            //绘制彩色图片
            canva.nativeCanvas.drawBitmap(multiColorBitmpa, 0f, 0f, paint) 
            //保存图层到堆栈
            val layerId: Int = canva.nativeCanvas.saveLayer(
                0f,
                0f,
                size.width,
                size.height,
                paint,
            )
            //当前图层也是顶层图层绘制黑白Btmap
            canva.nativeCanvas.drawBitmap(blackColorBitmpa, 0f, 0f, paint)

        }
    }
}

下图1-效果图，图2-堆栈图层。

混合模式PorterDuff.Mode.DST_IN

PorterDuff.Mode.DST_IN 取两层绘制交集，显示下层。接下来我们设置画笔混合模式为PorterDuff.Mode.DST_IN且绘制一个中心为屏幕中心,半径为250px的圆。

//PorterDuffXfermode 设置画笔的图形混合模式
paint.xfermode = PorterDuffXfermode(PorterDuff.Mode.DST_OUT)//画圆
canva.nativeCanvas.drawCircle(size.width / 2, size.height / 2, 250f, paint)            

效果如下：

到这里我想基本搞定了最重要的部分了。

/   动画扩大混合区域   /

那如何让逐渐扩大展示出所有的彩色图片呢？很简单,动画有没有。只要最终半径大于画布的对角线即可,让半径从0变到斜边长的一半以上即可。

勾股定理

斜边=sqrt(size.width.toDouble().pow(2.0) + size.height.toDouble().pow(2)) 

@Preview
@Composable
fun InkColorCanvas() {
    val imageBitmap = getBitmap(R.drawable.csmr)
    val imageBitmap_default = getBitmap(R.drawable.hbmr)
    val animal = Animatable(0.0f)
    var xbLength = 0.0f
    Canvas(
        modifier = Modifier
            .fillMaxWidth()
            .fillMaxHeight().pointerInput(Unit) {
                coroutineScope {
                    while (true) {
                        val offset = awaitPointerEventScope {
                            awaitFirstDown().position
                        }
                        launch {
                            animal.animateTo(
                                xbLength,
                                animationSpec = spring(stiffness = Spring.DampingRatioLowBouncy)
                            )
                        }

                    }
                }
            }
    ) {
        drawIntoCanvas { canva ->
            val multiColorBitmpa = Bitmap.createScaledBitmap(
                imageBitmap.asAndroidBitmap(),
                size.width.toInt(),
                size.height.toInt(), false
            )
            val blackColorBitmpa = Bitmap.createScaledBitmap(
                imageBitmap_default.asAndroidBitmap(),
                size.width.toInt(),
                size.height.toInt(),
                false
            )
            val paint = Paint().asFrameworkPaint()
            canva.nativeCanvas.drawBitmap(multiColorBitmpa, 0f, 0f, paint) //绘制图片
            //保存图层
            val layerId: Int = canva.nativeCanvas.saveLayer(
                0f,
                0f,
                size.width,
                size.height,
                paint,
            )
            canva.nativeCanvas.drawBitmap(blackColorBitmpa, 0f, 0f, paint)
            //PorterDuffXfermode 设置画笔的图形混合模式
            paint.xfermode = PorterDuffXfermode(PorterDuff.Mode.DST_OUT)
            //画圆
            canva.nativeCanvas.drawCircle(
                size.width / 2,
                size.height / 2,
                animal.value,
                paint
            )
            //画布斜边
            xbLength = kotlin.math.sqrt(size.width.toDouble().pow(2.0) + size.height.toDouble().pow(2)).toFloat()
            paint.xfermode = null
            canva.nativeCanvas.restoreToCount(layerId)
        }
    }
}           

/   扩大区域跟随按压   /

可能想要在任何按下地方开始扩大选取。很简单,获取屏幕指针获取屏幕按压坐标即可,设置为选区圆的起始坐标。

  • 通过pointerInput来获取屏幕按下坐标

  • 通过remember { mutableStateOf(Offset(0f,0f)) }记住按下的坐标

@Preview
@Composable
fun InkColorCanvas() {
    val imageBitmap = getBitmap(R.drawable.csmr)
    val imageBitmap_default = getBitmap(R.drawable.hbmr)
    val scrrenOffset = remember { mutableStateOf(Offset(0f,0f)) }

    val animalState = remember { mutableStateOf(false) }

    val animal: Float by animateFloatAsState(
        if (animalState.value) {
            1f
        } else {
            0f
        }, animationSpec = TweenSpec(durationMillis = 4000)
    )
    Canvas(
        modifier = Modifier
            .fillMaxWidth()
            .fillMaxHeight().pointerInput(Unit) {
                coroutineScope {
                    while (true) {
                        val position=awaitPointerEventScope {
                              awaitFirstDown().position
                        }
                        launch {
                            scrrenOffset.value= Offset(position.x,position.y)
                            animalState.value=!animalState.value
                        }

                    }
                }
            }
    ) {
        drawIntoCanvas { canva ->
            val multiColorBitmpa = Bitmap.createScaledBitmap(
                imageBitmap.asAndroidBitmap(),
                size.width.toInt(),
                size.height.toInt(), false
            )
            val blackColorBitmpa = Bitmap.createScaledBitmap(
                imageBitmap_default.asAndroidBitmap(),
                size.width.toInt(),
                size.height.toInt(),
                false
            )
            val paint = Paint().asFrameworkPaint()
            canva.nativeCanvas.drawBitmap(multiColorBitmpa, 0f, 0f, paint) //绘制图片
            //保存图层
            val layerId: Int = canva.nativeCanvas.saveLayer(
                0f,
                0f,
                size.width,
                size.height,
                paint,
            )
            canva.nativeCanvas.drawBitmap(blackColorBitmpa, 0f, 0f, paint)
            //PorterDuffXfermode 设置画笔的图形混合模式
            paint.xfermode = PorterDuffXfermode(PorterDuff.Mode.DST_OUT)
            val xbLength = kotlin.math.sqrt(size.width.toDouble().pow(2.0) + size.height.toDouble().pow(2)).toFloat()*animal
            //画圆
            canva.nativeCanvas.drawCircle(
                scrrenOffset.value.x,
                scrrenOffset.value.y,
                xbLength,
                paint
            )
            //画布斜边
            paint.xfermode = null
            canva.nativeCanvas.restoreToCount(layerId)
        }
    }
}

/   不规则扩大选区   /

上面我们为了方便圆形进行了扩散,因为圆的缩放可以通过半径进行计算。但是其他的形状就不是那么好处理了。当然我们可以粗略或者精细的进行变换区域。这里由于时间问题,我们粗略的进行计算扩大选区的动画。原理当然要清楚了。

如上图我们的路径形状可以是各式各样的。但是执行到最终也需要扩散到所有边缘才可以。所以我们最终变换结果的路径一定要包围所有的画布区域才可以。如下结合理解。

@Preview
@Composable
fun InkColorCanvas() {
    val imageBitmap = getBitmap(R.drawable.csmr)
    val imageBitmap_default = getBitmap(R.drawable.hbmr)
    val scrrenOffset = remember { mutableStateOf(Offset(0f, 0f)) }

    val animalState = remember { mutableStateOf(false) }

    val animal: Float by animateFloatAsState(
        if (animalState.value) {
            1f
        } else {
            0f
        }, animationSpec = TweenSpec(durationMillis = 6000)
    )
    Canvas(
        modifier = Modifier
            .fillMaxWidth()
            .fillMaxHeight()
            .pointerInput(Unit) {
                coroutineScope {
                    while (true) {
                        val position = awaitPointerEventScope {
                            awaitFirstDown().position
                        }
                        launch {
                            scrrenOffset.value = Offset(position.x, position.y)
                            animalState.value = !animalState.value
                        }

                    }
                }
            }
    ) {
        drawIntoCanvas { canva ->
            val multiColorBitmpa = Bitmap.createScaledBitmap(
                imageBitmap.asAndroidBitmap(),
                size.width.toInt(),
                size.height.toInt(), false
            )
            val blackColorBitmpa = Bitmap.createScaledBitmap(
                imageBitmap_default.asAndroidBitmap(),
                size.width.toInt(),
                size.height.toInt(),
                false
            )
            val paint = Paint().asFrameworkPaint()
            canva.nativeCanvas.drawBitmap(multiColorBitmpa, 0f, 0f, paint) //绘制图片
            //保存图层
            val layerId: Int = canva.nativeCanvas.saveLayer(
                0f,
                0f,
                size.width,
                size.height,
                paint,
            )
            canva.nativeCanvas.drawBitmap(blackColorBitmpa, 0f, 0f, paint)
            //PorterDuffXfermode 设置画笔的图形混合模式
            paint.xfermode = PorterDuffXfermode(PorterDuff.Mode.DST_OUT)
            val xbLength = kotlin.math.sqrt(size.width.toDouble().pow(2.0) + size.height.toDouble().pow(2)).toFloat() * animal
            //画圆
//            canva.nativeCanvas.drawCircle(
//                scrrenOffset.value.x,
//                scrrenOffset.value.y,
//                xbLength,
//                paint
//            )
            val path = Path().asAndroidPath()
            path.moveTo(scrrenOffset.value.x, scrrenOffset.value.y)
            //随便绘制了哥区域。当然了为了好看曲线可以更美。
            if (xbLength>0) {
                path.addOval(
                    RectF(
                        scrrenOffset.value.x - xbLength,
                        scrrenOffset.value.y - xbLength,
                        scrrenOffset.value.x + 100f + xbLength,
                        scrrenOffset.value.y + 130f + xbLength
                    ), android.graphics.Path.Direction.CCW
                )
                path.addCircle(
                    scrrenOffset.value.x, scrrenOffset.value.y, 100f + xbLength,
                    android.graphics.Path.Direction.CCW
                )
                path.addCircle(
                    scrrenOffset.value.x-100, scrrenOffset.value.y-100, 50f + xbLength,
                    android.graphics.Path.Direction.CCW
                )
            }
            path.close()
            canva.nativeCanvas.drawPath(path, paint)
            //画布斜边
            paint.xfermode = null
            canva.nativeCanvas.restoreToCount(layerId)
        }
    }
}

/   总结   /

Compose申明式UI必定式未来,当然xml不会遗弃,只是我们需要跳出舒适圈,不找借口,学习动手，我所体会到的Compose在效率和自定义等方面已经带来了很好的体验，相信写Flutter的大伙们极度舒适吧。后面有时间会继续写文章。这些特效都会收集到ComposeUnit中,代码到以后开源共享,希望完成ComposeUnit来和大家见面。最近比较忙写的少可以预览一下。

推荐阅读：

我的新书，《第一行代码 第3版》已出版！

Android aab的打包、调试、安装

Compose中的文本框，你值得拥有！

欢迎关注我的公众号

学习技术或投稿

长按上图，识别图中二维码即可关注

郭霖_
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用docker compose搭建一个elk系统的方法
09-30
主要介绍了使用docker-compose搭建一个elk系统的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
中国风水墨画
09-02
中国风水墨画
Compose 屏幕适配
最新发布
xiangxiongfly
04-26 278
横竖屏适配 分辨率适配
compose-shimmer:一个 Jetpack 组合修改器，可为任何组合添加闪烁效果
05-31
组合微光 一个 Jetpack 组合修改器，可为任何小部件添加闪烁效果。 MyComponent( modifier = Modifier.shimmer() ) 与Compose版本1.0.0-alpha09兼容 下载 可通过 jitpack 获得。 将 Maven 存储库添加到您的根build.gradle allprojects { repositories { maven { url ' https://jitpack.io ' } } } 添加依赖： dependencies { implementation ' com.github.kazemihabib:compose-shimmer:1.0.2 ' }
IDEA中使用Docker Compose容器编排的实现
08-18
主要介绍了IDEA中使用Docker Compose容器编排的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
16运用compose使用现有镜像配置Lnmp网站.pptx
10-27
16运用compose使用现有镜像配置Lnmp网站.pptx
Android jetpack compose 创建新拟态风格控件
m0_37508087的博客
09-05 1611
在开始开发新的新程序的时候，选择了jetpack最新的组件compose来构建应用程序的界面。但是因为compose面世不久，网上基本找不到太多相关的资料，想找一个新拟态风格的控件库但是找不到，也就只能自己写一个。 效果图: 这里以输入框为例，其他的空间做成新拟态的原理是一样的。 一、原理 其实新拟态的原理是很简单的，大致就是给控件加两个阴影，显示出光线明暗的变化，如上图所示，左上加的是白色的阴影，右下加的是灰色的阴影。 二、面临的困难 在compose里面，api实际上是进一步..
Jetpack Compose 实现鸿蒙引力加载 Loading
金戈鐡馬
03-01 739
这是鸿蒙的引力加载动效果，一个小卫星绕着一个上下移动的主星在公转，似乎很简单。
水墨画风格首页HTML+CSS
UNknowmer的博客
02-01 2153
成品 HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>我有古诗三千</title> <link rel="stylesheet" href=
CSS 3.0实现泼墨画
越陌度阡
11-28 643
给大家分享一个用CSS 3.0实现的泼墨画，效果如下： 以下是代码实现，欢迎大家复制、粘贴和收藏。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS 3.0实现泼墨画</
web前端网页设计期末课程大作业：中华传统文化题材网页源码——基于HTML实现中国水墨风书画艺术网站(12个页面)
qq_38515380的博客
04-26 265
🥇 关于作者: 💬历任研发工程师，技术组长，教学总监；曾于2016年、2020年两度荣获CSDN年度十大博客之星。 十载寒冰，难凉热血；多年过去，历经变迁，物是人非。 然而，对于技术的探索和追求从未停歇。 💪坚持原创，热衷分享，初心未改，继往开来！🍵茶文化网站、🏳️‍🌈中华传统文化题材、京剧文化🔏水墨风书画、中国民间年画文化艺术网站 、等网站的设计与制作。🏷️ 这个首页代码运用了DIV盒子的使用方法，如盒子的嵌套、浮动、margin、border、background等属性的使用，外部大盒
Doom-Compose：使用Jetpack Compose实现DOOM射击效果
02-04
Doom-Compose：使用Jetpack Compose实现DOOM射击效果
docker-compose安装包
12-19
Docker-Compose运行目录下的所有文件（docker-compose.yml，extends文件或环境变量文件等）组成一个工程，若无特殊指定工程名即为当前目录名。一个工程当中可包含多个服务，每个服务中定义了容器运行的镜像、参数、...
html5水墨,web前端入门到实战：html5网页特效-水墨动画
weixin_36215894的博客
06-19 926
效果鼠标触碰按钮，出现水墨风格动画屏幕自适应一份html文件，一份css文件，无javascript，上手程度：很简单笔记:root这个 CSS 伪类匹配文档树的根元素。对于 HTML 来说，:root 表示元素，除了优先级更高之外，与 html 选择器相同。box-sizing属性允许您以特定的方式定义匹配某个区域的特定元素。content-box：在宽度和高度之外绘制元素的内边距和边框。bor...
零基础学C/C++182——墨汁
weixin_62109396的博客
10-13 948
温馨提示：更多精彩内容请关注微信公众号zstu就业 小T擅长国画，特别崇拜以画马著称的国画大师徐悲鸿先生，所以小T也很喜欢画马，众所周知画马是需要很多墨汁的，为了节省支出，小T决定参加龙城近墨堂最近推出的以瓶换墨活动，本次活动为期三月，活动期间你可以用M个空墨汁瓶换取一瓶全新包装的墨汁(包装里面有一个瓶，瓶里装满了墨汁)，为了方便叙述，下文一律将一瓶全新包装的墨汁简称为一瓶墨汁。近墨堂老板心地非常善良，即使你手头只差一个空瓶他也会换给你一瓶墨汁，条件是你必须在用完这瓶墨汁后将空瓶还给老板，但如果你差两个或
Compose 设置颜色的三种方式
我怀里的猫的博客
08-10 3405
Compose 设置颜色的三种方式
compose使用入门：做一个丝滑的可展开列表
bugyinyin的博客
08-30 869
compose 的基础组件基本涵盖了所有的基本需求，即使是没有的组件我们也可以很快速的使用已有基础组件组合出我们需要的组件效果。另外，compose 的动画创建相比于传统 view 方便了许多，例如参数值改变的动画，现在只需要使用 animate*AsState 创建一个带动画的参数，再放到需要动画的地方即可，完全不需要其他多余的操作。.........
Compose - 屏幕适配（尺寸、主题、状态栏、国际）
HugMua的博客
04-23 1997
smallestWidth 方案也一样适用于Compose，通过 dimensionResource( ) 方法获取 res 中 dimen 值会转换为 Dp 类型，如果项目中已经使用了 smallestWidth 方案依然可以继续使用。px = sp * fontScale * density，fontScale 代表当前系统字体的缩放比例，通过 LocalDensity.current.fontScale 获取该值，可以自由控制应用内文字的显示大小。
Android前沿技术学习——Compose布局原理+配置布局+四大块技术全方面解析
m0_71524094的博客
07-11 9570
布局系统的 Jetpack Compose 实现有两个主要目标：一是实现高性能，二是让开发者能够轻松编写自定义布局。在 Compose 中，通过避免多次测量布局子级可实现高性能。如果需要进行多次测量，Compose 具有一个特殊系统，即固有特性测量。注意：使用 Android View 系统时，在嵌套某些 View（如 ）时，可能会出现一些性能问题。由于 Compose 可以避免多次测量，因此可以根据需要进行深层次嵌套，而不会影响性能。布局主要包括：布局基础知识、Material组件和布局、自定义布局、Co
用Jetpack Compose写一个圆形揭露动画
02-15
要用Jetpack Compose写一个圆形揭露动画，你需要使用动画框架来控制圆形的大小和透明度。 步骤如下： 1. 定义一个动画对象，使用Android KTX库中的AnimatedFloat类。 2. 使用Composable函数创建一个圆形，并使用...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值