概述
Android要想获得酷炫的效果或者良好的用户体验，自定义控件是不可避免的。通常自定义控件的方式可以概况为以下三种或者它们的组合：
1，通过继承View或者View的子类实现。
2，通过继承ViewGroup或者ViewGroup的子类实现。
3，通过继承Drawable对象来实现。
progress控件是android最常用的控件之一，下面我们来实现一个类似360手机助手下载应用时的进度控件。实现后的效果图如下，我们看到这个进度条包括了多个进度（一个不断闪动的加速进度，一个缓慢的进度，一个快速的进度）。之所以设计成这么变态可能是想给用户一种快和动态的体验吧。
ezgif.com-a4296aa51f.gif
示例详解：
先来看下代码结构，其实本文主要涉及了两个类：ProgressView，LinearProgressDrawable，一个xml文件：attrs.xml.至于CircularProgressDrawable.java,WaveProgressDrawable.java是另外两种进度条，圆形进度条和水波进度条。代码结构来看实现了三种样式的进度，但本文主要讲解下直线型的进度。
Paste_Image.png
ProgressView此类作用是控件的初始化，进度的获取和设置接口提供。
1，applyStyle方法主要初始化控件信息，这些属性在attrs.xml中配置，由调用者在layout.xml中传入。
2，onVisibilityChanged是progressView的可见状态发生变化（setVisibility）后发生回调。在这个方法中我们可以动画的开始和结束。
3，onAttachedToWindow，onDetachedFromWindow 视图被添加到窗口上或者移除时调用。在这两个方法中可以做一些资源的创建和释放工作。
4，ProgressView完整代码如下：
package com.wayne.android.widget;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.drawable.Animatable;
import android.graphics.drawable.Drawable;
import android.os.Build;
import android.util.AttributeSet;
import android.view.View;
import com.wayne.android.drawable.CircularProgressDrawable;
import com.wayne.android.drawable.LinearProgressDrawable;
import com.wayne.android.drawable.WaveProgressDrawable;
public class ProgressView extends View {
public static final int MODE_DETERMINATE = 0;//有准确进度的
public static final int MODE_INDETERMINATE = 1;//没有准确进度
public static final String STYLE_CIRCULAR = "circular";//圆形进度条
public static final String STYLE_LINEAR = "linear";//直线型进度条
public static final String STYLE_WAVE = "wave";//波浪型进度条
private Drawable progressDrawable;
private String progressStyle;
private int progressMode;
public ProgressView(Context context) {
super(context);
init(context, null, 0);
}
public ProgressView(Context context, AttributeSet attrs) {
super(context, attrs);
init(context, attrs, 0);
}
public ProgressView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init(context, attrs, defStyleAttr);
}
@Override
protected void onVisibilityChanged(View changedView, int visibility) {
super.onVisibilityChanged(changedView, visibility);
if (changedView != this) {
return;
}
if (visibility == View.VISIBLE) {
start();
} else {
stop();
}
}
@Override
protected void onAttachedToWindow() {
super.onAttachedToWindow();
start();
}
@Override
protected void onDetachedFromWindow() {
android.util.Log.i("wayne_test", "onDetachedFromWindow");
super.onDetachedFromWindow();
stop();
}
//初始化
private void init(Context context, AttributeSet attrs, int defStyleAttr) {
applyStyle(context, attrs, defStyleAttr, 0);
}
private void applyStyle(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
int progress = 0;
int secondaryProgress = 0;
//读取xml中传入的样式
TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.ProgressView, defStyleAttr, defStyleRes);
for (int i = 0, count = a.getIndexCount(); i< count; i++) {
int attr = a.getIndex(i);
if (attr == R.styleable.ProgressView_pv_mode) {
progressMode = a.getInteger(attr, 0);
} else if (attr == R.styleable.ProgressView_pv_progress) {
progress = a.getInteger(attr, 0);
} else if (attr == R.styleable.ProgressView_pv_secondary_progress) {
secondaryProgress = a.getInteger(attr, 0);
} else if (attr == R.styleable.ProgressView_pv_style) {
progressStyle = a.getString(attr);
}
}
a.recycle();
//设置初始样式
if (progressDrawable == null) {
if (STYLE_CIRCULAR.equals(progressStyle)) {
progressDrawable = new CircularProgressDrawable();
} else if (STYLE_LINEAR.equals(progressStyle)) {
progressDrawable = new LinearProgressDrawable();
} else if (STYLE_WAVE.equals(progressStyle)) {
progressDrawable = new WaveProgressDrawable();
} else {
throw new IllegalArgumentException("invalid progressStyle, progressStyle:" + progressStyle);
}
//关联View和Drawable对象
if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {
this.setBackground(progressDrawable);
} else {
this.setBackgroundDrawable(progressDrawable);
}
}
//设置初始模式
if (STYLE_CIRCULAR.equals(progressStyle)) {
((CircularProgressDrawable)progressDrawable).setProgressMode(progressMode);
} else if (STYLE_LINEAR.equals(progressStyle)) {
((LinearProgressDrawable)progressDrawable).setProgressMode(progressMode);
} else if (STYLE_WAVE.equals(progressStyle)) {
((WaveProgressDrawable)progressDrawable).setProgressMode(progressMode);
}
//设置初始进度
if(progress >= 0) {
setProgress(progress);
}
if(secondaryProgress >= 0) {
setSecondaryProgress(secondaryProgress);
}
}
private void start() {
((Animatable)progressDrawable).start();
}
private void stop() {
((Animatable)progressDrawable).stop();
}
public int getProgress() {
if (STYLE_CIRCULAR.equals(progressStyle)) {
return ((CircularProgressDrawable)progressDrawable).getProgress();
} else if (STYLE_LINEAR.equals(progressStyle)) {
return ((LinearProgressDrawable)progressDrawable).getProgress();
} else if (STYLE_WAVE.equals(progressStyle)) {
return ((WaveProgressDrawable)progressDrawable).getProgress();
} else {
return 0;
}
}
public void setProgress(int percent) {
if (STYLE_CIRCULAR.equals(progressStyle)) {
((CircularProgressDrawable)progressDrawable).setProgress(percent);
} else if (STYLE_LINEAR.equals(progressStyle)) {
((LinearProgressDrawable)progressDrawable).setProgress(percent);
} else if (STYLE_WAVE.equals(progressStyle)) {
((WaveProgressDrawable)progressDrawable).setProgress(percent);
}
}
public int getSecondaryProgress() {
if (STYLE_CIRCULAR.equals(progressStyle)) {
return ((CircularProgressDrawable)progressDrawable).getSecondaryProgress();
} else if (STYLE_LINEAR.equals(progressStyle)) {
return ((LinearProgressDrawable)progressDrawable).getSecondaryProgress();
} else if (STYLE_WAVE.equals(progressStyle)) {
return ((WaveProgressDrawable)progressDrawable).getSecondaryProgress();
} else {
return 0;
}
}
public void setSecondaryProgress(int percent) {
if (STYLE_CIRCULAR.equals(progressStyle)) {
((CircularProgressDrawable)progressDrawable).setSecondaryProgress(percent);
} else if (STYLE_LINEAR.equals(progressStyle)) {
((LinearProgressDrawable)progressDrawable).setSecondaryProgress(percent);
} else if (STYLE_WAVE.equals(progressStyle)) {
((WaveProgressDrawable)progressDrawable).setSecondaryProgress(percent);
}
}
}
LinearProgressDrawable 主要作用绘制进度条，实现进度条动画。此类是这次自定义进度条控件的核心类。通过重写drawable方法里面的draw方法，我们可以实现不同样式的进度效果。通过实现Animatable的方法我们可以对动画的开启和关闭进行控制。
LinearProgressDrawable 完整代码如下：
package com.wayne.android.drawable;
import android.animation.ValueAnimator;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.ColorFilter;
import android.graphics.LinearGradient;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.PixelFormat;
import android.graphics.Rect;
import android.graphics.Shader;
import android.graphics.drawable.Animatable;
import android.graphics.drawable.Drawable;
import android.view.animation.AccelerateInterpolator;
import com.wayne.android.widget.ProgressView;
public class LinearProgressDrawable extends Drawable implements Animatable {
private int mProgressMode;
private Path mPath;
private Paint mPaint;
private float mProgressPercent;
private float mSecondaryProgressPercent;
private float mStartLine;
private float mLineWidth;
private ValueAnimator valueAnimator;
private Paint lpaint;
private boolean isRunningFlag = false;
public LinearProgressDrawable() {
mPaint = new Paint();
mPaint.setAntiAlias(true);
mPaint.setStrokeCap(Paint.Cap.ROUND);
mPaint.setStrokeJoin(Paint.Join.ROUND);
mPath = new Path();
lpaint = new Paint();
lpaint.setAlpha(125);
}
//开启不断闪动的进度动画
@Override
public void start() {
if (isRunning()) {
return;
}
isRunningFlag = true;
valueAnimator = ValueAnimator.ofFloat(0f, 1f);
valueAnimator.setRepeatCount(-1);
valueAnimator.setDuration(800);
valueAnimator.setInterpolator(new AccelerateInterpolator());
valueAnimator.setRepeatMode(ValueAnimator.RESTART);
valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator valueAnimator) {
mStartLine = getBounds().width() *((float)valueAnimator.getAnimatedValue());
invalidateSelf();
}
});
valueAnimator.start();
}
//关闭动画
@Override
public void stop() {
if (valueAnimator != null && isRunning()) {
valueAnimator.cancel();
}
isRunningFlag = false;
}
@Override
public boolean isRunning() {
return isRunningFlag;
}
@Override
public void draw(Canvas canvas) {
switch (mProgressMode) {
case ProgressView.MODE_DETERMINATE:
drawDeterminate(canvas);
break;
case ProgressView.MODE_INDETERMINATE:
drawIndeterminate(canvas);
break;
}
}
private void drawDeterminate(Canvas canvas) {
Rect bounds = getBounds();
int width = bounds.width();
float y = bounds.height()/2;
float size = 12f;
float lineWidth = width * mProgressPercent;
float secondLineWidth = width*mSecondaryProgressPercent;
android.util.Log.i("wayne_test", "mProgressPercent:" + mProgressPercent + " mSecondaryProgressPercent:" + mSecondaryProgressPercent);
mPaint.setStrokeWidth(size);
mPaint.setStyle(Paint.Style.STROKE);
if (mProgressPercent == 0) {
start();
}
if (mProgressPercent == 1) {
stop();
}
//绘制进度条底色
if(mProgressPercent != 1f){
mPaint.setColor(Color.parseColor("#E3F2FD"));
canvas.drawLine(lineWidth, y, width, y, mPaint);
}
//绘制较快的进度条
if (mSecondaryProgressPercent != 0f) {
mPaint.setColor(Color.parseColor("#BBDEFB"));
drawLinePath(canvas, 0, y, secondLineWidth, y, mPaint);
}
//绘制较慢的进度条
if(mProgressPercent != 0f){
mPaint.setColor(Color.parseColor("#2196F3"));
drawLinePath(canvas, 0, y, lineWidth, y, mPaint);
}
//绘制最上面闪烁的进度
if (mProgressPercent != 1f && mProgressPercent != 0f) {
lpaint.setStrokeWidth(size);
lpaint.setStyle(Paint.Style.STROKE);
lpaint.setAlpha(160);
float endline = Math.min(lineWidth, mStartLine + width/8);
float statline = Math.min(mStartLine, endline);
LinearGradient gradient = new LinearGradient(statline, y, endline, y, Color.parseColor("#2196F3"), Color.WHITE, Shader.TileMode.REPEAT);
lpaint.setShader(gradient);
drawLinePath(canvas, statline, y, endline, y, lpaint);
}
}
private void drawIndeterminate(Canvas canvas) {
Rect bounds = getBounds();
int width = bounds.width();
float y = bounds.height()/2;
float size = 12f;
mPaint.setStrokeWidth(size);
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setColor(Color.BLUE);
canvas.drawLine(0, y, width, y, mPaint);
mPaint.setColor(Color.RED);
mLineWidth = width/6;
float endline = Math.min(width, mStartLine + mLineWidth);
drawLinePath(canvas, mStartLine, y, endline, y, mPaint);
}
private void drawLinePath(Canvas canvas, float x1, float y1, float x2, float y2, Paint paint){
mPath.reset();
mPath.moveTo(x1, y1);//线条的起点
mPath.lineTo(x2, y2);//线条的终点
canvas.drawPath(mPath, paint);
}
@Override
public void setAlpha(int i) {
mPaint.setAlpha(i);
}
@Override
public void setColorFilter(ColorFilter colorFilter) {
mPaint.setColorFilter(colorFilter);
}
@Override
public int getOpacity() {
return PixelFormat.TRANSLUCENT;
}
public int getProgress() {
return (int)(mProgressPercent*100);
}
public void setProgress(int progress) {
float fpercent = Math.min(1f, Math.max(0f, progress/100f));
if(mProgressPercent != fpercent) {
mProgressPercent = fpercent;
invalidateSelf();
}
}
public int getSecondaryProgress() {
return (int)(mSecondaryProgressPercent*100);
}
public void setSecondaryProgress(int progress) {
float fpercent = Math.min(1f, Math.max(0f, progress/100f));
if(mSecondaryProgressPercent != fpercent) {
mSecondaryProgressPercent = fpercent;
invalidateSelf();
}
}
public void setProgressMode(int progressMode) {
if(mProgressMode != progressMode) {
mProgressMode = progressMode;
invalidateSelf();
}
}
}
attrs.xml 文件中对属性进行定义，用户在布局文件中可以传入给控件。
attrs的完整代码如下：
<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="ProgressView">
<attr name="pv_mode" format="integer"></attr>
<attr name="pv_progress" format="integer"></attr>
<attr name="pv_secondary_progress" format="integer"></attr>
<attr name="pv_style" format="string"></attr>
</declare-styleable>
</resources>
ProgressActivity 测试进度条控件是否正常。
package com.wayne.android.testcancaspath;
import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import com.wayne.android.widget.ProgressView;
public class ProgressActivity extends AppCompatActivity implements Handler.Callback{
private static final int MSG_PROGRESS = 0;
private static final int MSG_START = 1;
private static final int MSG_STOP = 2;
private static final int MSG_SPROGRESS = 3;
private ProgressView progressView;
private Handler mHandler;
private boolean isStop;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.progress_layout);
progressView = (ProgressView)findViewById(R.id.progress_view_id);
mHandler = new Handler(this);
isStop = false;
}
@Override
public boolean handleMessage(Message message) {
switch (message.what) {
case MSG_START:
progressView.setVisibility(View.VISIBLE);
break;
case MSG_STOP:
progressView.setVisibility(View.GONE);
break;
case MSG_PROGRESS:
progressView.setProgress(message.arg1);
break;
case MSG_SPROGRESS:
progressView.setSecondaryProgress(message.arg1);
break;
}
return false;
}
public void onStart(View view) {
isStop = false;
new Thread(new Runnable() {
@Override
public void run() {
Message message = mHandler.obtainMessage();
message.what = MSG_START;
message.sendToTarget();
int progress = 0;
while (progress <= 100 && !isStop) {
Message msg = mHandler.obtainMessage();
msg.what = MSG_PROGRESS;
msg.arg1 = progress;
msg.sendToTarget();
try {
Thread.sleep(100);
} catch (InterruptedException e) {
e.printStackTrace();
}
progress++;
}
Message msg = mHandler.obtainMessage();
msg.what = MSG_STOP;
msg.sendToTarget();
}
}).start();
new Thread(new Runnable() {
@Override
public void run() {
int sprogress = 0;
while (sprogress <= 100 && !isStop) {
Message msg = mHandler.obtainMessage();
msg.what = MSG_SPROGRESS;
msg.arg1 = sprogress;
msg.sendToTarget();
try {
Thread.sleep(80);
} catch (InterruptedException e) {
e.printStackTrace();
}
sprogress++;
}
}
}).start();
}
public void onStop(View view) {
isStop = true;
Message message = mHandler.obtainMessage();
message.what = MSG_STOP;
message.sendToTarget();
}
}
ProgressActivity 布局文件progress_layout的内容，我们注意app:开头的属性就是我们在attrs中定义的属性。
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin">
<Button
android:id="@+id/btn_start"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:onClick="onStart"
android:text="start"/>
<Button
android:id="@+id/btn_stop"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/btn_start"
android:onClick="onStop"
android:text="stop"/>
<com.wayne.android.widget.ProgressView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/progress_view_id"
android:layout_below="@id/btn_stop"
app:pv_progress="0"
app:pv_secondary_progress="0"
app:pv_mode="0"
app:pv_style="linear"
android:visibility="gone"/>
</RelativeLayout>
ProgressActivity 在manifest中的定义。
<activity android:name=".ProgressActivity">
<intent-filter>
<action android:name="android.intent.action.PROGRESS_VIEW" />
<category android:name="android.intent.category.DEFAULT" />
</intent-filter>
</activity>
结语：
至此实现上面效果的自定义progress控件已经完成，我们可以简单总结为下面几步：
1，在attrs文件中定义属性值。（当然，这步骤可以省略，如果你不想写xml文件，也可以在继承的View类中提供方法给调用者，调用者通过方法设置）
2，继承View，获取初始化信息，绑定drawable。提供用户需要的接口。
3，继承drawable，重写draw方法，绘制控件。（重点）
其实就是开篇说的第三种和第一种结合的方式。
网友评论