├── .gitignore
├── .idea
├── compiler.xml
├── copyright
│ └── profiles_settings.xml
├── gradle.xml
├── misc.xml
├── modules.xml
└── runConfigurations.xml
├── README.md
├── app
├── .gitignore
├── build.gradle
├── proguard-rules.pro
└── src
│ ├── androidTest
│ └── java
│ │ └── com
│ │ └── example
│ │ └── jsion
│ │ └── hazyviewdemo
│ │ └── ExampleInstrumentedTest.java
│ ├── main
│ ├── AndroidManifest.xml
│ ├── java
│ │ └── com
│ │ │ └── example
│ │ │ └── jsion
│ │ │ └── hazyviewdemo
│ │ │ ├── customview
│ │ │ └── HazyView.java
│ │ │ └── ui
│ │ │ └── MainActivity.java
│ └── res
│ │ ├── layout
│ │ └── activity_main.xml
│ │ ├── mipmap-hdpi
│ │ └── ic_launcher.png
│ │ ├── mipmap-mdpi
│ │ └── ic_launcher.png
│ │ ├── mipmap-xhdpi
│ │ └── ic_launcher.png
│ │ ├── mipmap-xxhdpi
│ │ └── ic_launcher.png
│ │ ├── mipmap-xxxhdpi
│ │ └── ic_launcher.png
│ │ ├── values-w820dp
│ │ └── dimens.xml
│ │ └── values
│ │ ├── attrs.xml
│ │ ├── colors.xml
│ │ ├── dimens.xml
│ │ ├── strings.xml
│ │ └── styles.xml
│ └── test
│ └── java
│ └── com
│ └── example
│ └── jsion
│ └── hazyviewdemo
│ └── ExampleUnitTest.java
├── 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/workspace.xml
5 | /.idea/libraries
6 | .DS_Store
7 | /build
8 | /captures
9 | .externalNativeBuild
10 |
--------------------------------------------------------------------------------
/.idea/compiler.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
--------------------------------------------------------------------------------
/.idea/copyright/profiles_settings.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
--------------------------------------------------------------------------------
/.idea/gradle.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
17 |
18 |
--------------------------------------------------------------------------------
/.idea/misc.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
19 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
--------------------------------------------------------------------------------
/.idea/modules.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
--------------------------------------------------------------------------------
/.idea/runConfigurations.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
11 |
12 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # HazyViewDemo
2 | 刻度表盘雾霾换滤芯提示view
3 | **雾霾在帝都的持久度惊人,很多科技公司也冠冕堂皇的做起来了空气净化器,来麻痹自己,所以Android客户端一个显示空气质量的表盘是必不可少的,昨天在群里看到有人问这个东西怎么做,就闲的稍微写了一下,效果如下!**
4 |
5 | ###原图
6 | 
7 |
8 | 声明一下最外层的渐变以及粗细逐渐增加的圆弧,没有完成,等有时间完善下,先把牛逼吹出去,万一完不成,你来打我啊哈哈哈哈哈......(效果图外面的渐变弧度,从0到进度点线宽是逐渐递增的,只是有个想法可以实现,但是还没写,如果有人看见有合适的思路可以指点下,谢谢)
9 |
10 | ###看下我们的实现的效果图
11 |
12 | 
13 |
14 |
15 | ###实现思路
16 |
17 | 1. view细节拆分
18 | 2. view属性设定
19 | 3. view绘制
20 |
21 |
22 | ###细节拆分部分
23 | 效果图如果用Android自定义view来做可以分为如下部分
24 |
25 |
26 | - 白色表盘
27 | - 进度指针
28 | - 表盘上文字
29 | - 最外层家变弧(未完成)
30 |
31 | 涉及到的canvas API 特别简单
32 |
33 | ```
34 | canvas.drawCircle
35 | canvas.drawText
36 | canvas.drawLine
37 | ```
38 |
39 | ###属性设定
40 | 这一步基本可以忽略了,如果想让自定义和textview一样可以在xml中可以使用属性那么可以做这一步,如果你就想写死,那么基本可以省略100行代码,因为这个雾霾view透传的属性比较多,直接上代码
41 |
42 | ```
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 | // 下面就是在自定义view中获取部分
61 |
62 | private void initAttr(Context context, AttributeSet attrs) {
63 | TypedArray typedArray = context.getTheme().obtainStyledAttributes(attrs, R.styleable.HazyView, 0, R.style.def_hazy_view_style);
64 | int count = typedArray.getIndexCount();
65 | for (int i = 0; i < count; i++) {
66 | int attr = typedArray.getIndex(i);
67 | switch (attr) {
68 | case R.styleable.HazyView_hazy_value_color:
69 | hazyValueColor = typedArray.getColor(attr, Color.BLACK);
70 | break;
71 | case R.styleable.HazyView_hazy_value_size:
72 | hazyValueSize = typedArray.getDimensionPixelSize(attr, 0);
73 | break;
74 | case R.styleable.HazyView_hazy_title_color:
75 | hazyTitleColor = typedArray.getColor(attr, Color.BLACK);
76 | break;
77 | case R.styleable.HazyView_hazy_title_size:
78 | hazyTitleSize = typedArray.getDimensionPixelSize(attr, 0);
79 | break;
80 | case R.styleable.HazyView_hazy_desc_color:
81 | hazyDescColor = typedArray.getColor(attr, Color.BLACK);
82 | break;
83 | case R.styleable.HazyView_hazy_desc_size:
84 | hazyDescSize = typedArray.getDimensionPixelSize(attr, 0);
85 | break;
86 | case R.styleable.HazyView_hazy_view_bg_color:
87 | hazyViewBgColor = typedArray.getColor(attr, Color.BLACK);
88 | break;
89 | case R.styleable.HazyView_hazy_pb_bg_color:
90 | hazyPbBgColor = typedArray.getColor(attr, Color.BLACK);
91 | break;
92 | case R.styleable.HazyView_hazy_pb_color:
93 | hazyPbColor = typedArray.getColor(attr, Color.BLACK);
94 | break;
95 | case R.styleable.HazyView_hazy_pb_line_width:
96 | hazyPbLineWidth = typedArray.getDimensionPixelOffset(attr, 0);
97 | break;
98 | case R.styleable.HazyView_hazy_view_breach_degree:
99 | hazyBreDegreen = typedArray.getInt(attr, 0);
100 | break;
101 | case R.styleable.HazyView_hazy_value_desc:
102 | hazyValueDesc = typedArray.getString(attr);
103 | break;
104 | case R.styleable.HazyView_hazy_title_desc:
105 | hazyTitleDesc = typedArray.getString(attr);
106 | break;
107 | case R.styleable.HazyView_hazy_desc:
108 | hazyContentDesc = typedArray.getString(attr);
109 | break;
110 | }
111 | }
112 | typedArray.recycle();
113 | }
114 |
115 | ```
116 |
117 | 上面将近100行代码是没什么技术含量的,可以忽略;
118 |
119 |
120 | ###重要的最后一步,绘制
121 | 我们在确定了view的尺寸之后,根据UI给的设计图我们粗略的估计出各个图层所占的比例,方便适配,尽量不要用写死的尺寸,比例是不会变的,
122 |
123 | ```
124 | /**
125 | * 默认view的大小
126 | */
127 | private static final int DEF_VIEW_SIZE = 300;
128 | /**
129 | * 进度占view的比例
130 | */
131 | private static final float VIEW_PB_SCALE = 320 / 340.F;
132 | /**
133 | * 中间大白点的边缘比例
134 | */
135 | private static final float VIEW_CIRCLE_END_SCALE = 300 / 340.F;
136 | /**
137 | * 中间大白点view的比例
138 | */
139 | private static final float VIEW_CIRCLE_SCALE = 280 / 340.F;
140 | /**
141 | * 线条的进度的高度比例
142 | */
143 | private static final float VIEW_LINE_SCALE = 12 / 340.F;
144 | ....
145 | 类似这样的,等view完成后,哪里要调整只需要改变这里的比例即可,
146 | ```
147 |
148 | ####绘制变表盘,一API完成,
149 |
150 | ```
151 | //这里我用了三句,前两句是给加了个阴影,不想要的可以删掉
152 | private void drawBgCircle(Canvas canvas) {
153 | hazyViewBgPaint.setShadowLayer(10, 2, 2, Color.GRAY);
154 | setLayerType(LAYER_TYPE_SOFTWARE, null);
155 | canvas.drawCircle(viewCenter.x, viewCenter.y, contentCircleRadio, hazyViewBgPaint);
156 | }
157 | ```
158 |
159 | ####绘制刻度,两句API canvas 旋转 + 保存,注意刻度的计算
160 |
161 | ```
162 | private void drawHazyPbBgLine(Canvas canvas) {
163 | // 注意画布旋转的技巧,以及进度和背景的计算
164 | canvas.rotate(178 + hazyBreDegreen / 2, viewCenter.x, viewCenter.y);
165 | canvas.save();
166 | // 这里是绘制进度刻度和总刻度,不要分开写for循环,尽量写到一个循环里面ondraw中调用循环本来就是 "大胸之罩"了,ondraw频繁调用在加上循环,我擦嘞....
167 | for (int i = 0; i < 360 - hazyBreDegreen; i++) {
168 | if (i % DEF_INTERVAL_DEGREE == 0) {
169 | canvas.rotate(DEF_INTERVAL_DEGREE, viewCenter.x, viewCenter.y);
170 | if (i < 360 - hazyBreDegreen * percent - 360 * (1 - percent)) {
171 | canvas.drawLine(viewCenter.x, contentPadding + contentSize * DEF_CONTENT_PADDING_F, viewCenter.x, contentPadding + contentSize * (VIEW_LINE_SCALE + DEF_CONTENT_PADDING_F), hazyPbPaint);
172 | } else {
173 | canvas.drawLine(viewCenter.x, contentPadding + contentSize * DEF_CONTENT_PADDING_F, viewCenter.x, contentPadding + contentSize * (VIEW_LINE_SCALE + DEF_CONTENT_PADDING_F), hazyPbBgPaint);
174 | }
175 | }
176 | }
177 | canvas.restore();
178 | }
179 |
180 | ```
181 |
182 | ####绘制文字,drawText即可
183 |
184 | ```
185 | //这里我简单的封装了一下文字的坐标计算,这里要根据UI给的文字比例
186 | private void drawHazyValueAndInfo(Canvas canvas) {
187 | hazyValuePoint = getTextPointInView(hazyValuePaint, hazyValueDesc, hazyViewWidth, hazyViewHeight);
188 | hazyTitlePoint = getTextPointInView(hazyTitlePaint, hazyTitleDesc, hazyViewWidth, (int) (hazyViewHeight - hazyViewHeight * VIEW_TEXT_SCALE));
189 | hazyDescPoint = getTextPointInView(hazyDescPaint, hazyContentDesc, hazyViewWidth, (int) (hazyViewHeight + hazyViewHeight * VIEW_TEXT_SCALE));
190 | canvas.drawText(hazyValueDesc, hazyValuePoint.x, hazyValuePoint.y, hazyValuePaint);
191 | canvas.drawText(hazyTitleDesc, hazyTitlePoint.x, hazyTitlePoint.y, hazyTitlePaint);
192 | canvas.drawText(hazyContentDesc, hazyDescPoint.x, hazyDescPoint.y, hazyDescPaint);
193 | }
194 |
195 | ```
196 |
197 | ####透传接口设置百分比以及雾霾爆表值
198 |
199 | ```
200 | /**
201 | * 设置当前的百分比
202 | *
203 | * @param percent 当前的百分比
204 | */
205 | public void setCurrentPercent(float percent) {
206 | this.percent = percent / 100.F;
207 | // 根据当前爆表值,计算出应该显示的值是多少
208 | hazyValueDesc = String.valueOf((int) (maxHzV * this.percent));
209 | invalidate();
210 | }
211 |
212 | public void setHzValueMax(int maxV) {
213 | this.maxHzV = maxV;
214 | }
215 | ```
216 |
217 | 到此这个view就拆分完毕了,没有所谓的怎么让一个圆环绘制两个颜色,以及对不齐的问题,把问题拆分即可,基本核心代码就是这里所有的了
218 | #传送门源代码下载地址:[https://github.com/GuoFeilong/HazyViewDemo记得star谢谢](https://github.com/GuoFeilong/HazyViewDemo)
219 |
220 |
221 |
--------------------------------------------------------------------------------
/app/.gitignore:
--------------------------------------------------------------------------------
1 | /build
2 |
--------------------------------------------------------------------------------
/app/build.gradle:
--------------------------------------------------------------------------------
1 | apply plugin: 'com.android.application'
2 |
3 | android {
4 | compileSdkVersion 25
5 | buildToolsVersion "24.0.3"
6 | defaultConfig {
7 | applicationId "com.example.jsion.hazyviewdemo"
8 | minSdkVersion 16
9 | targetSdkVersion 25
10 | versionCode 1
11 | versionName "1.0"
12 | testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
13 | }
14 | buildTypes {
15 | release {
16 | minifyEnabled false
17 | proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
18 | }
19 | }
20 | }
21 |
22 | dependencies {
23 | compile fileTree(dir: 'libs', include: ['*.jar'])
24 | androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {
25 | exclude group: 'com.android.support', module: 'support-annotations'
26 | })
27 | compile 'com.android.support:appcompat-v7:25.1.0'
28 | testCompile 'junit:junit:4.12'
29 | }
30 |
--------------------------------------------------------------------------------
/app/proguard-rules.pro:
--------------------------------------------------------------------------------
1 | # Add project specific ProGuard rules here.
2 | # By default, the flags in this file are appended to flags specified
3 | # in /Users/Jsion/Library/Android/sdk/tools/proguard/proguard-android.txt
4 | # You can edit the include path and order by changing the proguardFiles
5 | # directive in build.gradle.
6 | #
7 | # For more details, see
8 | # http://developer.android.com/guide/developing/tools/proguard.html
9 |
10 | # Add any project specific keep options here:
11 |
12 | # If your project uses WebView with JS, uncomment the following
13 | # and specify the fully qualified class name to the JavaScript interface
14 | # class:
15 | #-keepclassmembers class fqcn.of.javascript.interface.for.webview {
16 | # public *;
17 | #}
18 |
--------------------------------------------------------------------------------
/app/src/androidTest/java/com/example/jsion/hazyviewdemo/ExampleInstrumentedTest.java:
--------------------------------------------------------------------------------
1 | package com.example.jsion.hazyviewdemo;
2 |
3 | import android.content.Context;
4 | import android.support.test.InstrumentationRegistry;
5 | import android.support.test.runner.AndroidJUnit4;
6 |
7 | import org.junit.Test;
8 | import org.junit.runner.RunWith;
9 |
10 | import static org.junit.Assert.*;
11 |
12 | /**
13 | * Instrumentation test, which will execute on an Android device.
14 | *
15 | * @see Testing documentation
16 | */
17 | @RunWith(AndroidJUnit4.class)
18 | public class ExampleInstrumentedTest {
19 | @Test
20 | public void useAppContext() throws Exception {
21 | // Context of the app under test.
22 | Context appContext = InstrumentationRegistry.getTargetContext();
23 |
24 | assertEquals("com.example.jsion.hazyviewdemo", appContext.getPackageName());
25 | }
26 | }
27 |
--------------------------------------------------------------------------------
/app/src/main/AndroidManifest.xml:
--------------------------------------------------------------------------------
1 |
2 |
4 |
5 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
--------------------------------------------------------------------------------
/app/src/main/java/com/example/jsion/hazyviewdemo/customview/HazyView.java:
--------------------------------------------------------------------------------
1 | package com.example.jsion.hazyviewdemo.customview;
2 |
3 | import android.content.Context;
4 | import android.content.res.TypedArray;
5 | import android.graphics.Canvas;
6 | import android.graphics.Color;
7 | import android.graphics.Paint;
8 | import android.graphics.Point;
9 | import android.util.AttributeSet;
10 | import android.util.TypedValue;
11 | import android.view.View;
12 |
13 | import com.example.jsion.hazyviewdemo.R;
14 |
15 | /**
16 | * Created by Feilong.Guo on 2017/1/16.
17 | */
18 |
19 | public class HazyView extends View {
20 | private static final int DEF_MAX_HZ = 550;
21 | /**
22 | * 默认的角度间隔
23 | */
24 | private static final int DEF_INTERVAL_DEGREE = 5;
25 | /**
26 | * 内容距离view的padding
27 | */
28 | private static final int DEF_CONTENT_PADDING = 10;
29 | /**
30 | * 进度距离白点的距离比例
31 | */
32 | private static final float DEF_CONTENT_PADDING_F = 5 / 340.F;
33 | /**
34 | * 默认view的大小
35 | */
36 | private static final int DEF_VIEW_SIZE = 300;
37 | /**
38 | * 进度占view的比例
39 | */
40 | private static final float VIEW_PB_SCALE = 320 / 340.F;
41 | /**
42 | * 中间大白点的边缘比例
43 | */
44 | private static final float VIEW_CIRCLE_END_SCALE = 300 / 340.F;
45 | /**
46 | * 中间大白点view的比例
47 | */
48 | private static final float VIEW_CIRCLE_SCALE = 280 / 340.F;
49 | /**
50 | * 线条的进度的高度比例
51 | */
52 | private static final float VIEW_LINE_SCALE = 12 / 340.F;
53 | /**
54 | * 文字描述比例
55 | */
56 | private static final float VIEW_TEXT_SCALE = 100 / 340.F;
57 |
58 | private int hazyViewHeight;
59 | private int hazyViewWidth;
60 | private int contentRadio;
61 | private int contentPbRadio;
62 | private int contentCircleRadio;
63 | private int contentPadding;
64 | private Point viewCenter;
65 | private Point hazyValuePoint;
66 | private Point hazyTitlePoint;
67 | private Point hazyDescPoint;
68 | private float percent;
69 | private int maxHzV;
70 |
71 | private Paint hazyValuePaint;
72 | private Paint hazyTitlePaint;
73 | private Paint hazyDescPaint;
74 | private Paint hazyViewBgPaint;
75 | private Paint hazyPbBgPaint;
76 | private Paint hazyPbPaint;
77 |
78 |
79 | private int hazyValueColor;
80 | private int hazyValueSize;
81 | private int hazyTitleColor;
82 | private int hazyTitleSize;
83 | private int hazyDescColor;
84 | private int hazyDescSize;
85 | private int hazyViewBgColor;
86 | private int hazyPbBgColor;
87 | private int hazyPbColor;
88 | private int hazyPbLineWidth;
89 | private int hazyBreDegreen;
90 | private int contentSize;
91 | private String hazyValueDesc;
92 | private String hazyTitleDesc;
93 | private String hazyContentDesc;
94 |
95 | public HazyView(Context context) {
96 | this(context, null);
97 | }
98 |
99 | public HazyView(Context context, AttributeSet attrs) {
100 | this(context, attrs, 0);
101 | }
102 |
103 | public HazyView(Context context, AttributeSet attrs, int defStyleAttr) {
104 | super(context, attrs, defStyleAttr);
105 | initAttr(context, attrs);
106 | initData();
107 | initPaints();
108 | }
109 |
110 | private void initPaints() {
111 | hazyValuePaint = creatPaint(hazyValueColor, hazyValueSize, Paint.Style.FILL, 0);
112 | hazyTitlePaint = creatPaint(hazyTitleColor, hazyTitleSize, Paint.Style.FILL, 0);
113 | hazyDescPaint = creatPaint(hazyDescColor, hazyDescSize, Paint.Style.FILL, 0);
114 | hazyViewBgPaint = creatPaint(hazyViewBgColor, 0, Paint.Style.FILL, 0);
115 | hazyPbBgPaint = creatPaint(hazyPbBgColor, 0, Paint.Style.FILL, hazyPbLineWidth);
116 | hazyPbPaint = creatPaint(hazyPbColor, 0, Paint.Style.FILL, hazyPbLineWidth);
117 | }
118 |
119 | private void initAttr(Context context, AttributeSet attrs) {
120 | TypedArray typedArray = context.getTheme().obtainStyledAttributes(attrs, R.styleable.HazyView, 0, R.style.def_hazy_view_style);
121 | int count = typedArray.getIndexCount();
122 | for (int i = 0; i < count; i++) {
123 | int attr = typedArray.getIndex(i);
124 | switch (attr) {
125 | case R.styleable.HazyView_hazy_value_color:
126 | hazyValueColor = typedArray.getColor(attr, Color.BLACK);
127 | break;
128 | case R.styleable.HazyView_hazy_value_size:
129 | hazyValueSize = typedArray.getDimensionPixelSize(attr, 0);
130 | break;
131 | case R.styleable.HazyView_hazy_title_color:
132 | hazyTitleColor = typedArray.getColor(attr, Color.BLACK);
133 | break;
134 | case R.styleable.HazyView_hazy_title_size:
135 | hazyTitleSize = typedArray.getDimensionPixelSize(attr, 0);
136 | break;
137 | case R.styleable.HazyView_hazy_desc_color:
138 | hazyDescColor = typedArray.getColor(attr, Color.BLACK);
139 | break;
140 | case R.styleable.HazyView_hazy_desc_size:
141 | hazyDescSize = typedArray.getDimensionPixelSize(attr, 0);
142 | break;
143 | case R.styleable.HazyView_hazy_view_bg_color:
144 | hazyViewBgColor = typedArray.getColor(attr, Color.BLACK);
145 | break;
146 | case R.styleable.HazyView_hazy_pb_bg_color:
147 | hazyPbBgColor = typedArray.getColor(attr, Color.BLACK);
148 | break;
149 | case R.styleable.HazyView_hazy_pb_color:
150 | hazyPbColor = typedArray.getColor(attr, Color.BLACK);
151 | break;
152 | case R.styleable.HazyView_hazy_pb_line_width:
153 | hazyPbLineWidth = typedArray.getDimensionPixelOffset(attr, 0);
154 | break;
155 | case R.styleable.HazyView_hazy_view_breach_degree:
156 | hazyBreDegreen = typedArray.getInt(attr, 0);
157 | break;
158 | case R.styleable.HazyView_hazy_value_desc:
159 | hazyValueDesc = typedArray.getString(attr);
160 | break;
161 | case R.styleable.HazyView_hazy_title_desc:
162 | hazyTitleDesc = typedArray.getString(attr);
163 | break;
164 | case R.styleable.HazyView_hazy_desc:
165 | hazyContentDesc = typedArray.getString(attr);
166 | break;
167 | }
168 | }
169 | typedArray.recycle();
170 | }
171 |
172 | private void initData() {
173 | contentPadding = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, DEF_CONTENT_PADDING, getContext().getResources().getDisplayMetrics());
174 | maxHzV = DEF_MAX_HZ;
175 | }
176 |
177 | @Override
178 | protected void onSizeChanged(int w, int h, int oldw, int oldh) {
179 | super.onSizeChanged(w, h, oldw, oldh);
180 | hazyViewHeight = h;
181 | hazyViewWidth = w;
182 | viewCenter = new Point(w / 2, h / 2);
183 | contentSize = w - 2 * contentPadding;
184 | contentRadio = contentSize / 2;
185 | contentPbRadio = (int) (contentRadio * VIEW_PB_SCALE);
186 | contentCircleRadio = (int) (contentRadio * VIEW_CIRCLE_SCALE);
187 | }
188 |
189 | @Override
190 | protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
191 | int widthMode = MeasureSpec.getMode(widthMeasureSpec);
192 | int heightMode = MeasureSpec.getMode(heightMeasureSpec);
193 |
194 | int widthSize;
195 | int heightSize;
196 |
197 | if (widthMode == MeasureSpec.AT_MOST || widthMode == MeasureSpec.UNSPECIFIED) {
198 | widthSize = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, DEF_VIEW_SIZE, getResources().getDisplayMetrics());
199 | widthMeasureSpec = MeasureSpec.makeMeasureSpec(widthSize, MeasureSpec.EXACTLY);
200 | }
201 |
202 | if (heightMode == MeasureSpec.AT_MOST || heightMode == MeasureSpec.UNSPECIFIED) {
203 | heightSize = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, DEF_VIEW_SIZE, getResources().getDisplayMetrics());
204 | heightMeasureSpec = MeasureSpec.makeMeasureSpec(heightSize, MeasureSpec.EXACTLY);
205 | }
206 | super.onMeasure(widthMeasureSpec, heightMeasureSpec);
207 | }
208 |
209 | @Override
210 | protected void onDraw(Canvas canvas) {
211 | super.onDraw(canvas);
212 | drawBgCircle(canvas);
213 | drawHazyValueAndInfo(canvas);
214 | drawHazyPbBgLine(canvas);
215 | drawHazyPbLine(canvas);
216 | }
217 |
218 | // TODO: 2017/1/17 绘制最外层的阴影线
219 | private void drawHazyPbLine(Canvas canvas) {
220 |
221 | }
222 |
223 |
224 | /**
225 | * 绘制刻度背景进度
226 | *
227 | * @param canvas 画布
228 | */
229 | private void drawHazyPbBgLine(Canvas canvas) {
230 | // 注意画布旋转的技巧,以及进度和背景的计算
231 | canvas.rotate(178 + hazyBreDegreen / 2, viewCenter.x, viewCenter.y);
232 | canvas.save();
233 | for (int i = 0; i < 360 - hazyBreDegreen; i++) {
234 | if (i % DEF_INTERVAL_DEGREE == 0) {
235 | canvas.rotate(DEF_INTERVAL_DEGREE, viewCenter.x, viewCenter.y);
236 | if (i < 360 - hazyBreDegreen * percent - 360 * (1 - percent)) {
237 | canvas.drawLine(viewCenter.x, contentPadding + contentSize * DEF_CONTENT_PADDING_F, viewCenter.x, contentPadding + contentSize * (VIEW_LINE_SCALE + DEF_CONTENT_PADDING_F), hazyPbPaint);
238 | } else {
239 | canvas.drawLine(viewCenter.x, contentPadding + contentSize * DEF_CONTENT_PADDING_F, viewCenter.x, contentPadding + contentSize * (VIEW_LINE_SCALE + DEF_CONTENT_PADDING_F), hazyPbBgPaint);
240 | }
241 | }
242 | }
243 | canvas.restore();
244 | }
245 |
246 | /**
247 | * 注意三行文字的计算显示
248 | *
249 | * @param canvas 画布
250 | */
251 | private void drawHazyValueAndInfo(Canvas canvas) {
252 | hazyValuePoint = getTextPointInView(hazyValuePaint, hazyValueDesc, hazyViewWidth, hazyViewHeight);
253 | hazyTitlePoint = getTextPointInView(hazyTitlePaint, hazyTitleDesc, hazyViewWidth, (int) (hazyViewHeight - hazyViewHeight * VIEW_TEXT_SCALE));
254 | hazyDescPoint = getTextPointInView(hazyDescPaint, hazyContentDesc, hazyViewWidth, (int) (hazyViewHeight + hazyViewHeight * VIEW_TEXT_SCALE));
255 | canvas.drawText(hazyValueDesc, hazyValuePoint.x, hazyValuePoint.y, hazyValuePaint);
256 | canvas.drawText(hazyTitleDesc, hazyTitlePoint.x, hazyTitlePoint.y, hazyTitlePaint);
257 | canvas.drawText(hazyContentDesc, hazyDescPoint.x, hazyDescPoint.y, hazyDescPaint);
258 | }
259 |
260 | private void drawBgCircle(Canvas canvas) {
261 | hazyViewBgPaint.setShadowLayer(10, 2, 2, Color.GRAY);
262 | setLayerType(LAYER_TYPE_SOFTWARE, null);
263 | canvas.drawCircle(viewCenter.x, viewCenter.y, contentCircleRadio, hazyViewBgPaint);
264 | }
265 |
266 |
267 | private Paint creatPaint(int paintColor, int textSize, Paint.Style style, int lineWidth) {
268 | Paint paint = new Paint();
269 | paint.setColor(paintColor);
270 | paint.setAntiAlias(true);
271 | paint.setStrokeWidth(lineWidth);
272 | paint.setDither(true);
273 | paint.setTextSize(textSize);
274 | paint.setStyle(style);
275 | paint.setStrokeCap(Paint.Cap.ROUND);
276 | paint.setStrokeJoin(Paint.Join.ROUND);
277 | return paint;
278 | }
279 |
280 | private Point getTextPointInView(Paint textPaint, String textDesc, int w, int h) {
281 | if (null == textDesc) return null;
282 | Point point = new Point();
283 | int textW = (w - (int) textPaint.measureText(textDesc)) / 2;
284 | Paint.FontMetrics fm = textPaint.getFontMetrics();
285 | int textH = (int) Math.ceil(fm.descent - fm.top);
286 | point.set(textW, h / 2 + textH / 2 - textH / 4);
287 | return point;
288 | }
289 |
290 | /**
291 | * 设置当前的百分比
292 | *
293 | * @param percent 当前的百分比
294 | */
295 | public void setCurrentPercent(float percent) {
296 | this.percent = percent / 100.F;
297 | hazyValueDesc = String.valueOf((int) (maxHzV * this.percent));
298 | invalidate();
299 | }
300 |
301 | public void setHzValueMax(int maxV) {
302 | this.maxHzV = maxV;
303 | }
304 |
305 | }
306 |
--------------------------------------------------------------------------------
/app/src/main/java/com/example/jsion/hazyviewdemo/ui/MainActivity.java:
--------------------------------------------------------------------------------
1 | package com.example.jsion.hazyviewdemo.ui;
2 |
3 | import android.support.v7.app.AppCompatActivity;
4 | import android.os.Bundle;
5 |
6 | import com.example.jsion.hazyviewdemo.R;
7 | import com.example.jsion.hazyviewdemo.customview.HazyView;
8 |
9 | public class MainActivity extends AppCompatActivity {
10 | @Override
11 | protected void onCreate(Bundle savedInstanceState) {
12 | super.onCreate(savedInstanceState);
13 | setContentView(R.layout.activity_main);
14 | HazyView hazyView = (HazyView) findViewById(R.id.hz_view);
15 | hazyView.setHzValueMax(550);
16 | hazyView.setCurrentPercent(68);
17 |
18 | }
19 | }
20 |
--------------------------------------------------------------------------------
/app/src/main/res/layout/activity_main.xml:
--------------------------------------------------------------------------------
1 |
2 |
14 |
15 |
24 |
25 |
26 |
27 |
--------------------------------------------------------------------------------
/app/src/main/res/mipmap-hdpi/ic_launcher.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GuoFeilong/HazyViewDemo/8398b4caad9f7bb5b76acf4bd93217e12daa6c9a/app/src/main/res/mipmap-hdpi/ic_launcher.png
--------------------------------------------------------------------------------
/app/src/main/res/mipmap-mdpi/ic_launcher.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GuoFeilong/HazyViewDemo/8398b4caad9f7bb5b76acf4bd93217e12daa6c9a/app/src/main/res/mipmap-mdpi/ic_launcher.png
--------------------------------------------------------------------------------
/app/src/main/res/mipmap-xhdpi/ic_launcher.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GuoFeilong/HazyViewDemo/8398b4caad9f7bb5b76acf4bd93217e12daa6c9a/app/src/main/res/mipmap-xhdpi/ic_launcher.png
--------------------------------------------------------------------------------
/app/src/main/res/mipmap-xxhdpi/ic_launcher.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GuoFeilong/HazyViewDemo/8398b4caad9f7bb5b76acf4bd93217e12daa6c9a/app/src/main/res/mipmap-xxhdpi/ic_launcher.png
--------------------------------------------------------------------------------
/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GuoFeilong/HazyViewDemo/8398b4caad9f7bb5b76acf4bd93217e12daa6c9a/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png
--------------------------------------------------------------------------------
/app/src/main/res/values-w820dp/dimens.xml:
--------------------------------------------------------------------------------
1 |
2 |
5 | 64dp
6 |
7 |
--------------------------------------------------------------------------------
/app/src/main/res/values/attrs.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
--------------------------------------------------------------------------------
/app/src/main/res/values/colors.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 | #3F51B5
4 | #303F9F
5 | #FF4081
6 |
7 |
--------------------------------------------------------------------------------
/app/src/main/res/values/dimens.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 | 16dp
4 | 16dp
5 |
6 |
--------------------------------------------------------------------------------
/app/src/main/res/values/strings.xml:
--------------------------------------------------------------------------------
1 |
2 | HazyViewDemo
3 |
4 |
--------------------------------------------------------------------------------
/app/src/main/res/values/styles.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
10 |
11 |
25 |
26 |
27 |
--------------------------------------------------------------------------------
/app/src/test/java/com/example/jsion/hazyviewdemo/ExampleUnitTest.java:
--------------------------------------------------------------------------------
1 | package com.example.jsion.hazyviewdemo;
2 |
3 | import org.junit.Test;
4 |
5 | import static org.junit.Assert.*;
6 |
7 | /**
8 | * Example local unit test, which will execute on the development machine (host).
9 | *
10 | * @see Testing documentation
11 | */
12 | public class ExampleUnitTest {
13 | @Test
14 | public void addition_isCorrect() throws Exception {
15 | assertEquals(4, 2 + 2);
16 | }
17 | }
--------------------------------------------------------------------------------
/build.gradle:
--------------------------------------------------------------------------------
1 | // Top-level build file where you can add configuration options common to all sub-projects/modules.
2 |
3 | buildscript {
4 | repositories {
5 | jcenter()
6 | }
7 | dependencies {
8 | classpath 'com.android.tools.build:gradle:2.2.3'
9 |
10 | // NOTE: Do not place your application dependencies here; they belong
11 | // in the individual module build.gradle files
12 | }
13 | }
14 |
15 | allprojects {
16 | repositories {
17 | jcenter()
18 | }
19 | }
20 |
21 | task clean(type: Delete) {
22 | delete rootProject.buildDir
23 | }
24 |
--------------------------------------------------------------------------------
/gradle.properties:
--------------------------------------------------------------------------------
1 | # Project-wide Gradle settings.
2 |
3 | # IDE (e.g. Android Studio) users:
4 | # Gradle settings configured through the IDE *will override*
5 | # any settings specified in this file.
6 |
7 | # For more details on how to configure your build environment visit
8 | # http://www.gradle.org/docs/current/userguide/build_environment.html
9 |
10 | # Specifies the JVM arguments used for the daemon process.
11 | # The setting is particularly useful for tweaking memory settings.
12 | org.gradle.jvmargs=-Xmx1536m
13 |
14 | # When configured, Gradle will run in incubating parallel mode.
15 | # This option should only be used with decoupled projects. More details, visit
16 | # http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects
17 | # org.gradle.parallel=true
18 |
--------------------------------------------------------------------------------
/gradle/wrapper/gradle-wrapper.jar:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GuoFeilong/HazyViewDemo/8398b4caad9f7bb5b76acf4bd93217e12daa6c9a/gradle/wrapper/gradle-wrapper.jar
--------------------------------------------------------------------------------
/gradle/wrapper/gradle-wrapper.properties:
--------------------------------------------------------------------------------
1 | #Mon Dec 28 10:00:20 PST 2015
2 | distributionBase=GRADLE_USER_HOME
3 | distributionPath=wrapper/dists
4 | zipStoreBase=GRADLE_USER_HOME
5 | zipStorePath=wrapper/dists
6 | distributionUrl=https\://services.gradle.org/distributions/gradle-2.14.1-all.zip
7 |
--------------------------------------------------------------------------------
/gradlew:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env bash
2 |
3 | ##############################################################################
4 | ##
5 | ## Gradle start up script for UN*X
6 | ##
7 | ##############################################################################
8 |
9 | # Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
10 | DEFAULT_JVM_OPTS=""
11 |
12 | APP_NAME="Gradle"
13 | APP_BASE_NAME=`basename "$0"`
14 |
15 | # Use the maximum available, or set MAX_FD != -1 to use that value.
16 | MAX_FD="maximum"
17 |
18 | warn ( ) {
19 | echo "$*"
20 | }
21 |
22 | die ( ) {
23 | echo
24 | echo "$*"
25 | echo
26 | exit 1
27 | }
28 |
29 | # OS specific support (must be 'true' or 'false').
30 | cygwin=false
31 | msys=false
32 | darwin=false
33 | case "`uname`" in
34 | CYGWIN* )
35 | cygwin=true
36 | ;;
37 | Darwin* )
38 | darwin=true
39 | ;;
40 | MINGW* )
41 | msys=true
42 | ;;
43 | esac
44 |
45 | # Attempt to set APP_HOME
46 | # Resolve links: $0 may be a link
47 | PRG="$0"
48 | # Need this for relative symlinks.
49 | while [ -h "$PRG" ] ; do
50 | ls=`ls -ld "$PRG"`
51 | link=`expr "$ls" : '.*-> \(.*\)$'`
52 | if expr "$link" : '/.*' > /dev/null; then
53 | PRG="$link"
54 | else
55 | PRG=`dirname "$PRG"`"/$link"
56 | fi
57 | done
58 | SAVED="`pwd`"
59 | cd "`dirname \"$PRG\"`/" >/dev/null
60 | APP_HOME="`pwd -P`"
61 | cd "$SAVED" >/dev/null
62 |
63 | CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar
64 |
65 | # Determine the Java command to use to start the JVM.
66 | if [ -n "$JAVA_HOME" ] ; then
67 | if [ -x "$JAVA_HOME/jre/sh/java" ] ; then
68 | # IBM's JDK on AIX uses strange locations for the executables
69 | JAVACMD="$JAVA_HOME/jre/sh/java"
70 | else
71 | JAVACMD="$JAVA_HOME/bin/java"
72 | fi
73 | if [ ! -x "$JAVACMD" ] ; then
74 | die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME
75 |
76 | Please set the JAVA_HOME variable in your environment to match the
77 | location of your Java installation."
78 | fi
79 | else
80 | JAVACMD="java"
81 | which java >/dev/null 2>&1 || die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
82 |
83 | Please set the JAVA_HOME variable in your environment to match the
84 | location of your Java installation."
85 | fi
86 |
87 | # Increase the maximum file descriptors if we can.
88 | if [ "$cygwin" = "false" -a "$darwin" = "false" ] ; then
89 | MAX_FD_LIMIT=`ulimit -H -n`
90 | if [ $? -eq 0 ] ; then
91 | if [ "$MAX_FD" = "maximum" -o "$MAX_FD" = "max" ] ; then
92 | MAX_FD="$MAX_FD_LIMIT"
93 | fi
94 | ulimit -n $MAX_FD
95 | if [ $? -ne 0 ] ; then
96 | warn "Could not set maximum file descriptor limit: $MAX_FD"
97 | fi
98 | else
99 | warn "Could not query maximum file descriptor limit: $MAX_FD_LIMIT"
100 | fi
101 | fi
102 |
103 | # For Darwin, add options to specify how the application appears in the dock
104 | if $darwin; then
105 | GRADLE_OPTS="$GRADLE_OPTS \"-Xdock:name=$APP_NAME\" \"-Xdock:icon=$APP_HOME/media/gradle.icns\""
106 | fi
107 |
108 | # For Cygwin, switch paths to Windows format before running java
109 | if $cygwin ; then
110 | APP_HOME=`cygpath --path --mixed "$APP_HOME"`
111 | CLASSPATH=`cygpath --path --mixed "$CLASSPATH"`
112 | JAVACMD=`cygpath --unix "$JAVACMD"`
113 |
114 | # We build the pattern for arguments to be converted via cygpath
115 | ROOTDIRSRAW=`find -L / -maxdepth 1 -mindepth 1 -type d 2>/dev/null`
116 | SEP=""
117 | for dir in $ROOTDIRSRAW ; do
118 | ROOTDIRS="$ROOTDIRS$SEP$dir"
119 | SEP="|"
120 | done
121 | OURCYGPATTERN="(^($ROOTDIRS))"
122 | # Add a user-defined pattern to the cygpath arguments
123 | if [ "$GRADLE_CYGPATTERN" != "" ] ; then
124 | OURCYGPATTERN="$OURCYGPATTERN|($GRADLE_CYGPATTERN)"
125 | fi
126 | # Now convert the arguments - kludge to limit ourselves to /bin/sh
127 | i=0
128 | for arg in "$@" ; do
129 | CHECK=`echo "$arg"|egrep -c "$OURCYGPATTERN" -`
130 | CHECK2=`echo "$arg"|egrep -c "^-"` ### Determine if an option
131 |
132 | if [ $CHECK -ne 0 ] && [ $CHECK2 -eq 0 ] ; then ### Added a condition
133 | eval `echo args$i`=`cygpath --path --ignore --mixed "$arg"`
134 | else
135 | eval `echo args$i`="\"$arg\""
136 | fi
137 | i=$((i+1))
138 | done
139 | case $i in
140 | (0) set -- ;;
141 | (1) set -- "$args0" ;;
142 | (2) set -- "$args0" "$args1" ;;
143 | (3) set -- "$args0" "$args1" "$args2" ;;
144 | (4) set -- "$args0" "$args1" "$args2" "$args3" ;;
145 | (5) set -- "$args0" "$args1" "$args2" "$args3" "$args4" ;;
146 | (6) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" ;;
147 | (7) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" ;;
148 | (8) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" ;;
149 | (9) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" "$args8" ;;
150 | esac
151 | fi
152 |
153 | # Split up the JVM_OPTS And GRADLE_OPTS values into an array, following the shell quoting and substitution rules
154 | function splitJvmOpts() {
155 | JVM_OPTS=("$@")
156 | }
157 | eval splitJvmOpts $DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS
158 | JVM_OPTS[${#JVM_OPTS[*]}]="-Dorg.gradle.appname=$APP_BASE_NAME"
159 |
160 | exec "$JAVACMD" "${JVM_OPTS[@]}" -classpath "$CLASSPATH" org.gradle.wrapper.GradleWrapperMain "$@"
161 |
--------------------------------------------------------------------------------
/gradlew.bat:
--------------------------------------------------------------------------------
1 | @if "%DEBUG%" == "" @echo off
2 | @rem ##########################################################################
3 | @rem
4 | @rem Gradle startup script for Windows
5 | @rem
6 | @rem ##########################################################################
7 |
8 | @rem Set local scope for the variables with windows NT shell
9 | if "%OS%"=="Windows_NT" setlocal
10 |
11 | @rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
12 | set DEFAULT_JVM_OPTS=
13 |
14 | set DIRNAME=%~dp0
15 | if "%DIRNAME%" == "" set DIRNAME=.
16 | set APP_BASE_NAME=%~n0
17 | set APP_HOME=%DIRNAME%
18 |
19 | @rem Find java.exe
20 | if defined JAVA_HOME goto findJavaFromJavaHome
21 |
22 | set JAVA_EXE=java.exe
23 | %JAVA_EXE% -version >NUL 2>&1
24 | if "%ERRORLEVEL%" == "0" goto init
25 |
26 | echo.
27 | echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
28 | echo.
29 | echo Please set the JAVA_HOME variable in your environment to match the
30 | echo location of your Java installation.
31 |
32 | goto fail
33 |
34 | :findJavaFromJavaHome
35 | set JAVA_HOME=%JAVA_HOME:"=%
36 | set JAVA_EXE=%JAVA_HOME%/bin/java.exe
37 |
38 | if exist "%JAVA_EXE%" goto init
39 |
40 | echo.
41 | echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME%
42 | echo.
43 | echo Please set the JAVA_HOME variable in your environment to match the
44 | echo location of your Java installation.
45 |
46 | goto fail
47 |
48 | :init
49 | @rem Get command-line arguments, handling Windowz variants
50 |
51 | if not "%OS%" == "Windows_NT" goto win9xME_args
52 | if "%@eval[2+2]" == "4" goto 4NT_args
53 |
54 | :win9xME_args
55 | @rem Slurp the command line arguments.
56 | set CMD_LINE_ARGS=
57 | set _SKIP=2
58 |
59 | :win9xME_args_slurp
60 | if "x%~1" == "x" goto execute
61 |
62 | set CMD_LINE_ARGS=%*
63 | goto execute
64 |
65 | :4NT_args
66 | @rem Get arguments from the 4NT Shell from JP Software
67 | set CMD_LINE_ARGS=%$
68 |
69 | :execute
70 | @rem Setup the command line
71 |
72 | set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar
73 |
74 | @rem Execute Gradle
75 | "%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %CMD_LINE_ARGS%
76 |
77 | :end
78 | @rem End local scope for the variables with windows NT shell
79 | if "%ERRORLEVEL%"=="0" goto mainEnd
80 |
81 | :fail
82 | rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of
83 | rem the _cmd.exe /c_ return code!
84 | if not "" == "%GRADLE_EXIT_CONSOLE%" exit 1
85 | exit /b 1
86 |
87 | :mainEnd
88 | if "%OS%"=="Windows_NT" endlocal
89 |
90 | :omega
91 |
--------------------------------------------------------------------------------
/settings.gradle:
--------------------------------------------------------------------------------
1 | include ':app'
2 |
--------------------------------------------------------------------------------