自定义控件-进度按钮(ProgressButton)

自定义控件-进度按钮(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="点击下载" />

看到了吗，设置背景之后就像开头那张图片一样啦！

好啦，到这里就写完了，祝你好运哦！