告别GIF，使用Jetpack Compose打造可爱的天气动画

悠悠 2022-11-13 12:25 195阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpdGF2aXZh_size_16_color_FFFFFF_t_70]

# 1. 项目背景 #

--------------------

最近参加了Compose挑战赛的终极挑战，使用Compose完成了一个天气app。之前几轮挑战也都有参与，每次都学到不少新东西。如今迎来最终挑战，希望能将这段时间的积累活学活用，做出更加成熟的作品。  
[Android 开发挑战赛 | 终极挑战: 天气应用][Android _ _ _]

## 项目中的挑战 ##

因为没有美工协助，所以我考虑通过代码实现app中的所有UI元素例如各种icon等，这样的UI在任何分辨率下都不会失真，而且可以灵活地实现各种动画效果。

为了降低实现成本，我将app中的UI元素定义成偏卡通的风格，可以更容易地通过代码实现：  
![在这里插入图片描述][20210328184322980.gif_pic_left]

上面这些动画没有使用**gif**、**lottie**等三方资源，所有图形都基于Compose代码绘制。

# 2. MyApp - CuteWeather #

--------------------

## 2.1 App效果 ##

App界面比较简洁，采用单页面呈现（比赛要求基于SingleScreen实现），各种卡通的天气动画是app的最大特色：

项目地址：[https://github.com/vitaviva/compose-weather][https_github.com_vitaviva_compose-weather]  
![在这里插入图片描述][20210328184815765.gif_pic_left]

## 2.2 App界面 ##

App纵向划分为几个功能区域，每个区域都涉及到一些不同的Compose API的使用  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpdGF2aXZh_size_16_color_FFFFFF_t_70 1]  
涉及技术点较多，本文主要介绍如何使用Compose绘制自定义图形，并基于这些图形实现动画，其他内容有机会再单独介绍。

# 3. Compose自定义绘制 #

--------------------

像常规的Android开发一样，除了各种默认的Composable控件以外，Compose也提供了`Canvas`用来绘制自定义UI。

Canvas相关API在各个平台都大同小异，但在Compose上的使用有以下特点：

*  用声明式的方式创建和使用Canvas
 *  通过`DrawScope`提供必要的state及各种APIs
 *  APIs更简单易用

## 3.1 声明式地创建和使用Canvas ##

Compose中，Canvas作为`Composable`可以声明式地添加到其他Composable中，并通过`Modifier`进行配置

Canvas(modifier = Modifier.fillMaxSize()){  // this: DrawScope 
    	//内部进行自定义绘制
    }

传统方式需要获取Canvas句柄命令式的进行绘制，而`Canvas{...}`通过状态驱动的方式执行block内的绘制逻辑、刷新UI。

## 3.2 强大的DrawScope ##

`Canvas{...}`内部通过`DrawScope`提供必要的state用来获取当前绘制所需环境变量，例如我们最常用的`size`。DrawScope还提了各种常用的绘制API，例如`drawLine`等

Canvas(modifier = Modifier.fillMaxSize()){ 
    	//通过size获取当前canvas的width和height
        val canvasWidth = size.width
        val canvasHeight = size.height
    
    	//绘制直线
        drawLine(
            start = Offset(x=canvasWidth, y = 0f),
            end = Offset(x = 0f, y = canvasHeight),
            color = Color.Blue,
            strokeWidth = 5F //设置直线宽度
        )
    }

上面代码绘制效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpdGF2aXZh_size_16_color_FFFFFF_t_70 2]

## 3.3 简单易用的API ##

传统的Canvas API需要进行`Paint`等配置，而DrawScope提供的API则更简单、使用更友好。

例如绘制一个圆，传统的API是这样：

public void drawCircle(float cx, float cy, float radius, @NonNull Paint paint) { 
    	//... 
    }

DrawScope提供的API：

fun drawCircle(
        color: Color,
        radius: Float = size.minDimension / 2.0f,
        center: Offset = this.center,
        alpha: Float = 1.0f,
        style: DrawStyle = Fill,
        colorFilter: ColorFilter? = null,
        blendMode: BlendMode = DefaultBlendMode
    ) { ...}

看起来参数变多了，其实已经通过`size`等设置了合适的默认值，同时省去了对`Paint`的创建和配置，使用起来更方便。

### 使用原生Canvas ###

目前DrawScope提供的API还不及原生Canvas丰富（比如不支持`drawText`等），当不满足使用需求时，也可以直接使用原生Canvas对象进行绘制

drawIntoCanvas {  canvas ->
       			//nativeCanvas是原生canvas对象，android平台即android.graphics.Canvas
                val nativeCanvas  = canvas.nativeCanvas
                
            }

上面介绍了Compose Canvas的基本知识，下面结合app中的具体示例看一下实际使用效果

首先，看一下雨水的绘制过程。

# 4. 雨天效果 #

--------------------

雨天天气的关键是如何绘制不断下落的雨水  
![在这里插入图片描述][20210328201222430.png]

## 4.1 雨滴的绘制 ##

我们先绘制构成雨水的基本单元：雨滴  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpdGF2aXZh_size_16_color_FFFFFF_t_70 3]  
经拆解后，雨水效果可由三组雨滴构成，每一组雨滴分成上下两段，这样在运动时就可以形成接连不断的雨水效果。

我们使用`drawLine`绘制每一条线段，设置适当的`stokeWidth`，并通过`cap`设置端点的圆形效果：

@Composable
    fun rainDrop() { 
    
    	Canvas(modifier) { 
    
           val x: Float = size.width / 2 //x坐标： 1/2的位置
            
            drawLine(
                Color.Black,
                Offset(x, line1y1), //line1 的起点
                Offset(x, line1y2), //line1 的终点
                strokeWidth = width, //设置宽度
                cap = StrokeCap.Round//头部圆形
            )
    
    		// line2同上
            drawLine(
                Color.Black,
                Offset(x, line2y1),
                Offset(x, line2y2),
                strokeWidth = width,
                cap = StrokeCap.Round
            )
        }
    }

## 4.2 雨滴下落动画 ##

完成雨滴的图形绘制之后，接下来为两线段添加循环往复的位移动画，形成流动效果。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpdGF2aXZh_size_16_color_FFFFFF_t_70 4]

以两线段中间空隙为动画的锚点，根据`animationState`设置其y轴位置，让其从canvas的顶端移动到低端（0 ~ size.hight），然后`restart`这个动画。

以锚点为基准绘制上下两线段，就可以行成接连不断的雨滴效果了  
![在这里插入图片描述][20210328000927304.gif_pic_center]  
代码如下：

@Composable
    fun rainDrop() { 
    	//循环播放的动画 （ 0f ~ 1f)
        val animateTween by rememberInfiniteTransition().animateFloat(
            initialValue = 0f,
            targetValue = 1f,
            animationSpec = infiniteRepeatable(
                tween(durationMillis, easing = LinearEasing),
                RepeatMode.Restart //start动画
            )
        )
    
        Canvas(modifier) { 
    
            // scope ： 绘制区域
            val width = size.width
            val x: Float = size.width / 2
    
     		// width/2是strokCap的宽度，scopeHeight处预留strokCap宽度，让雨滴移出时保持正圆，提高视觉效果
            val scopeHeight = size.height - width / 2 
    
            // space ： 两线段的间隙
            val space = size.height / 2.2f + width / 2 //间隙size
            val spacePos = scopeHeight * animateTween //锚点位置随animationState变化
            val sy1 = spacePos - space / 2
            val sy2 = spacePos + space / 2
    
            // line length
            val lineHeight = scopeHeight - space
    
            // line1
            val line1y1 = max(0f, sy1 - lineHeight)
            val line1y2 = max(line1y1, sy1)
    
            // line2
            val line2y1 = min(sy2, scopeHeight)
            val line2y2 = min(line2y1 + lineHeight, scopeHeight)
    
            // draw
            drawLine(
                Color.Black,
                Offset(x, line1y1),
                Offset(x, line1y2),
                strokeWidth = width,
                colorFilter = ColorFilter.tint(
                    Color.Black
                ),
                cap = StrokeCap.Round
            )
    
            drawLine(
                Color.Black,
                Offset(x, line2y1),
                Offset(x, line2y2),
                strokeWidth = width,
                colorFilter = ColorFilter.tint(
                    Color.Black
                ),
                cap = StrokeCap.Round
            )
        }
    }

## 4.3 Compose自定义布局 ##

上面完成了单个雨滴的动画，接下来我们使用三个雨滴组成雨水的效果。

首先可以使用`Row`\+`Space`的方式进行组装，但是这种方式缺少灵活性，仅通过`Modifier`很难准确布局三雨滴的相对位置，因此考虑转而使用Compose的自定义布局，以提高灵活性和准确性：

Layout(
        modifier = modifier.rotate(30f), //雨滴旋转角度
        content = {  // 定义子Composable
    		Raindrop(modifier.fillMaxSize())
    		Raindrop(modifier.fillMaxSize())
    		Raindrop(modifier.fillMaxSize())
        }
    ) {  measurables, constraints ->
        // List of measured children
        val placeables = measurables.mapIndexed {  index, measurable ->
            // Measure each children
            val height = when (index) {  //让三个雨滴的height不同，增加错落感
                0 -> constraints.maxHeight * 0.8f
                1 -> constraints.maxHeight * 0.9f
                2 -> constraints.maxHeight * 0.6f
                else -> 0f
            }
            measurable.measure(
                constraints.copy(
                    minWidth = 0,
                    minHeight = 0,
                    maxWidth = constraints.maxWidth / 10, // raindrop width
                    maxHeight = height.toInt(),
                )
            )
        }
    
        // Set the size of the layout as big as it can
        layout(constraints.maxWidth, constraints.maxHeight) { 
            var xPosition = constraints.maxWidth / ((placeables.size + 1) * 2)
    
            // Place children in the parent layout
            placeables.forEachIndexed {  index, placeable ->
                // Position item on the screen
                placeable.place(x = xPosition, y = 0)
    
                // Record the y co-ord placed up to
                xPosition += (constraints.maxWidth / ((placeables.size + 1) * 0.8f)).roundToInt()
            }
        }
    }

Compose中，可以通过`Layout{...}`对Composable进行自定义布局，`content{...}`中定义参与布局的子Composable。

跟传统Android视图一样，自定义布局需要先后经历**measure**、**layout**两步。

*  **measrue**： `measurables`返回所有待测量的子Composable，`constraints`类似于`MeasureSpec`，封装父容器对子元素的布局约束。`measurable.measure()`中对子元素进行测量
 *  **layout**：`placeables`返回测量后的子元素，依次调用`placeable.place()`对雨滴进行布局，通过`xPosition`预留雨滴在x轴的间隔

经过layout之后，通过 `modifier.rotate(30f)` 对Composable进行旋转，完成最终效果：  
![在这里插入图片描述][20210328010504209.gif_pic_center]

# 5. 雪天效果 #

--------------------

雪天效果的关键在于雪花的飘落。  
![在这里插入图片描述][20210328202711845.png]

## 5.1 雪花的绘制 ##

雪花的绘制非常简单，用一个圆圈代表一个雪花

Canvas(modifier) { 
    
    	val radius = size / 2
    	
    	drawCircle( //白色填充
    		color = Color.White,
    		radius = radius,
    		style = FILL
    	)
    
    	 drawCircle(// 黑色边框
    	 	color = Color.Black,
    	    radius = radius,
    		style = Stroke(width = radius * 0.5f)
    	)
    }

## 5.2 雪花飘落动画 ##

雪花飘落的过程相对于雨滴坠落要复杂一些，由三个动画组成:

1.  下落：改变y轴位置：0f ~ 2.5f
2.  左右飘移：改变x轴的offse：-1f ~ 1f
3.  逐渐消失：改变alpha：1f ~ 0f

借助`InfiniteTransition`同步控制多个动画，代码如下：

@Composable
    private fun Snowdrop(
    	modifier: Modifier = Modifier,
    	durationMillis: Int = 1000 // 雪花飘落动画的druation
    ) { 
    
    	//循环播放的Transition
        val transition = rememberInfiniteTransition()
    
    	//1. 下降动画：restart动画
        val animateY by transition.animateFloat(
            initialValue = 0f,
            targetValue = 2.5f,
            animationSpec = infiniteRepeatable(
                tween(durationMillis, easing = LinearEasing),
                RepeatMode.Restart
            )
        )
    
    	//2. 左右飘移：reverse动画
        val animateX by transition.animateFloat(
            initialValue = -1f,
            targetValue = 1f,
            animationSpec = infiniteRepeatable(
                tween(durationMillis / 3, easing = LinearEasing),
                RepeatMode.Reverse
            )
        )
    
    	//3. alpha值：restart动画，以0f结束
        val animateAlpha by transition.animateFloat(
            initialValue = 1f,
            targetValue = 0f,
            animationSpec = infiniteRepeatable(
                tween(durationMillis, easing = FastOutSlowInEasing),
            )
        )
    
        Canvas(modifier) { 
    
            val radius = size.width / 2
    
    		// 圆心位置随AnimationState改变，实现雪花飘落的效果
            val _center = center.copy(
                x = center.x + center.x * animateX,
                y = center.y + center.y * animateY
            )
    
            drawCircle(
                color = Color.White.copy(alpha = animateAlpha),//alpha值的变化实现雪花消失效果
                center = _center,
                radius = radius,
            )
    
            drawCircle(
                color = Color.Black.copy(alpha = animateAlpha),
                center = _center,
                radius = radius,
                style = Stroke(width = radius * 0.5f)
            )
        }
    }

`animateY`的`targetValue`设为`2.5f`，让雪花的运动轨迹更长，看起来更加真实

## 5.3 雪花的布局 ##

像雨滴一样，对雪花也使用Layout自定义布局

@Composable
    fun Snow(
        modifier: Modifier = Modifier,
        animate: Boolean = false,
    ) { 
    
        Layout(
            modifier = modifier,
            content = { 
            	//摆放三个雪花，分别设置不同duration，增加随机性
                Snowdrop( modifier.fillMaxSize(), 2200)
                Snowdrop( modifier.fillMaxSize(), 1600)
                Snowdrop( modifier.fillMaxSize(), 1800)
            }
        ) {  measurables, constraints ->
            val placeables = measurables.mapIndexed {  index, measurable ->
                val height = when (index) { 
                	// 雪花的height不同，也是为了增加随机性
                    0 -> constraints.maxHeight * 0.6f
                    1 -> constraints.maxHeight * 1.0f
                    2 -> constraints.maxHeight * 0.7f
                    else -> 0f
                }
                measurable.measure(
                    constraints.copy(
                        minWidth = 0,
                        minHeight = 0,
                        maxWidth = constraints.maxWidth / 5, // snowdrop width
                        maxHeight = height.roundToInt(),
                    )
                )
            }
    
            layout(constraints.maxWidth, constraints.maxHeight) { 
                var xPosition = constraints.maxWidth / ((placeables.size + 1))
    
                placeables.forEachIndexed {  index, placeable ->
                    placeable.place(x = xPosition, y = -(constraints.maxHeight * 0.2).roundToInt())
    
                    xPosition += (constraints.maxWidth / ((placeables.size + 1) * 0.9f)).roundToInt()
                }
            }
        }
    }

最终效果如下：  
![在这里插入图片描述][2021032816182978.gif_pic_center]

# 6. 晴天效果 #

--------------------

通过一个旋转的太阳代表晴天效果  
![在这里插入图片描述][2021032820290787.png]

## 6.1 太阳的绘制 ##

太阳的图形由中间的圆形和围绕圆环的等分线段组成。

@Composable
    fun Sun(modifier: Modifier = Modifier) { 
    
        Canvas(modifier) { 
    
            val radius = size.width / 6
            val stroke = size.width / 20
    
            // draw circle
            drawCircle(
                color = Color.Black,
                radius = radius + stroke / 2,
                style = Stroke(width = stroke),
            )
            drawCircle(
                color = Color.White,
                radius = radius,
                style = Fill,
            )
    
            // draw line
    
            val lineLength = radius * 0.2f
            val lineOffset = radius * 1.8f
            (0..7).forEach {  i ->
    
                val radians = Math.toRadians(i * 45.0)
    
                val offsetX = lineOffset * cos(radians).toFloat()
                val offsetY = lineOffset * sin(radians).toFloat()
    
                val x1 = size.width / 2 + offsetX
                val x2 = x1 + lineLength * cos(radians).toFloat()
    
                val y1 = size.height / 2 + offsetY
                val y2 = y1 + lineLength * sin(radians).toFloat()
    
                drawLine(
                    color = Color.Black,
                    start = Offset(x1, y1),
                    end = Offset(x2, y2),
                    strokeWidth = stroke,
                    cap = StrokeCap.Round
                )
            }
        }
    }

均分360度，每间隔45度画一条线段，`cos`计算x轴坐标，`sin`计算y轴坐标。

## 6.2 太阳的转动 ##

太阳转动的动画很简单，通过`Modifier.rotate`不断转动Canvas即可。

@Composable
    fun Sun(modifier: Modifier = Modifier) { 
    
    	//循环动画
        val animateTween by rememberInfiniteTransition().animateFloat(
            initialValue = 0f,
            targetValue = 360f,
            animationSpec = infiniteRepeatable(tween(5000), RepeatMode.Restart)
        )
    
        Canvas(modifier.rotate(animateTween)) { // 旋转动画
    
            val radius = size.width / 6
            val stroke = size.width / 20
            val centerOffset = Offset(size.width / 30, size.width / 30) //圆心偏移量
    
            // draw circle
            drawCircle(
                color = Color.Black,
                radius = radius + stroke / 2,
                style = Stroke(width = stroke),
                center = center + centerOffset //圆心偏移
            )
           	
           	//...略
        }
    }

此外，`DrawScope`也提供了`rotate`的API，也可以实现旋转效果。

最后我们给太阳的圆心增加一个偏移量，让转动更加活泼：  
![在这里插入图片描述][20210328170336695.gif_pic_center]

# 7. 动画的组合、切换 #

--------------------

分别实现了`Rain`、`Snow`、`Sun`等图形之后就可以使用这些图形组合成各种天气效果了。

## 7.1 将图形组合成天气 ##

Compose的声明式语法非常有利于UI的组合：

比如，多云转阵雨，我们摆放`Sun`、`Cloud`、`Rain`等元素后，通过Modifier调整各自位置即可：

@Composable
    fun CloudyRain(modifier: Modifier) { 
    	Box(modifier.size(200.dp)){ 
    		Sun(Modifier.size(120.dp).offset(140.dp, 40.dp))
    		Rain(Modifier.size(80.dp).offset(80.dp, 60.dp))
    		Cloud(Modifier.align(Aligment.Center))
    	}
    }

## 7.2 让动画切换更加自然 ##

![在这里插入图片描述][20210328174334442.gif_pic_left]  
当在多个天气动画之间进行切换时，我们希望能实现更自然的过渡。实现思路是将组成天气动画的各元素的Modifier信息变量化，然后通过Animation进行改变

假设所有的天气都可以由`Cloud`、`Sun`、`Rain`组合而成，无非就是`offset`、`size`、`alpha`值的不同：

### ComposeInfo ###

data class IconInfo(
        val size: Float = 1f, 
        val offset: Offset = Offset(0f, 0f),
        val alpha: Float = 1f,
    )

//天气组合信息，即Sun、Cloud、Rain的位置信息
    data class ComposeInfo(
        val sun: IconInfo,
        val cloud: IconInfo,
        val rains: IconInfo,
    
    ) { 
        operator fun times(float: Float): ComposeInfo =
            copy(
                sun = sun * float,
                cloud = cloud * float,
                rains = rains * float
            )
    
        operator fun minus(composeInfo: ComposeInfo): ComposeInfo =
            copy(
                sun = sun - composeInfo.sun,
                cloud = cloud - composeInfo.cloud,
                rains = rains - composeInfo.rains,
            )
    
        operator fun plus(composeInfo: ComposeInfo): ComposeInfo =
            copy(
                sun = sun + composeInfo.sun,
                cloud = cloud + composeInfo.cloud,
                rains = rains + composeInfo.rains,
            )
    }

如上，`ComposeInfo`中持有各种元素的位置信息，运算符重载使其可以在Animation中计算当前最新值。

接下来，定义各不同天气的`ComposeInfo`：

//晴天
    val SunnyComposeInfo = ComposeInfo(
        sun = IconInfo(1f),
        cloud = IconInfo(0.8f, Offset(-0.1f, 0.1f), 0f),
        rains = IconInfo(0.4f, Offset(0.225f, 0.3f), 0f),
    )
    
    //多云
    val CloudyComposeInfo = ComposeInfo(
        sun = IconInfo(0.1f, Offset(0.75f, 0.2f), alpha = 0f),
        cloud = IconInfo(0.8f, Offset(0.1f, 0.1f)),
        rains = IconInfo(0.4f, Offset(0.225f, 0.3f), alpha = 0f),
    )
    
    //雨天
    val RainComposeInfo = ComposeInfo(
        sun = IconInfo(0.1f, Offset(0.75f, 0.2f), alpha = 0f),
        cloud = IconInfo(0.8f, Offset(0.1f, 0.1f)),
        rains = IconInfo(0.4f, Offset(0.225f, 0.3f), alpha = 1f),
    )

### ComposedIcon ###

接着，定义`ComposedIcon`，根据`ComposeInfo`实现不同的天气UI

@Composable
    fun ComposedIcon(modifier: Modifier = Modifier, composeInfo: ComposeInfo) { 
    
    	//各元素的ComposeInfo
        val (sun, cloud, rains) = composeInfo
        
        Box(modifier) { 
    
    		//应用ComposeInfo到Modifier
            val _modifier = remember(Unit) { 
                {  icon: IconInfo ->
                    Modifier
                        .offset( icon.size * icon.offset.x, icon.size * icon.offset.y )
                        .size(icon.size)
                        .alpha(icon.alpha)
                }
            }
    
            Sun(_modifier(sun))
            Rains(_modifier(rains))
            AnimatableCloud(_modifier(cloud))
        }
    }

### ComposedWeather ###

最后，定义`ComposedWeather`记录当前`ComposedIcon`，并在其发生变更时使用动画进行过度：

@Composable
    fun ComposedWeather(modifier: Modifier, composedIcon: ComposedIcon) { 
    
        val (cur, setCur) = remember {  mutableStateOf(composedIcon) }
        var trigger by remember {  mutableStateOf(0f) }
    
        DisposableEffect(composedIcon) { 
            trigger = 1f
            onDispose {  }
        }
    
    	//创建动画（0f ~ 1f)，用于更新ComposeInfo
        val animateFloat by animateFloatAsState(
            targetValue = trigger,
            animationSpec = tween(1000)
        ) { 
        	//当动画结束时，更新ComposeWeather到最新state
            setCur(composedIcon)
            trigger = 0f
        }
    
    	//根据AnimationState计算当前ComposeInfo
        val composeInfo = remember(animateFloat) { 
            cur.composedIcon + (weatherIcon.composedIcon - cur.composedIcon) * animateFloat
        }
    
    	//使用最新的ComposeInfo显示Icon
        ComposedIcon(
            modifier,
            composeInfo
        )
    }

# 8 总结 #

--------------------

本文以天气app为例介绍了Compose的自定义绘制、布局以及动画等的基本使用方法。  
Compose通过声明式的方式，结合Canvas实现定义图形和动画，这相比与传统命令式的代码来的更加简单。更低的实现成本让代码替代Gif实现简单的动画成为可能，经代码绘制的效果在清晰度以及帧率上都要远超越Gif，欢迎大家下载源码体验~

在我看来Compose核心不仅是UI，后面有机会会继续分享一些关于架构以及底层实现的文章，欢迎大家持续关注~

## 参考 ##

[MyApp\#CuteWeather][https_github.com_vitaviva_compose-weather]  
[Compose\#Canvas][Compose_Canvas]  
[Compose\#CustomLayout][Compose_CustomLayout]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpdGF2aXZh_size_16_color_FFFFFF_t_70]: /images/20221022/b0f062ad5ad34d94b3b44b5889d0c440.png
[Android _ _ _]: https://mp.weixin.qq.com/s/LrRHgY4Ks2Wq61r4Qs-n2A
[20210328184322980.gif_pic_left]: https://img-blog.csdnimg.cn/20210328184322980.gif#pic_left
[https_github.com_vitaviva_compose-weather]: https://github.com/vitaviva/compose-weather
[20210328184815765.gif_pic_left]: https://img-blog.csdnimg.cn/20210328184815765.gif#pic_left
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpdGF2aXZh_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/2021032820000753.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpdGF2aXZh,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpdGF2aXZh_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20210328200807472.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpdGF2aXZh,size_16,color_FFFFFF,t_70
[20210328201222430.png]: https://img-blog.csdnimg.cn/20210328201222430.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpdGF2aXZh_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/2021032721412083.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpdGF2aXZh,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpdGF2aXZh_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20210328000449620.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpdGF2aXZh,size_16,color_FFFFFF,t_70
[20210328000927304.gif_pic_center]: https://img-blog.csdnimg.cn/20210328000927304.gif#pic_center
[20210328010504209.gif_pic_center]: https://img-blog.csdnimg.cn/20210328010504209.gif#pic_center
[20210328202711845.png]: https://img-blog.csdnimg.cn/20210328202711845.png
[2021032816182978.gif_pic_center]: https://img-blog.csdnimg.cn/2021032816182978.gif#pic_center
[2021032820290787.png]: https://img-blog.csdnimg.cn/2021032820290787.png
[20210328170336695.gif_pic_center]: https://img-blog.csdnimg.cn/20210328170336695.gif#pic_center
[20210328174334442.gif_pic_left]: https://img-blog.csdnimg.cn/20210328174334442.gif#pic_left
[Compose_Canvas]: https://developer.android.com/jetpack/compose/graphics#canvas
[Compose_CustomLayout]: https://developer.android.com/jetpack/compose/layout#custom-layouts