├── settings.gradle
├── app
├── src
│ └── main
│ │ ├── res
│ │ ├── values
│ │ │ ├── strings.xml
│ │ │ ├── colors.xml
│ │ │ └── styles.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
│ │ ├── mipmap-anydpi-v26
│ │ │ ├── ic_launcher.xml
│ │ │ └── ic_launcher_round.xml
│ │ ├── layout
│ │ │ └── activity_main.xml
│ │ ├── drawable-v24
│ │ │ └── ic_launcher_foreground.xml
│ │ └── drawable
│ │ │ └── ic_launcher_background.xml
│ │ ├── AndroidManifest.xml
│ │ └── java
│ │ └── cn
│ │ └── luliangdev
│ │ └── devprogressview
│ │ ├── MainActivity.java
│ │ └── ProgressView.java
└── build.gradle
├── gradle
└── wrapper
│ ├── gradle-wrapper.jar
│ └── gradle-wrapper.properties
├── gradle.properties
└── README.md
/settings.gradle:
--------------------------------------------------------------------------------
1 | include ':app'
2 |
--------------------------------------------------------------------------------
/app/src/main/res/values/strings.xml:
--------------------------------------------------------------------------------
1 |
2 | DevProgressView
3 |
4 |
--------------------------------------------------------------------------------
/gradle/wrapper/gradle-wrapper.jar:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/LiangLuDev/DevProgressView/HEAD/gradle/wrapper/gradle-wrapper.jar
--------------------------------------------------------------------------------
/app/src/main/res/mipmap-hdpi/ic_launcher.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/LiangLuDev/DevProgressView/HEAD/app/src/main/res/mipmap-hdpi/ic_launcher.png
--------------------------------------------------------------------------------
/app/src/main/res/mipmap-mdpi/ic_launcher.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/LiangLuDev/DevProgressView/HEAD/app/src/main/res/mipmap-mdpi/ic_launcher.png
--------------------------------------------------------------------------------
/app/src/main/res/mipmap-xhdpi/ic_launcher.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/LiangLuDev/DevProgressView/HEAD/app/src/main/res/mipmap-xhdpi/ic_launcher.png
--------------------------------------------------------------------------------
/app/src/main/res/mipmap-xxhdpi/ic_launcher.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/LiangLuDev/DevProgressView/HEAD/app/src/main/res/mipmap-xxhdpi/ic_launcher.png
--------------------------------------------------------------------------------
/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/LiangLuDev/DevProgressView/HEAD/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png
--------------------------------------------------------------------------------
/app/src/main/res/mipmap-hdpi/ic_launcher_round.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/LiangLuDev/DevProgressView/HEAD/app/src/main/res/mipmap-hdpi/ic_launcher_round.png
--------------------------------------------------------------------------------
/app/src/main/res/mipmap-mdpi/ic_launcher_round.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/LiangLuDev/DevProgressView/HEAD/app/src/main/res/mipmap-mdpi/ic_launcher_round.png
--------------------------------------------------------------------------------
/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/LiangLuDev/DevProgressView/HEAD/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png
--------------------------------------------------------------------------------
/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/LiangLuDev/DevProgressView/HEAD/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png
--------------------------------------------------------------------------------
/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/LiangLuDev/DevProgressView/HEAD/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png
--------------------------------------------------------------------------------
/app/src/main/res/values/colors.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 | #3F51B5
4 | #303F9F
5 | #FF4081
6 |
7 |
--------------------------------------------------------------------------------
/gradle/wrapper/gradle-wrapper.properties:
--------------------------------------------------------------------------------
1 | #Mon Aug 13 17:21:14 CST 2018
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-4.4-all.zip
7 |
--------------------------------------------------------------------------------
/app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
--------------------------------------------------------------------------------
/app/src/main/res/mipmap-anydpi-v26/ic_launcher_round.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
--------------------------------------------------------------------------------
/app/src/main/res/values/styles.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/gradle.properties:
--------------------------------------------------------------------------------
1 | # Project-wide Gradle settings.
2 | # IDE (e.g. Android Studio) users:
3 | # Gradle settings configured through the IDE *will override*
4 | # any settings specified in this file.
5 | # For more details on how to configure your build environment visit
6 | # http://www.gradle.org/docs/current/userguide/build_environment.html
7 | # Specifies the JVM arguments used for the daemon process.
8 | # The setting is particularly useful for tweaking memory settings.
9 | org.gradle.jvmargs=-Xmx1536m
10 | # When configured, Gradle will run in incubating parallel mode.
11 | # This option should only be used with decoupled projects. More details, visit
12 | # http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects
13 | # org.gradle.parallel=true
14 |
--------------------------------------------------------------------------------
/app/src/main/AndroidManifest.xml:
--------------------------------------------------------------------------------
1 |
2 |
4 |
5 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
--------------------------------------------------------------------------------
/app/build.gradle:
--------------------------------------------------------------------------------
1 | apply plugin: 'com.android.application'
2 |
3 | android {
4 | compileSdkVersion 28
5 | defaultConfig {
6 | applicationId "cn.luliangdev.devprogressview"
7 | minSdkVersion 15
8 | targetSdkVersion 28
9 | versionCode 1
10 | versionName "1.0"
11 | testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
12 | }
13 | buildTypes {
14 | release {
15 | minifyEnabled false
16 | proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
17 | }
18 | }
19 | }
20 |
21 | dependencies {
22 | implementation fileTree(dir: 'libs', include: ['*.jar'])
23 | implementation 'com.android.support:appcompat-v7:28.0.0-beta01'
24 | implementation 'com.android.support.constraint:constraint-layout:1.1.2'
25 | testImplementation 'junit:junit:4.12'
26 | androidTestImplementation 'com.android.support.test:runner:1.0.2'
27 | androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'
28 | }
29 |
--------------------------------------------------------------------------------
/app/src/main/res/layout/activity_main.xml:
--------------------------------------------------------------------------------
1 |
2 |
9 |
10 |
17 |
18 |
25 |
26 |
27 |
28 |
34 |
35 |
--------------------------------------------------------------------------------
/app/src/main/res/drawable-v24/ic_launcher_foreground.xml:
--------------------------------------------------------------------------------
1 |
7 |
12 |
13 |
19 |
22 |
25 |
26 |
27 |
28 |
34 |
35 |
--------------------------------------------------------------------------------
/app/src/main/java/cn/luliangdev/devprogressview/MainActivity.java:
--------------------------------------------------------------------------------
1 | package cn.luliangdev.devprogressview;
2 |
3 | import android.animation.Animator;
4 | import android.support.v7.app.AppCompatActivity;
5 | import android.os.Bundle;
6 | import android.view.View;
7 | import android.widget.Button;
8 |
9 | public class MainActivity extends AppCompatActivity {
10 |
11 | private ProgressView progressview1;
12 | private ProgressView progressview2;
13 |
14 | @Override
15 | protected void onCreate(Bundle savedInstanceState) {
16 | super.onCreate(savedInstanceState);
17 | setContentView(R.layout.activity_main);
18 |
19 | Button btn_start=findViewById(R.id.btn_start);
20 |
21 |
22 |
23 | progressview1 = findViewById(R.id.progressview1);
24 | //设置颜色
25 | progressview1.setColor(getResources().getColor(R.color.colorAccent));
26 | //设置圆角 默认无圆角
27 | progressview1.setRadius(6);
28 | //设置进度条长度 默认px
29 | progressview1.setProgress(500);
30 | //设置动画时间
31 | progressview1.setDuration(500);
32 |
33 |
34 | progressview2 = findViewById(R.id.progressview2);
35 | progressview2.setColor(getResources().getColor(R.color.colorPrimary));
36 | progressview2.setProgress(600);
37 |
38 |
39 | btn_start.setOnClickListener(new View.OnClickListener() {
40 | @Override
41 | public void onClick(View v) {
42 | progressview1.startAnim();
43 | progressview1.getAnimator().addListener(new Animator.AnimatorListener() {
44 | @Override
45 | public void onAnimationStart(Animator animation) {
46 |
47 | }
48 |
49 | @Override
50 | public void onAnimationEnd(Animator animation) {
51 | progressview2.startAnim();
52 | }
53 |
54 | @Override
55 | public void onAnimationCancel(Animator animation) {
56 |
57 | }
58 |
59 | @Override
60 | public void onAnimationRepeat(Animator animation) {
61 |
62 | }
63 | });
64 |
65 | }
66 | });
67 |
68 |
69 |
70 | }
71 | }
72 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # 自定义`ProgressView`-进度条动画
2 |
3 |
4 | > 前两天公司需求,实现进度条动画,本来想在网上找找有没有类似的拿来用,想偷懒都不行。就简单自定义`View`进度条动画。实现很简单。
5 |
6 | ### 动画预览
7 |
8 | - 使用在公司项目效果预览
9 |
10 | 
11 |
12 | - 简洁效果预览
13 |
14 | 
15 |
16 |
17 | ### 代码实现
18 | > 动画效果很简单,使用`ObjectAnimator`属性动画来实现,这个官方提供一些Api使用,具体可以查看[官方文档](https://developer.android.com/reference/android/animation/ObjectAnimator)。如果以后需要实现更复杂的动画,可以以此为例进行自定义。这里我会对基础自定义`View`动画实现简单的说明,具体说明在代码注释。如果你们需要的效果跟我的类似,你可以直接把[`ProgressView`](https://github.com/LiangLuDev/DevProgressView/blob/master/app/src/main/java/cn/luliangdev/devprogressview/ProgressView.java)文件拷贝下来使用,需要的属性不够用的话可以直接在里面修改添加。
19 |
20 |
21 | #### 看代码才是王道
22 |
23 | - 自定义`View`-`ProgressView`代码(只展示主要代码)
24 |
25 | ```
26 | public class ProgressView extends View {
27 |
28 | private void initView() {
29 | //初始化画笔
30 | paint = new Paint(Paint.ANTI_ALIAS_FLAG);
31 | animator = new ObjectAnimator();
32 | //设置动画属性
33 | animator.setPropertyName("progress");
34 | //设置执行动画的View
35 | animator.setTarget(this);
36 | }
37 |
38 | @Override
39 | protected void onDraw(Canvas canvas) {
40 | super.onDraw(canvas);
41 | //画笔属性
42 | paint.setAntiAlias(true); //设置画笔为无锯齿
43 | paint.setColor(color); //设置画笔颜色
44 | paint.setStyle(Paint.Style.FILL);
45 | paint.setStrokeWidth(1);
46 | //圆角形状设置到画布
47 | RectF rectF = new RectF(0, 0, progress, getHeight());
48 | canvas.drawRoundRect(rectF, radius, radius, paint);
49 | }
50 |
51 | public void startAnim() {
52 | if (animator.isRunning()) animator.end();
53 | //设置进度数组, 0 - max
54 | animator.setFloatValues(0, progress);
55 | //设置动画时间
56 | animator.setDuration(duration);
57 | //动画开启
58 | animator.start();
59 | }
60 |
61 | }
62 | ```
63 | - `xml`添加代码
64 |
65 | ```
66 |
70 | ```
71 |
72 | - 代码使用代码
73 | ```
74 | //设置颜色
75 | progressview.setColor(getResources().getColor(R.color.colorAccent));
76 | //设置圆角 默认无圆角
77 | progressview.setRadius(6);
78 | //设置进度条长度 默认px
79 | progressview.setProgress(500);
80 | //设置动画时间
81 | progressview.setDuration(500);
82 | //开启动画
83 | progressview.startAnim();
84 |
85 | //动画监听
86 | progressview.getAnimator().addListener(new Animator.AnimatorListener() {
87 | @Override
88 | public void onAnimationStart(Animator animation) {
89 | //动画开始
90 | }
91 |
92 | @Override
93 | public void onAnimationEnd(Animator animation) {
94 | //动画结束
95 | }
96 |
97 | @Override
98 | public void onAnimationCancel(Animator animation) {
99 | //动画取消
100 | }
101 |
102 | @Override
103 | public void onAnimationRepeat(Animator animation) {
104 | //动画重复
105 | }
106 | });
107 | ```
108 | ### 意见反馈
109 | 如果遇到问题或者好的建议,请反馈到:issue、927195249@qq.com 或者LiangLuDev@gmail.com
110 |
111 | 如果觉得对你有用的话,点一下右上的星星赞一下吧!
112 |
113 |
114 |
--------------------------------------------------------------------------------
/app/src/main/java/cn/luliangdev/devprogressview/ProgressView.java:
--------------------------------------------------------------------------------
1 | package cn.luliangdev.devprogressview;
2 |
3 | import android.animation.ObjectAnimator;
4 | import android.annotation.SuppressLint;
5 | import android.content.Context;
6 | import android.graphics.Canvas;
7 | import android.graphics.Paint;
8 | import android.graphics.RectF;
9 | import android.support.annotation.Nullable;
10 | import android.util.AttributeSet;
11 | import android.view.View;
12 | import android.view.animation.Animation;
13 |
14 | /**
15 | * ProgressView
16 | * Created by LuLiang on 2018/8/4.
17 | */
18 |
19 | public class ProgressView extends View {
20 | float progress = 0;
21 | float radius = 0;
22 | long duration = 1000;
23 | int color = 0xff000000;
24 | private Paint paint;
25 | Context context;
26 | private ObjectAnimator animator;
27 |
28 |
29 | public ProgressView(Context context) {
30 | super(context);
31 | this.context = context;
32 | initView();
33 | }
34 |
35 |
36 | public ProgressView(Context context, @Nullable AttributeSet attrs) {
37 | super(context, attrs);
38 | this.context = context;
39 | initView();
40 |
41 | }
42 |
43 |
44 | public ProgressView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
45 | super(context, attrs, defStyleAttr);
46 | this.context = context;
47 | initView();
48 | }
49 |
50 | private void initView() {
51 | paint = new Paint(Paint.ANTI_ALIAS_FLAG);
52 | animator = new ObjectAnimator();
53 | //设置动画属性
54 | animator.setPropertyName("progress");
55 | //设置执行动画的View
56 | animator.setTarget(this);
57 | }
58 |
59 |
60 | @SuppressLint({"NewApi", "DrawAllocation"})
61 | @Override
62 | protected void onDraw(Canvas canvas) {
63 | super.onDraw(canvas);
64 | paint.setAntiAlias(true); //设置画笔为无锯齿
65 | paint.setColor(color); //设置画笔颜色
66 | paint.setStyle(Paint.Style.FILL);
67 | paint.setStrokeWidth(1);
68 | RectF rectF = new RectF(0, 0, progress, getHeight());
69 | canvas.drawRoundRect(rectF, radius, radius, paint);
70 | }
71 |
72 |
73 | /**
74 | * set view background color
75 | *
76 | * @param color
77 | */
78 | public void setColor(int color) {
79 | this.color = color;
80 | }
81 |
82 |
83 | /**
84 | * set view round radius
85 | *
86 | * @param radius
87 | */
88 | public void setRadius(float radius) {
89 | this.radius = radius;
90 | }
91 |
92 | /**
93 | * set anim duration
94 | *
95 | * @param duration
96 | */
97 | public void setDuration(long duration) {
98 | this.duration = duration;
99 | }
100 |
101 | public float getProgress() {
102 | return progress;
103 | }
104 |
105 | /**
106 | * set progress
107 | *
108 | * @param progress
109 | */
110 | public void setProgress(float progress) {
111 | this.progress = progress;
112 | invalidate();
113 | }
114 |
115 |
116 | /**
117 | * 返回属性动画实例,可用于动画进度监听做后续操作
118 | * @return
119 | */
120 | public ObjectAnimator getAnimator() {
121 | return animator;
122 | }
123 |
124 | //
125 | public void startAnim() {
126 | if (animator.isRunning()) animator.end();
127 | //设置进度数组, 0 - max
128 | animator.setFloatValues(0, progress);
129 | //设置动画时间
130 | animator.setDuration(duration);
131 | //动画开启
132 | animator.start();
133 | }
134 |
135 |
136 | }
137 |
--------------------------------------------------------------------------------
/app/src/main/res/drawable/ic_launcher_background.xml:
--------------------------------------------------------------------------------
1 |
2 |
7 |
10 |
15 |
20 |
25 |
30 |
35 |
40 |
45 |
50 |
55 |
60 |
65 |
70 |
75 |
80 |
85 |
90 |
95 |
100 |
105 |
110 |
115 |
120 |
125 |
130 |
135 |
140 |
145 |
150 |
155 |
160 |
165 |
170 |
171 |
--------------------------------------------------------------------------------