当前位置:阳光沙滩 >Android > 查看文章

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

这玩意到底长什么样子的呢?好废话不多说,先上图吧,是动图哦!

progressbutton

 

它其实是一个按钮來的哦,可以点击,当我点击它的时候,进度就开始了,那么这种控件用于什么场景呢?

比如说,在没有点击之前,它是一个按钮,然后显示点击下载,当用户点击后,它就可以显示下载的进度啦!

好啦,接下來就看看怎么实现的吧!

2. 首先:创建一个类去继承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;

/**
 * @项目名称:ProgressButton
 * @包名:com.sunofbeaches.progressbutton
 * @类名:ProgressButton.java
 * @作者:黄永康
 * @创建时间:2015-11-18下午7:06:54
 * @描述:自定义进度条按钮控件
 * 
 * @svn版本:$Rev$
 * @更新人:$Author$
 * @更新时间:$Date$
 * @更新描述:TODO:
 */

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();
	}

}

好啦,可以运行啦!

结果如下:

progressbutton1

是不是背后很难看呢,感觉不够大的样子,是吧!怎么办呢,设置一个背景就可以啦!哈哈!代码如下:

  <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="点击下载" />

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

好啦,到这里就写完了,祝你好运哦!

7K
为您推荐
各种观点