服务器之家：专注于VPS、云服务器配置技术及软件下载分享
分类导航

PHP教程|ASP.NET教程|Java教程|ASP教程|编程技术|正则表达式|C/C++|IOS|C#|Swift|Android|VB|R语言|JavaScript|易语言|vb.net|

服务器之家 - 编程语言 - Android - android自定义波浪加载动画的实现代码

android自定义波浪加载动画的实现代码

2022-08-29 15:45王虎的博客 Android

这篇文章主要为大家详细介绍了android自定义波浪加载动画，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了android自定义波浪加载动画的具体代码，供大家参考，具体内容如下

效果图

android自定义波浪加载动画的实现代码

1.自定义控件 WaveView

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
package com.example.wh.myapplication;
 
 
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.support.annotation.Nullable;
import android.support.v4.content.ContextCompat;
import android.util.AttributeSet;
import android.view.View;
 
import java.text.DecimalFormat;
public class WaveView extends View {
 
 /**
 * 默认波浪1长度
 */
 private final int WAVE_LENGTH1 = 600;
 
 /**
 * 默认波浪1高度
 */
 private final int WAVE_HEIGHT1 = 30;
 
 /**
 * 波浪1高度
 */
 private int mWaveHeight1 = WAVE_HEIGHT1;
 
 /**
 * 波浪1长度
 */
 private int mWaveLenght1 = WAVE_LENGTH1;
 
 /**
 * 默认波浪1颜色
 */
 private final int WAVE_COLOR1 = Color.parseColor("#0000ff");
 
 /**
 * 默认边框颜色
 */
 private final int BORDER_COLOR = Color.parseColor("#800000ff");
 
 /**
 * 默认文字颜色
 */
 private final int DEFAULT_TEXT_COLOR = Color.parseColor("#ff0000");
 /**
 * 默认文字大小
 */
 private final int DEFAULT_TEXT_SIZE = 30;
 
 /**
 * 文字颜色
 */
 private int mTextColor = DEFAULT_TEXT_COLOR;
 /**
 * 文字大小
 */
 private int mTextSize = DEFAULT_TEXT_SIZE;
 
 /**
 * 波浪1颜色
 */
 private int mWaveColor1 = WAVE_COLOR1;
 
 /**
 * 默认每一次重绘时波峰1的移动的距离，实现移动效果
 */
 private final int WAVE_OFFSET1 = 8;
 
 /**
 * 每一次重绘时波峰1的移动的距离，实现移动效果
 */
 private int mOffset1 = WAVE_OFFSET1;
 
 /**
 * 默认边框宽度
 */
 private final int BORDER_WIDTH = 2;
 
 /**
 * 边框颜色
 */
 private int mBorderColor = BORDER_COLOR;
 
 /**
 * 边框宽度
 */
 private int mBorderWidth = BORDER_WIDTH;
 
 /**
 * 绘制的高度，百分比。0表示内有高度，1表示全部高度
 */
 private float mPrecent = 0.5f;
 
 /**
 * 形状枚举，暂时只支持矩形和圆形，可扩展
 */
 public enum ShowShape {
 RECT
 }
 
 /**
 * 形状默认矩形
 */
 private ShowShape mShape = ShowShape.RECT;
 
 /**
 * 默认两次重绘之间间隔的时间，5毫秒
 */
 private final int DEFAULT_TIME = 5;
 
 /**
 * 两次重绘之间间隔的时间，毫秒。
 */
 private int mTime = DEFAULT_TIME;
 
 /**
 * 设置两次重绘之间的间隔时间，毫秒
 *
 * @param time
 * @return
 */
 public WaveView setTime(int time) {
 this.mTime = time;
 return this;
 }
 
 /**
 * 波浪1画笔
 */
 private Paint mWavePaint1;
 
 /**
 * 边框画笔
 */
 private Paint mBorderPaint;
 /**
 * 文字画笔
 */
 private Paint mTextPaint;
 
 /**
 * 波浪1路径
 */
 private Path mWavePath1;
 
 /**
 * 定义数字格式转行类
 */
 private DecimalFormat mFormat;
 
 /**
 * 控件的宽度
 */
 private int mWidth;
 /**
 * 控件的高度
 */
 private int mHeight;
 
 /**
 * 水位上升时不断变化的 y 坐标
 */
 private float mChangeY;
 
 /**
 * 水位最终的高度，通过控件的高度和百分比计算出来
 */
 private float mFinalY;
 
 /**
 * 波峰的个数
 */
 private int mWaveCount = 8;
 
 /**
 * 重置标记，开始为重置状态
 */
 private boolean isReset = true;
 
 
 /**
 * 当前百分比
 */
 private float mCurrentPrecent = 0.0f;
 
 /**
 * 重绘值波峰移动距离的和
 */
 private int mMoveSum1;
 
 /**
 * 能够绘制标记位，开始不能绘制
 */
 private boolean invalidateFlag = false;
 
 /**
 * 百分比改变监听
 */
 private PrecentChangeListener mPrecentChangeListener;
 
 
 /**
 * 百分比改变监听接口
 */
 public interface PrecentChangeListener {
 /**
 * 百分比发生改变时调用的方法
 *
 * @param precent 当前的百分比，格式 0.00 范围 [0.00 , 1.00]
 */
 void precentChange(double precent);
 }
 
 
 public WaveView(Context context) {
 this(context, null);
 }
 
 public WaveView(Context context, @Nullable AttributeSet attrs) {
 this(context, attrs, 0);
 }
 
 public WaveView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
 super(context, attrs, defStyleAttr);
 
 initAttrs(context, attrs); // 获取布局文件中dingy9i的属性
 init();
 }
 
 //获取布局中的初始属性
 private void initAttrs(Context context, AttributeSet attrs) {
 TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.WaveView);
 mWaveLenght1 = typedArray.getInteger(R.styleable.WaveView_wave1Length, WAVE_LENGTH1);
 mWaveHeight1 = typedArray.getInteger(R.styleable.WaveView_wave1Height, WAVE_HEIGHT1);
 mWaveColor1 = typedArray.getColor(R.styleable.WaveView_wave1Color, WAVE_COLOR1);
 mOffset1 = typedArray.getInteger(R.styleable.WaveView_wave1Offset, WAVE_OFFSET1);
 
 mBorderWidth = typedArray.getDimensionPixelSize(R.styleable.WaveView_borderWidth, BORDER_WIDTH);
 mBorderColor = typedArray.getColor(R.styleable.WaveView_borderColor, BORDER_COLOR);
 
 mTime = typedArray.getInteger(R.styleable.WaveView_intervalTime, DEFAULT_TIME);
 mPrecent = typedArray.getFloat(R.styleable.WaveView_precent, 0.5f);
 /**
 * 绘制的高度，百分比。0表示内有高度，1表示全部高度
 */
 int shapeValue = typedArray.getInteger(R.styleable.WaveView_showShape, 0);
 
 mShape = ShowShape.RECT;
 typedArray.recycle();
 }
 
 private void init() {
 mWavePaint1 = new Paint(Paint.ANTI_ALIAS_FLAG);
 mBorderPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
 mTextPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
 
 mWavePath1 = new Path();
 
 mWavePaint1.setColor(mWaveColor1);
 mWavePaint1.setStyle(Paint.Style.FILL);
 
 mBorderPaint.setColor(mBorderColor);
 mBorderPaint.setStrokeWidth(mBorderWidth);
 mBorderPaint.setStyle(Paint.Style.STROKE);
 
 
 mTextPaint.setColor(mTextColor);
 mTextPaint.setTextSize(mTextSize);
 
 // 定义数字显示个格式
 mFormat = new DecimalFormat("###,###,##0.00");
 }
 
 @Override
 protected void onSizeChanged(int w, int h, int oldw, int oldh) {
 super.onSizeChanged(w, h, oldw, oldh);
 mWidth = w;
 mHeight = h;
 
 mChangeY = mHeight;
 // 计算波峰个数，为了实现移动效果，保证至少绘制两个波峰
 mFinalY = (1 - mPrecent) * mHeight; // 计算水位最终高度
 }
 
 @Override
 protected void onDraw(Canvas canvas) {
 mWavePath1.reset();
 
 
 if (mBorderWidth > 0) {
 // 边框大于0,表示需要绘制边框
 if(mShape == ShowShape.RECT) {
 canvas.drawRect(0, 0, mWidth, mHeight, mBorderPaint);
 }
 }
 
 mWavePath1.moveTo(-mWaveLenght1, mChangeY);
 
 if (!isReset) { // 判断重置标记
 // 利用贝塞尔曲线绘制波浪
 for (int i = 0; i < mWaveCount; i++) {
 // 绘制波浪1的曲线
 mWavePath1.quadTo((-mWaveLenght1 * 3 / 4) + (i * mWaveLenght1) + mMoveSum1, mChangeY + mWaveHeight1, (-mWaveLenght1 / 2) + (i * mWaveLenght1) + mMoveSum1, mChangeY);
 mWavePath1.quadTo((-mWaveLenght1 * 1 / 4) + (i * mWaveLenght1) + mMoveSum1, mChangeY - mWaveHeight1, (i * mWaveLenght1) + mMoveSum1, mChangeY);
 
 }
 
 // 不断改变高度，实现逐渐水位逐渐上涨效果
 mChangeY -= 1;
 if (mChangeY < mFinalY) mChangeY = mFinalY;
 
 // 波峰1往右移动，波峰2往左移动
 mMoveSum1 += mOffset1;
 if (mMoveSum1 >= mWaveLenght1) mMoveSum1 = 0;
 
 // 填充矩形，让上涨之后的水位下面填充颜色
 mWavePath1.lineTo(mWidth, mHeight);
 mWavePath1.lineTo(0, mHeight);
 mWavePath1.close();
 
 canvas.drawPath(mWavePath1, mWavePaint1);
 } else {
 // 是重置
 canvas.drawColor(Color.TRANSPARENT);
 }
 
 // 计算当前的百分比
 mCurrentPrecent = 1 - mChangeY / mHeight;
 // 格式化数字格式
 String format1 = mFormat.format(mCurrentPrecent);
 // 绘制文字，将百分比绘制到界面。此处用的是 "50%" 的形式，可以根据需求改变格式
 double parseDouble = Double.parseDouble(format1);
 canvas.drawText((int) (parseDouble * 100) + " %", (mWidth - mTextPaint.measureText(format1)) / 2, mHeight / 5, mTextPaint);
 // 监听对象不为null并且没有达到设置高度时，调用监听方法
 if (mPrecentChangeListener != null && mChangeY != mFinalY) {
 mPrecentChangeListener.precentChange(parseDouble);
 }
 
 //高度到达设置高度
 if (mChangeY == mFinalY){
 canvas.drawColor(ContextCompat.getColor(getContext(), R.color.bowencolor));
 }
 
 // 判断绘制标记
 if (invalidateFlag) postInvalidateDelayed(mTime);
 }
 
 /**
 * 设置边框宽度
 *
 * @param borderWidth
 * @return
 */
 public WaveView setBorderWidth(int borderWidth) {
 this.mBorderWidth = borderWidth;
 return this;
 }
 
 /**
 * 设置波浪1颜色
 *
 * @param waveColor1
 * @return
 */
 public WaveView setWaveColor1(int waveColor1) {
 this.mWaveColor1 = waveColor1;
 return this;
 }
 
 /**
 * 设置边框颜色
 *
 * @param borderColor
 * @return
 */
 public WaveView setBorderColor(int borderColor) {
 this.mBorderColor = borderColor;
 return this;
 }
 
 /**
 * 设置文字颜色
 *
 * @param textColor
 * @return
 */
 public WaveView setTextColor(int textColor) {
 this.mTextColor = textColor;
 return this;
 }
 
 /**
 * 设置百分比
 *
 * @param precent
 * @return
 */
 public WaveView setPrecent(float precent) {
 this.mPrecent = precent;
 return this;
 }
 
 
 /**
 * 设置文字大小
 *
 * @param textSize
 * @return
 */
 public WaveView setTextSize(int textSize) {
 this.mTextSize = textSize;
 return this;
 }
 
 
 /**
 * 设置当前显示形状
 *
 * @param shape
 * @return
 */
 public WaveView setShape(ShowShape shape) {
 this.mShape = shape;
 return this;
 }
 
 /**
 * 开始
 */
 public void start() {
 invalidateFlag = true;
 isReset = false;
 postInvalidateDelayed(mTime);
 }
 
 /**
 * 暂停
 */
 public void stop() {
 invalidateFlag = false;
 isReset = false;
 }
 
 /**
 * 重置
 */
 public void reset() {
 invalidateFlag = false;
 isReset = true;
 mChangeY = mHeight;
 postInvalidate();
 }
}

2.attrs

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<?xml version="1.0" encoding="utf-8"?>
<resources>
 <!--自定义水波纹效果属性-->
 <declare-styleable name="WaveView">
 <!--波浪1的长度、高度、颜色和每次重绘的偏移量-->
 <attr name="wave1Length" format="integer" />
 <attr name="wave1Height" format="integer" />
 <attr name="wave1Color" format="color" />
 <attr name="wave1Offset" format="integer" />
 
 <!--边框的宽度和颜色-->
 <attr name="borderWidth" format="dimension" />
 <attr name="borderColor" format="color" />
 <!--文字的大小和颜色-->
 <attr name="textColor" format="color" />
 <attr name="textSize" format="dimension" />
 <!--水位高度的百分比-->
 <attr name="precent" format="float" />
 <!--两次重绘的间隔时间-->
 <attr name="intervalTime" format="integer" />
 <!--控件的显示形状，rect矩形、circle圆形-->
 <attr name="showShape" format="enum">
 <enum name="rect" value="0" />
 <enum name="circle" value="1" />
 </attr>
 </declare-styleable>
</resources>

3.布局

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:app="http://schemas.android.com/apk/res-auto"
 xmlns:tools="http://schemas.android.com/tools"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:orientation="vertical"
 tools:context="com.example.wh.myapplication.MainActivity">
 
 <com.example.wh.myapplication.WaveView
 android:id="@+id/waveview1"
 android:layout_width="200dp"
 android:layout_height="200dp" />
 
 <LinearLayout
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:layout_marginTop="30dp"
 android:orientation="horizontal">
 
 <Button
 android:id="@+id/bt_start"
 android:layout_width="0dp"
 android:layout_height="wrap_content"
 android:layout_weight="1"
 android:text="开始"/>
 
 <Button
 android:id="@+id/bt_stop"
 android:layout_width="0dp"
 android:layout_height="wrap_content"
 android:layout_weight="1"
 android:text="暂停"/>
 
 <Button
 android:id="@+id/bt_reset"
 android:layout_width="0dp"
 android:layout_height="wrap_content"
 android:layout_weight="1"
 android:text="重置"/>
 </LinearLayout>
</LinearLayout>

4.MainActivity

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
package com.example.wh.myapplication;
 
import android.graphics.Color;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
 
public class MainActivity extends AppCompatActivity {
 
 private WaveView waveview1;
 private Button btStart;
 private Button btStop;
 private Button btReset;
 
 @Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_main);
 
 waveview1 = (WaveView) findViewById(R.id.waveview1);
 
 btStart = (Button) findViewById(R.id.bt_start);
 btStop = (Button) findViewById(R.id.bt_stop);
 btReset = (Button) findViewById(R.id.bt_reset);
 
 // 代码设置相关属性
 waveview1.setBorderWidth(2)
 .setWaveColor1(Color.RED)
 .setBorderColor(Color.GREEN)
 .setTextColor(Color.BLUE)
 .setShape(WaveView.ShowShape.RECT)
 .setTextSize(36)
 .setPrecent(1f)//设置水波纹的百分比
 .setTime(2);
 
 btStart.setOnClickListener(new View.OnClickListener() {
 @Override
 public void onClick(View v) {
 waveview1.start();
 }
 });
 
 btStop.setOnClickListener(new View.OnClickListener() {
 @Override
 public void onClick(View v) {
 waveview1.stop();
 }
 });
 
 btReset.setOnClickListener(new View.OnClickListener() {
 @Override
 public void onClick(View v) {
 waveview1.reset();
 }
 });
 }
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持服务器之家。

原文链接：https://blog.csdn.net/wangxiaohuhu1314/article/details/79538552

  • Android
  • 加载
  • 波浪

    • 延伸 · 阅读

    精彩推荐
    最近更新
    编辑推荐
    阅读排行
    热门标签
    计算年龄 　 PopupWindow 　 descendantFocusability 　 Andorid 　 退出程序 　 触屏震动 　 响应接口 　 自定义标题 　 图片居中 　 程序退出 　 binder 　 图片翻转动画 　 横竖屏切换 　 适配 　 dialog 　 preferenceactivity 　 SharedPreferences 　 MultiDex 　 tablelayout 　 RadioGroup 　 颜色编辑器 　 OnCreate 　 ImageView 　 Gallery 　 缩放动画 　 TextView 　 asynctask 　 Notification 　 NotificationManager 　 RelativeLayout 　
    © 2019-2022 服务器之家(www.tuohang.net) 版权所有关于我们联系我们版权申明网站地图