├── .gitignore
├── .idea
├── codeStyles
│ ├── Project.xml
│ └── codeStyleConfig.xml
├── encodings.xml
├── gradle.xml
├── inspectionProfiles
│ └── Project_Default.xml
├── misc.xml
└── runConfigurations.xml
├── README.md
├── app
├── .gitignore
├── build.gradle
├── proguard-rules.pro
└── src
│ ├── androidTest
│ └── java
│ │ └── com
│ │ └── vision
│ │ └── weather
│ │ └── ExampleInstrumentedTest.kt
│ ├── main
│ ├── AndroidManifest.xml
│ ├── java
│ │ └── com
│ │ │ └── vision
│ │ │ └── weather
│ │ │ ├── MainActivity.kt
│ │ │ ├── WeatherApplication.kt
│ │ │ └── widget
│ │ │ ├── SnowFlake.kt
│ │ │ ├── SnowyView.kt
│ │ │ ├── SunnyView.kt
│ │ │ ├── WeatherViewConst.kt
│ │ │ └── utils.kt
│ └── res
│ │ ├── drawable-v24
│ │ └── ic_launcher_foreground.xml
│ │ ├── drawable
│ │ └── ic_launcher_background.xml
│ │ ├── layout
│ │ └── activity_main.xml
│ │ ├── mipmap-anydpi-v26
│ │ ├── ic_launcher.xml
│ │ └── ic_launcher_round.xml
│ │ ├── mipmap-hdpi
│ │ ├── ic_launcher.png
│ │ └── ic_launcher_round.png
│ │ ├── mipmap-mdpi
│ │ ├── ic_launcher.png
│ │ └── ic_launcher_round.png
│ │ ├── mipmap-xhdpi
│ │ ├── ic_launcher.png
│ │ └── ic_launcher_round.png
│ │ ├── mipmap-xxhdpi
│ │ ├── ic_launcher.png
│ │ └── ic_launcher_round.png
│ │ ├── mipmap-xxxhdpi
│ │ ├── ic_launcher.png
│ │ └── ic_launcher_round.png
│ │ └── values
│ │ ├── colors.xml
│ │ ├── strings.xml
│ │ └── styles.xml
│ └── test
│ └── java
│ └── com
│ └── vision
│ └── weather
│ └── ExampleUnitTest.kt
├── build.gradle
├── gradle.properties
├── gradle
└── wrapper
│ ├── gradle-wrapper.jar
│ └── gradle-wrapper.properties
├── gradlew
├── gradlew.bat
└── settings.gradle
/.gitignore:
--------------------------------------------------------------------------------
1 | *.iml
2 | .gradle
3 | /local.properties
4 | /.idea/caches
5 | /.idea/libraries
6 | /.idea/modules.xml
7 | /.idea/workspace.xml
8 | /.idea/navEditor.xml
9 | /.idea/assetWizardSettings.xml
10 | .DS_Store
11 | /build
12 | /captures
13 | .externalNativeBuild
14 |
--------------------------------------------------------------------------------
/.idea/codeStyles/Project.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
--------------------------------------------------------------------------------
/.idea/codeStyles/codeStyleConfig.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
--------------------------------------------------------------------------------
/.idea/encodings.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
--------------------------------------------------------------------------------
/.idea/gradle.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
17 |
18 |
--------------------------------------------------------------------------------
/.idea/inspectionProfiles/Project_Default.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
11 |
17 |
23 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
--------------------------------------------------------------------------------
/.idea/misc.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/.idea/runConfigurations.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
11 |
12 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | > 本篇文章参考自[【不可思议的CSS】天气不可能那么可爱](https://juejin.im/post/5d2f3f3351882556c3186f57)，使用Android中的自定义View实现类似的效果。
2 |
3 | ## 前言
4 | 这段时间一直在研究自定义View，恰好看到使用CSS实现的天气效果很不错，遂尝试使用自定义View实现一发。
5 | 不要脸的套用原作者的一句话，希望原作者不要揍我～
6 | > 只有你想不到，没有**自定义View**实现不了的。今日分享由**自定义View**实现的效果 - **Weather**
7 |
8 | ## 效果
9 |
10 | 
11 | *今我来思，雨雪霏霏*
12 | ***
13 | 
14 |
15 | *晴空一鹤排云上，便引诗情到碧霄。*
16 | ***
17 | 由于不可抗力原因（懒）,这里只实现了晴、雪两种天气效果。原作者文章里实现了晴、雪、云、雨、超级月亮？(原文Supermoon,本人水平有限，实在不知道怎么翻译)，有兴趣的读者可以自行实现。
18 | ## 源码
19 | 两种天气效果的实现源码均已上传至[Github - Weather](https://github.com/Techvisionbest/Weather),客官请自取，如果恰好赶上铁汁您心情好，不妨点个**star**。
20 | ## 分析
21 | 接下来按照惯例分析一波项目里使用的重要API：
22 | ### BlurMaskFilter
23 | 首先我们来看看源码中的注释是怎么描述的：
24 | ```
25 | /**
26 | * This takes a mask, and blurs its edge by the specified radius. Whether or
27 | * or not to include the original mask, and whether the blur goes outside,
28 | * inside, or straddles, the original mask's border, is controlled by the
29 | * Blur enum.
30 | */
31 | /* 翻译成大白话的意思就是BlurMaskFilter可以在原本的View上添加一层指定模糊半径的蒙层，具体模糊的方式，由Blur枚举类型控制 */
32 | ```
33 | 这里我们用BlurMaskFilter实现阴影效果～
34 | ### LinearGradient 线性渐变
35 | Android系统里的LinearGradient是paint的一种shader（着色器）方案。LinearGradient指的就是线性渐变：设置两个点和两种颜色，以这两个点作为端点，使用两种颜色的渐变来绘制颜色，大概像下面这样：
36 | 
37 | *辐射渐变（图片源自抛物线Hencoder）*
38 | ***
39 | 我们这里星球的颜色全部都是通过指定paint的shader为LinearGradient实现的。
40 | ## 一起画
41 | 上面介绍了部分重要的API，接下来我们来一步一步实现 **Snowy** 的效果
42 | ### step1:绘制光晕
43 | 做一个黑色背景，因为黑色视觉反差大视觉效果杠杠的，这里先画一个圆使其位于Canvas画布中心位置，再使用**BlurMaskFilter**作出阴影，达成光晕的效果：
44 |
45 | 
46 |
47 | ```
48 | // 光晕的paint
49 | private val outPaint = Paint(Paint.ANTI_ALIAS_FLAG).apply {
50 | // 光晕的颜色
51 | color = Color.parseColor("#e6e8db")
52 | // 使用BlurMaskFilter制作阴影效果
53 | maskFilter = BlurMaskFilter(shadowRadius.toFloat(), BlurMaskFilter.Blur.SOLID)
54 | }
55 | /** 以下代码是在onDraw()方法中 */
56 | canvas.drawColor(Color.BLACK)
57 | canvas.drawCircle(centerX, centerY, outRadius.toFloat(), outPaint)
58 | ```
59 | ### step2:画一个圆
60 | 这里使用**LinearGradient**做一个渐变的圆，并位于Canvas画布中心位置，与step1中的光晕形成同心圆，这样立刻就有一个不灵不灵的效果了～
61 |
62 | 
63 | ```
64 | private val innerCirclePaint = Paint(Paint.ANTI_ALIAS_FLAG).apply {
65 | shader = LinearGradient(centerX - innerRadius, centerY + innerRadius, centerX, centerY - innerRadius,
66 | Color.parseColor("#e0e2e5"), Color.parseColor("#758595"), Shader.TileMode.CLAMP)
67 | }
68 | /** 以下代码是在onDraw()方法中 */
69 | if (canvas != null){
70 | // 绘制黑色背景
71 | canvas.drawColor(Color.BLACK)
72 | // 绘制渐变圆
73 | canvas.drawCircle(centerX, centerY, innerRadius.toFloat(), innerCirclePaint)
74 | }
75 | ```
76 |
77 | > 注意，当设置了paint的**shader**属性后，paint的**color**属性就会失效，也就是说，当设置了 Shader 之后，Paint 在绘制图形和文字时就不使用 setColor/ARGB() 设置的颜色了，而是使用 Shader 的方案中的颜色。
78 |
79 |
80 | ### step3:画雪人的手臂
81 | 我们这里使用drawArc绘制一段圆弧：
82 | 
83 | ```
84 | // 确认雪人手臂位置的Rect
85 | private val snowyManHandRect = RectF(centerX - dp2px(40f), centerY, centerX + dp2px(40f), snowyManBodyY - dp2px(8f))
86 | // 雪人手臂的paint
87 | private val snowyManHandPaint = Paint(Paint.ANTI_ALIAS_FLAG).apply {
88 | color = Color.BLACK
89 | style = Paint.Style.STROKE
90 | strokeWidth = dp2px(5f).toFloat()
91 | alpha = 120
92 | }
93 | /** 以下代码是在onDraw()方法中 */
94 | if (canvas != null){
95 | canvas.drawColor(Color.BLACK)
96 | canvas.drawCircle(centerX, centerY, outRadius.toFloat(), outPaint)
97 | canvas.drawCircle(centerX, centerY, innerRadius.toFloat(), innerCirclePaint)
98 | canvas.drawArc(snowyManHandRect, 155f,-120f,false, snowyManHandPaint)
99 | }
100 | ```
101 | 看到这里有人会说，这是什么鬼啊，哪里像雪人的手臂啦，别急，我们“走着瞧”
102 | ### step4:画雪人身体
103 | 雪人的身体是由两个相切（感谢我的数学老师，我竟然还记得这么专业的数学名词）的大小不同的圆组成：
104 | 
105 | ```
106 | private val snowyManHeaderRadius = dp2px(12f)
107 | private val snowyManBodyRadius = dp2px(25f)
108 | private val snowyManHeaderX = centerX
109 | private val snowyManHeaderY = centerY + outRadius - snowyManHeaderRadius - snowyManBodyRadius * 2
110 | private val snowyManBodyX = centerX - dp2px(3f)
111 | private val snowyManBodyY = centerY + outRadius - snowyManBodyRadius - dp2px(5f)
112 | private val snowyManPaint = Paint(Paint.ANTI_ALIAS_FLAG).apply {
113 | color = Color.parseColor("#e6e8db")
114 | }
115 | /** 以下代码是在onDraw()方法中 */
116 | canvas.drawCircle(snowyManHeaderX, snowyManHeaderY, snowyManHeaderRadius.toFloat(), snowyManPaint)
117 | canvas.drawCircle(snowyManBodyX, snowyManBodyY, snowyManBodyRadius.toFloat(), snowyManPaint)
118 | ```
119 | > 这亚子第三步中画的雪人手臂像手臂了吧，哼～
120 |
121 | ### step5:画一朵飘落的雪花
122 | 画雪花之前我们需要想象一下雪花在现实生活中的表现是什么样的：
123 | 1. 大小不一
124 | 2. 下落的速度不一
125 | 3. 受风力等的影响水平速度不一
126 | 4. 下落的初始位置不同
127 |
128 | 再结合我们设备的信息，我们知道，雪花在设备上飘落时会有一个运动的范围，这个范围取决于它的父布局的宽和高。
129 | 综合以上信息，我们可以画出雪花的类图：
130 | 
131 | 代码如下：
132 | ```
133 | /**
134 | * snowyView 中飘落的雪花实体
135 | * 使用Builder模式构造
136 | */
137 | class SnowFlake(
138 | var radius: Float?,
139 | val speed: Float?,
140 | val angle: Float?,
141 | val moveScopeX: Float?,
142 | val moveScopeY: Float?
143 | ) {
144 | private val TAG = "SnowFlake"
145 | private val random = java.util.Random()
146 | private var presentX = random.nextInt(moveScopeX?.toInt() ?: 0).toFloat()
147 | private var presentY = random.nextInt(moveScopeY?.toInt() ?: 0).toFloat()
148 | private var presentSpeed = getSpeed()
149 | private var presentAngle = getAngle()
150 | private var presentRadius = getRadius()
151 | private val paint = Paint(Paint.ANTI_ALIAS_FLAG).apply {
152 | color = Color.parseColor("#e6e8db")
153 | alpha = 100
154 | }
155 |
156 | // 绘制雪花
157 | fun draw(canvas: Canvas){
158 | moveX()
159 | moveY()
160 | if (moveScopeX != null && moveScopeY != null){
161 | if (presentX > moveScopeX || presentY > moveScopeY || presentX < 0 || presentY < 0){
162 | reset()
163 | }
164 | }
165 | canvas.drawCircle(presentX, presentY, presentRadius, paint)
166 | }
167 | // 移动雪花（x轴方向）
168 | fun moveX(){
169 | presentX += getSpeedX()
170 | }
171 | // 移动雪花（Y轴方向）
172 | fun moveY(){
173 | presentY += getSpeedY()
174 | }
175 |
176 | fun getSpeed(): Float{
177 | var result: Float
178 | speed.let {
179 | result = it ?: (random.nextFloat() + 1)
180 | }
181 | return result
182 | }
183 | // 获取雪花大小
184 | fun getRadius(): Float{
185 | var size: Float
186 | radius.let {
187 | size = it ?: random.nextInt(15).toFloat()
188 | }
189 | return size
190 | }
191 | // 获取雪花下落角度
192 | fun getAngle(): Float{
193 | angle.let {
194 | if (it != null){
195 | if (it > 30){
196 | return 30f
197 | }
198 | if (it < 0){
199 | return 0f
200 | }
201 | return it
202 | }else{
203 | return random.nextInt(30).toFloat()
204 | }
205 | }
206 | }
207 | // 获取雪花x轴的速度
208 | fun getSpeedX(): Float{
209 | return (presentSpeed * Math.sin(presentAngle.toDouble())).toFloat()
210 | }
211 | // 获取雪花Y轴的速度
212 | fun getSpeedY(): Float{
213 | return (presentSpeed * Math.cos(presentAngle.toDouble())).toFloat()
214 | }
215 | // 充值雪花位置
216 | fun reset(){
217 | presentSpeed = getSpeed()
218 | presentAngle = getAngle()
219 | presentRadius = getRadius()
220 | presentX = random.nextInt(moveScopeX?.toInt()?:0).toFloat()
221 | presentY = 0f
222 | }
223 |
224 | data class Builder(
225 | var mRadius: Float? = null,
226 | var mSpeed: Float? = null,
227 | var mAngle: Float? = null,
228 | var moveScopeX: Float? = null,
229 | var moveScopeY: Float? = null
230 | ){
231 | fun radius(radius: Float) = apply { this.mRadius = radius }
232 | fun speed(speed: Float) = apply { this.mSpeed = speed }
233 | fun angle(angle: Float) = apply { this.mAngle = angle }
234 | fun scopeX(scope: Float) = apply { this.moveScopeX = scope }
235 | fun scopeY(scope: Float) = apply { this.moveScopeY = scope }
236 | fun build() = SnowFlake(mRadius, mSpeed, mAngle, moveScopeX, moveScopeY)
237 | }
238 | }
239 | ```
240 | ### step6：让一群雪花动起来！
241 | 这里我们随机构造出30个雪花，他们的速度、大小、下落角度、初始位置都是随机生成的，然后在SnowyView的onDraw()方法中绘制出来，并每隔5ms就刷新一次View，由于雪花的位置是不停变换的，视觉上就形成了雪花纷纷扬扬的效果：
242 | 
243 | *雪花纷纷何所似？——未若柳絮因风起*
244 | ***
245 | ```
246 | // snowFlakes 为包含30个雪花的数组
247 | for (snow in snowFlakes){
248 | snow.draw(canvas)
249 | }
250 | handler.postDelayed({
251 | invalidate()
252 | },5)
253 | ```
254 | ## 待优化
255 | * 因不可抗力原因（还是懒），代码中许多变量命名略显随意
256 | * 雪花纷纷扬扬实现遵循简单的原则，没有考虑重力等因素的影响，如果把这些都考虑进去，实现出来的效果应该会更优秀
257 | * 还有4个天气效果没有实现
258 | * 雪花实体类SnowyFlake使用kotlin实现Builder模式总感觉怪怪的，望能有大佬指点一二，不胜感激～
259 | ## 总结
260 | 感谢原作者**D文斌**的文章：[【不可思议的CSS】天气不可能那么可爱](https://juejin.im/post/5d2f3f3351882556c3186f57)
261 | 感谢扔物线大神的HenCoder系列文章（刚看到扔物线大佬的blog竟然更新了）
262 |
--------------------------------------------------------------------------------
/app/.gitignore:
--------------------------------------------------------------------------------
1 | /build
2 |
--------------------------------------------------------------------------------
/app/build.gradle:
--------------------------------------------------------------------------------
1 | apply plugin: 'com.android.application'
2 |
3 | apply plugin: 'kotlin-android'
4 |
5 | apply plugin: 'kotlin-android-extensions'
6 |
7 | android {
8 | compileSdkVersion 28
9 | buildToolsVersion "29.0.0"
10 | defaultConfig {
11 | applicationId "com.vision.weather"
12 | minSdkVersion 15
13 | targetSdkVersion 28
14 | versionCode 1
15 | versionName "1.0"
16 | testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
17 | }
18 | buildTypes {
19 | release {
20 | minifyEnabled false
21 | proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
22 | }
23 | }
24 | }
25 |
26 | dependencies {
27 | implementation fileTree(dir: 'libs', include: ['*.jar'])
28 | implementation"org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
29 | implementation 'com.android.support:appcompat-v7:28.0.0'
30 | implementation 'com.android.support.constraint:constraint-layout:1.1.3'
31 | testImplementation 'junit:junit:4.12'
32 | androidTestImplementation 'com.android.support.test:runner:1.0.2'
33 | androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'
34 | }
35 |
--------------------------------------------------------------------------------
/app/proguard-rules.pro:
--------------------------------------------------------------------------------
1 | # Add project specific ProGuard rules here.
2 | # You can control the set of applied configuration files using the
3 | # proguardFiles setting in build.gradle.
4 | #
5 | # For more details, see
6 | # http://developer.android.com/guide/developing/tools/proguard.html
7 |
8 | # If your project uses WebView with JS, uncomment the following
9 | # and specify the fully qualified class name to the JavaScript interface
10 | # class:
11 | #-keepclassmembers class fqcn.of.javascript.interface.for.webview {
12 | # public *;
13 | #}
14 |
15 | # Uncomment this to preserve the line number information for
16 | # debugging stack traces.
17 | #-keepattributes SourceFile,LineNumberTable
18 |
19 | # If you keep the line number information, uncomment this to
20 | # hide the original source file name.
21 | #-renamesourcefileattribute SourceFile
22 |
--------------------------------------------------------------------------------
/app/src/androidTest/java/com/vision/weather/ExampleInstrumentedTest.kt:
--------------------------------------------------------------------------------
1 | package com.vision.weather
2 |
3 | import android.support.test.InstrumentationRegistry
4 | import android.support.test.runner.AndroidJUnit4
5 |
6 | import org.junit.Test
7 | import org.junit.runner.RunWith
8 |
9 | import org.junit.Assert.*
10 |
11 | /**
12 | * Instrumented test, which will execute on an Android device.
13 | *
14 | * See [testing documentation](http://d.android.com/tools/testing).
15 | */
16 | @RunWith(AndroidJUnit4::class)
17 | class ExampleInstrumentedTest {
18 | @Test
19 | fun useAppContext() {
20 | // Context of the app under test.
21 | val appContext = InstrumentationRegistry.getTargetContext()
22 | assertEquals("com.vision.weather", appContext.packageName)
23 | }
24 | }
25 |
--------------------------------------------------------------------------------
/app/src/main/AndroidManifest.xml:
--------------------------------------------------------------------------------
1 |
2 |
5 |
6 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
--------------------------------------------------------------------------------
/app/src/main/java/com/vision/weather/MainActivity.kt:
--------------------------------------------------------------------------------
1 | package com.vision.weather
2 |
3 | import android.graphics.Color
4 | import android.os.Build
5 | import android.support.v7.app.AppCompatActivity
6 | import android.os.Bundle
7 | import android.support.v7.app.ActionBar
8 | import android.view.View
9 |
10 | class MainActivity : AppCompatActivity() {
11 |
12 | override fun onCreate(savedInstanceState: Bundle?) {
13 | super.onCreate(savedInstanceState)
14 | setContentView(R.layout.activity_main)
15 | if (Build.VERSION.SDK_INT >= 21) {
16 | val decorView = window.decorView
17 | val option = View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
18 | decorView.systemUiVisibility = option
19 | window.statusBarColor = Color.TRANSPARENT
20 | }
21 | val actionBar = supportActionBar
22 | actionBar?.hide()
23 | }
24 | }
25 |
--------------------------------------------------------------------------------
/app/src/main/java/com/vision/weather/WeatherApplication.kt:
--------------------------------------------------------------------------------
1 | package com.vision.weather
2 |
3 | import android.annotation.SuppressLint
4 | import android.app.Application
5 | import android.content.Context
6 | import kotlin.properties.Delegates
7 |
8 | class WeatherApplication: Application() {
9 | override fun onCreate() {
10 | super.onCreate()
11 | mContext = applicationContext
12 | }
13 |
14 | companion object{
15 | private var mContext: Context by Delegates.notNull()
16 | fun getContext() = mContext
17 | }
18 |
19 | }
--------------------------------------------------------------------------------
/app/src/main/java/com/vision/weather/widget/SnowFlake.kt:
--------------------------------------------------------------------------------
1 | package com.vision.weather.widget
2 |
3 | import android.graphics.Canvas
4 | import android.graphics.Color
5 | import android.graphics.Paint
6 | import android.util.Log
7 | import kotlin.random.Random
8 |
9 | /**
10 | * snowyView 中飘落的雪花实体
11 | */
12 | class SnowFlake(
13 | var radius: Float?,
14 | val speed: Float?,
15 | val angle: Float?,
16 | val moveScopeX: Float?,
17 | val moveScopeY: Float?
18 | ) {
19 | private val TAG = "SnowFlake"
20 | private val random = java.util.Random()
21 | private var presentX = random.nextInt(moveScopeX?.toInt() ?: 0).toFloat()
22 | private var presentY = random.nextInt(moveScopeY?.toInt() ?: 0).toFloat()
23 | private var presentSpeed = getSpeed()
24 | private var presentAngle = getAngle()
25 | private var presentRadius = getRadius()
26 | private val paint = Paint(Paint.ANTI_ALIAS_FLAG).apply {
27 | color = Color.parseColor("#e6e8db")
28 | alpha = 100
29 | }
30 |
31 | // 绘制雪花
32 | fun draw(canvas: Canvas){
33 | moveX()
34 | moveY()
35 | if (moveScopeX != null && moveScopeY != null){
36 | if (presentX > moveScopeX || presentY > moveScopeY || presentX < 0 || presentY < 0){
37 | reset()
38 | }
39 | }
40 | canvas.drawCircle(presentX, presentY, presentRadius, paint)
41 | }
42 | // 移动雪花（x轴方向）
43 | fun moveX(){
44 | presentX += getSpeedX()
45 | }
46 | // 移动雪花（Y轴方向）
47 | fun moveY(){
48 | presentY += getSpeedY()
49 | }
50 |
51 | fun getSpeed(): Float{
52 | var result: Float
53 | speed.let {
54 | result = it ?: (random.nextFloat() + 1)
55 | }
56 | Log.e(TAG, "speed: $result")
57 | return result
58 | }
59 |
60 | fun getRadius(): Float{
61 | var size: Float
62 | radius.let {
63 | size = it ?: random.nextInt(15).toFloat()
64 | }
65 | return size
66 | }
67 |
68 | fun getAngle(): Float{
69 | angle.let {
70 | if (it != null){
71 | if (it > 30){
72 | return 30f
73 | }
74 | if (it < 0){
75 | return 0f
76 | }
77 | return it
78 | }else{
79 | return random.nextInt(30).toFloat()
80 | }
81 | }
82 | }
83 |
84 | fun getSpeedX(): Float{
85 | return (presentSpeed * Math.sin(presentAngle.toDouble())).toFloat()
86 | }
87 |
88 | fun getSpeedY(): Float{
89 | return (presentSpeed * Math.cos(presentAngle.toDouble())).toFloat()
90 | }
91 |
92 | fun reset(){
93 | presentSpeed = getSpeed()
94 | presentAngle = getAngle()
95 | presentRadius = getRadius()
96 | presentX = random.nextInt(moveScopeX?.toInt()?:0).toFloat()
97 | presentY = 0f
98 | }
99 |
100 | data class Builder(
101 | var mRadius: Float? = null,
102 | var mSpeed: Float? = null,
103 | var mAngle: Float? = null,
104 | var moveScopeX: Float? = null,
105 | var moveScopeY: Float? = null
106 | ){
107 | fun radius(radius: Float) = apply { this.mRadius = radius }
108 | fun speed(speed: Float) = apply { this.mSpeed = speed }
109 | fun angle(angle: Float) = apply { this.mAngle = angle }
110 | fun scopeX(scope: Float) = apply { this.moveScopeX = scope }
111 | fun scopeY(scope: Float) = apply { this.moveScopeY = scope }
112 | fun build() = SnowFlake(mRadius, mSpeed, mAngle, moveScopeX, moveScopeY)
113 | }
114 | }
--------------------------------------------------------------------------------
/app/src/main/java/com/vision/weather/widget/SnowyView.kt:
--------------------------------------------------------------------------------
1 | package com.vision.weather.widget
2 |
3 | import android.content.Context
4 | import android.graphics.*
5 | import android.os.Build
6 | import android.support.annotation.RequiresApi
7 | import android.util.AttributeSet
8 | import android.util.Log
9 | import android.view.View
10 | import android.view.ViewTreeObserver
11 |
12 |
13 |
14 | class SnowyView @JvmOverloads constructor(
15 | context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0
16 | ) : View(context, attrs, defStyleAttr) {
17 | private val TAG = "SnowyView"
18 | private val snowFlakes = ArrayList()
19 |
20 | init {
21 | // 禁用硬件加速
22 | setLayerType(LAYER_TYPE_SOFTWARE, null)
23 | for (i in 0..29){
24 | snowFlakes.add(SnowFlake.Builder().scopeX(weatherViewWidth.toFloat()).scopeY(weatherViewHeight.toFloat()).build())
25 | }
26 | }
27 |
28 | private val snowyManHeaderRadius = dp2px(12f)
29 | private val snowyManBodyRadius = dp2px(25f)
30 | private val snowyManHeaderX = centerX
31 | private val snowyManHeaderY = centerY + outRadius - snowyManHeaderRadius - snowyManBodyRadius * 2
32 | private val snowyManBodyX = centerX - dp2px(3f)
33 | private val snowyManBodyY = centerY + outRadius - snowyManBodyRadius - dp2px(5f)
34 | private val snowyManPaint = Paint(Paint.ANTI_ALIAS_FLAG).apply {
35 | color = Color.parseColor("#e6e8db")
36 | }
37 |
38 | private val snowyManHandRect = RectF(centerX - dp2px(40f), centerY, centerX + dp2px(40f), snowyManBodyY - dp2px(8f))
39 | private val snowyManHandPaint = Paint(Paint.ANTI_ALIAS_FLAG).apply {
40 | color = Color.BLACK
41 | style = Paint.Style.STROKE
42 | strokeWidth = dp2px(5f).toFloat()
43 | alpha = 120
44 | }
45 |
46 |
47 |
48 | private val outPaint = Paint(Paint.ANTI_ALIAS_FLAG).apply {
49 | color = Color.parseColor("#e6e8db")
50 | maskFilter = BlurMaskFilter(shadowRadius.toFloat(), BlurMaskFilter.Blur.SOLID)
51 | }
52 |
53 | // 内圆paint
54 | private val innerCirclePaint = Paint(Paint.ANTI_ALIAS_FLAG).apply {
55 | shader = LinearGradient(centerX - innerRadius, centerY + innerRadius, centerX, centerY - innerRadius,
56 | Color.parseColor("#e0e2e5"), Color.parseColor("#758595"), Shader.TileMode.CLAMP)
57 | }
58 |
59 | override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
60 | setMeasuredDimension(getWidth(widthMeasureSpec), getHeight(heightMeasureSpec))
61 | }
62 |
63 | @RequiresApi(Build.VERSION_CODES.LOLLIPOP)
64 | override fun onDraw(canvas: Canvas?) {
65 | super.onDraw(canvas)
66 | if (canvas != null){
67 | canvas.drawCircle(centerX, centerY, outRadius.toFloat(), outPaint)
68 | canvas.drawCircle(centerX, centerY, innerRadius.toFloat(), innerCirclePaint)
69 | canvas.drawArc(snowyManHandRect, 155f,-120f,false, snowyManHandPaint)
70 | canvas.drawCircle(snowyManHeaderX, snowyManHeaderY, snowyManHeaderRadius.toFloat(), snowyManPaint)
71 | canvas.drawCircle(snowyManBodyX, snowyManBodyY, snowyManBodyRadius.toFloat(), snowyManPaint)
72 | for (snow in snowFlakes){
73 | snow.draw(canvas)
74 | }
75 | handler.postDelayed({
76 | invalidate()
77 | },5)
78 | }
79 | }
80 | }
--------------------------------------------------------------------------------
/app/src/main/java/com/vision/weather/widget/SunnyView.kt:
--------------------------------------------------------------------------------
1 | package com.vision.weather.widget
2 |
3 | import android.animation.ObjectAnimator
4 | import android.animation.ValueAnimator
5 | import android.content.Context
6 | import android.graphics.*
7 | import android.util.AttributeSet
8 | import android.view.View
9 |
10 | class SunnyView @JvmOverloads constructor(
11 | context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0
12 | ) : View(context, attrs, defStyleAttr) {
13 |
14 | init {
15 | // 禁用硬件加速
16 | setLayerType(LAYER_TYPE_SOFTWARE, null)
17 | }
18 |
19 | // 内圆paint
20 | private val innerCirclePaint = Paint(Paint.ANTI_ALIAS_FLAG).apply {
21 | shader = LinearGradient(centerX - innerRadius, centerY + innerRadius, centerX, centerY - innerRadius,
22 | Color.parseColor("#fc5830"), Color.parseColor("#f98c24"), Shader.TileMode.CLAMP)
23 | }
24 | // 外圆paint
25 | private val outCirclePaint = Paint(Paint.ANTI_ALIAS_FLAG).apply {
26 | shader = RadialGradient(centerX, centerY, outRadius.toFloat(), Color.parseColor("#e6e8db"),
27 | Color.parseColor("#c9e8de"), Shader.TileMode.CLAMP)
28 | }
29 | // 阴影paint
30 | private val shadowPaint = Paint(Paint.ANTI_ALIAS_FLAG).apply {
31 | color = Color.parseColor("#f98c24")
32 | maskFilter = BlurMaskFilter(shadowRadius.toFloat(), BlurMaskFilter.Blur.SOLID)
33 | }
34 |
35 | // 黄色圆的圆心横坐标
36 | private val opacityX = centerX + dp2px(60f)
37 | private val opacityY = centerY - dp2px(60f)
38 | private val opacityRadius = dp2px(30f)
39 | private val opacityPaint = Paint(Paint.ANTI_ALIAS_FLAG).apply {
40 | color = Color.parseColor("#ffeb3b")
41 | }
42 |
43 | // 光晕的圆心、半径信息
44 | private var sunshineX = opacityX
45 | private var sunshineY = opacityY
46 | private val sunshineRadius = dp2px(50f)
47 | private val sunshinePaint = Paint(Paint.ANTI_ALIAS_FLAG).apply {
48 | color = Color.parseColor("#19ffffff")
49 | }
50 |
51 |
52 | // 太阳的光晕动画
53 | private val animatorBig = ObjectAnimator.ofFloat(this, "sunshineY",
54 | opacityY, opacityY - dp2px(30f)).apply {
55 | repeatCount = -1
56 | repeatMode = ValueAnimator.REVERSE
57 | duration = 5000
58 | }
59 |
60 |
61 | override fun onAttachedToWindow() {
62 | super.onAttachedToWindow()
63 | animatorBig.start()
64 | }
65 |
66 | override fun onDetachedFromWindow() {
67 | super.onDetachedFromWindow()
68 | animatorBig.cancel()
69 | }
70 |
71 | override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
72 | setMeasuredDimension(getWidth(widthMeasureSpec), getHeight(heightMeasureSpec))
73 | }
74 |
75 | override fun onDraw(canvas: Canvas?) {
76 | super.onDraw(canvas)
77 | if (canvas != null){
78 | canvas.drawCircle(centerX, centerY, outRadius.toFloat(), shadowPaint)
79 | canvas.drawCircle(centerX, centerY, outRadius.toFloat(), outCirclePaint)
80 | canvas.drawCircle(centerX, centerY, innerRadius.toFloat(), innerCirclePaint)
81 |
82 | canvas.save()
83 | // 动画部分
84 | sunshinePaint.color = Color.parseColor("#19ffffff")
85 | canvas.drawCircle(sunshineX, sunshineY, sunshineRadius.toFloat(), sunshinePaint )
86 | sunshinePaint.color = Color.parseColor("#55ffffff")
87 | canvas.drawCircle(sunshineX + dp2px(20f), sunshineY + dp2px(18f), 30f, sunshinePaint)
88 |
89 | canvas.drawCircle(opacityX, opacityY, opacityRadius.toFloat() + dp2px(5f), outCirclePaint)
90 | canvas.drawCircle(opacityX, opacityY, opacityRadius.toFloat(), opacityPaint)
91 | }
92 | }
93 |
94 | private fun setSunshineY(y: Float){
95 | this.sunshineY = y
96 | sunshineX = calculateShadowX(dp2px(60f).toFloat(), sunshineY)
97 | invalidate()
98 | }
99 |
100 | // 计算光晕圆心纵坐标
101 | private fun calculateShadowX(moveRadius: Float ,y: Float): Float{
102 | val lengthY = opacityY - y
103 | val lengthX = Math.sqrt(Math.pow(moveRadius.toDouble(),2.0) - Math.pow(lengthY.toDouble(),2.0))
104 | return (opacityX - lengthX).toFloat()
105 | }
106 |
107 | }
--------------------------------------------------------------------------------
/app/src/main/java/com/vision/weather/widget/WeatherViewConst.kt:
--------------------------------------------------------------------------------
1 | package com.vision.weather.widget
2 |
3 | // 自定义View宽度
4 | val weatherViewWidth = dp2px(300f)
5 | // 自定义View高度
6 | val weatherViewHeight = dp2px(300f)
7 | // 圆心横坐标
8 | val centerX = weatherViewWidth / 2f
9 | // 圆心纵坐标
10 | val centerY = weatherViewHeight / 2f
11 | // 内圆半径
12 | val innerRadius = dp2px(80f)
13 | // 外圆半径
14 | val outRadius = dp2px(90f)
15 | // 阴影半径
16 | val shadowRadius = dp2px(30f)
--------------------------------------------------------------------------------
/app/src/main/java/com/vision/weather/widget/utils.kt:
--------------------------------------------------------------------------------
1 | package com.vision.weather.widget
2 |
3 | import android.view.View
4 | import com.vision.weather.WeatherApplication
5 |
6 | fun dp2px(dpValue: Float): Int{
7 | val scale = WeatherApplication.getContext().resources.displayMetrics.density
8 | return (dpValue * scale + 0.5f).toInt()
9 | }
10 |
11 | fun getWidth(widthMeasureSpec: Int): Int{
12 | var result = 0
13 | val specMode = View.MeasureSpec.getMode(widthMeasureSpec)
14 | val specSize = View.MeasureSpec.getSize(widthMeasureSpec)
15 | when(specMode){
16 | View.MeasureSpec.UNSPECIFIED -> {
17 | result = specSize
18 | }
19 | View.MeasureSpec.AT_MOST -> {
20 | result = getContentWidth()
21 | }
22 | View.MeasureSpec.EXACTLY -> {
23 | result = Math.max(getContentWidth(), specSize)
24 | }
25 | }
26 | return result
27 | }
28 |
29 | fun getHeight(heightMeasureSpec: Int): Int{
30 | var result = 0
31 | val specMode = View.MeasureSpec.getMode(heightMeasureSpec)
32 | val specSize = View.MeasureSpec.getSize(heightMeasureSpec)
33 | when(specMode){
34 | View.MeasureSpec.UNSPECIFIED -> {
35 | result = specSize
36 | }
37 | View.MeasureSpec.AT_MOST -> {
38 | result = getContentHeight()
39 | }
40 | View.MeasureSpec.EXACTLY -> {
41 | result = Math.max(getContentHeight(), specSize)
42 | }
43 | }
44 | return result
45 | }
46 |
47 | fun getContentWidth(): Int{
48 | return weatherViewWidth
49 | }
50 |
51 | fun getContentHeight(): Int{
52 | return weatherViewHeight
53 | }
--------------------------------------------------------------------------------
/app/src/main/res/drawable-v24/ic_launcher_foreground.xml:
--------------------------------------------------------------------------------
1 |
7 |
12 |
13 |
19 |