自定义控件-进度按钮(ProgressButton)
这玩意到底长什么样子的呢?好废话不多说,先上图吧,是动图哦!
它其实是一个按钮來的哦,可以点击,当我点击它的时候,进度就开始了,那么这种控件用于什么场景呢?
比如说,在没有点击之前,它是一个按钮,然后显示点击下载,当用户点击后,它就可以显示下载的进度啦!
好啦,接下來就看看怎么实现的吧!
首先:创建一个类去继承Button
接着,去复写onDraw方法
@Override
protected void onDraw(Canvas canvas) {
// TODO Auto-generated method stub
super.onDraw(canvas);
}
需要什么参数就定义什么变量,然后暴露方法让外界调用设置。
// 默认是不使用进度条按钮
private boolean mProgressEnable = false;
// 暴露方法设置
public void setProgress(boolean enable) {
this.mProgressEnable = enable;
}
// 可画的图
private Drawable mProgressDrawable;
// 暴露方法设置
public void setDrawable(Drawable drawable) {
this.mProgressDrawable = drawable;
}
// 进度
private int mProgress;
public void setProgress(int progress) {
this.mProgress = progress;
// 请求重新绘制,也就是再次调用onDraw方法
invalidate();
}
// 最大值
private float mMax;
public void setMax(int max) {
this.mMax = max;
}
本类的所有代码如下:
package com.sunofbeaches.progressbutton;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;
import android.widget.Button;
public class ProgressButton extends Button {
// 默认是不使用进度条按钮
private boolean mProgressEnable = false;
// 暴露方法设置
public void setProgress(boolean enable) {
this.mProgressEnable = enable;
}
// 可画的图
private Drawable mProgressDrawable;
// 暴露方法设置
public void setDrawable(Drawable drawable) {
this.mProgressDrawable = drawable;
}
// 进度
private int mProgress;
public void setProgress(int progress) {
this.mProgress = progress;
// 请求重新绘制,也就是再次调用onDraw方法
invalidate();
}
// 最大值
private float mMax;
public void setMax(int max) {
this.mMax = max;
}
public ProgressButton(Context context, AttributeSet attrs) {
super(context, attrs);
}
public ProgressButton(Context context) {
super(context);
}
@Override
protected void onDraw(Canvas canvas) {
if (mProgressEnable) {
// 进來则使用进度条按钮
// 把传进來的可画图形画出來。
if (mMax == 0) {// 如果最大值为0的时候,则让其变为100
mMax = 100;
}
// 设置画图的上下左右
int left = 0;
int top = 0;
int bottom = this.getMeasuredHeight();// 高度就是当前按钮的高度
// 根据传入的进度而改变
int right = (int) (mProgress * this.getMeasuredWidth() * 1f / mMax + 0.5f);// 右边是会变动的
mProgressDrawable.setBounds(left, top, right, bottom);
mProgressDrawable.draw(canvas);
}
// 这里调用父类的方法一定要放在后面哦,否则的话就是先画完了百分之几的字体,然后再画drawable。
// 也就是会被覆盖的哦!
super.onDraw(canvas);
}
}
接下來,把上面这个类的全路径名称复制出來,到主界面的布局文件里,创建这个控件,同时加个id哦!
如下:
<com.sunofbeaches.progressbutton.ProgressButton
android:id="@+id/pb_main_button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="点击下载" />
然后呢,对应在主类通过Id找到button,代码如下:
package com.sunofbeaches.progressbutton;
import android.app.Activity;
import android.graphics.Color;
import android.graphics.drawable.ColorDrawable;
import android.os.AsyncTask;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
public class MainActivity extends Activity implements OnClickListener {
private ProgressButton mButton;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
initView();
}
private void initView() {
setContentView(R.layout.activity_main);
// 找到button
mButton = (ProgressButton) this.findViewById(R.id.pb_main_button);
// 设置点击监听
mButton.setOnClickListener(this);
}
@Override
public void onClick(View v) {
if (v == mButton) {
// 被点击之后,弄一个异步线程來操作进度
buttonClick();
}
}
private void buttonClick() {
new AsyncTask<Void, Integer, Void>() {
@Override
protected Void doInBackground(Void... params) {
// 后台运行的操作
for (int i = 0; i <= 100; i++) {
try {
Thread.sleep(100);
} catch (InterruptedException e) {
e.printStackTrace();
}
publishProgress(i);
}
return null;
}
@Override
protected void onPreExecute() {
// 准备工作
// 设置可用性
mButton.setProgressEnable(true);
// 设置最大值
mButton.setMax(100);
// 设置画图
mButton.setDrawable(new ColorDrawable(Color
.parseColor("#ffff0000")));// 红色,嘻嘻!
}
@Override
protected void onProgressUpdate(Integer... values) {
// 设置进度显示
mButton.setProgress(values[0]);
mButton.setText(values[0] + "%");
}
}.execute();
}
}
好啦,可以运行啦!
结果如下:
是不是背后很难看呢,感觉不够大的样子,是吧!怎么办呢,设置一个背景就可以啦!哈哈!代码如下
<com.sunofbeaches.progressbutton.ProgressButton
android:id="@+id/pb_main_button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#99000000"
android:text="点击下载" />
看到了吗,设置背景之后就像开头那张图片一样啦!
好啦,到这里就写完了,祝你好运哦!