android酷炫按钮-微调按钮

Home / Android MrLee 2015-4-15 3163

这个按钮在很地方可以看到,比如音箱音量调控、原来DVD功放上的按钮等等……
今天因为项目需要,于是简单写了一个这样的按钮。看看效果吧!

gifaaa


还有点灯灯,看源码:
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.widget.ImageView;

public class RotateImageView extends ImageView {
	private float degree = 90;
	private int cx;
	private int cy;
	private Bitmap point;
	PointMark[] pms = new PointMark[4];
	private static final int range = 20;
	private DegreeChangeListener degreeChangeListener;
	public RotateImageView(Context context, AttributeSet attrs) {
		super(context, attrs);
		// TODO Auto-generated constructor stub
		point = BitmapFactory.decodeResource(getResources(), R.drawable.point);
		for (int i = 0; i < pms.length; i++) {
			pms[i] = new PointMark();
			pms[i].active = false;
			pms[i].leave = true;
		}
		pms[1].active = true;
		pms[1].leave = false;
	}
	public void setDegreeChangeListener(
			DegreeChangeListener degreeChangeListener) {
		this.degreeChangeListener = degreeChangeListener;
	}
	public float getDegree() {
		return degree;
	}
	public void setDegree(float degree) {
		this.degree = degree;
	}
	@Override
	protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
		// TODO Auto-generated method stub
		super.onMeasure(widthMeasureSpec, heightMeasureSpec);
		cx = getWidth() >> 1;
		cy = getHeight() >> 1;
	}
	/**
	 * @param canvas
	 * @param dir
	 */
	private void showPoint(Canvas canvas, int dir) {
		if (pms[dir].active) {
			canvas.save();
			switch (dir) {
			case 0:
				canvas.rotate(-90, cx, cy);
				break;
			case 1:
				canvas.rotate(0, cx, cy);
				break;
			case 2:
				canvas.rotate(90, cx, cy);
				break;
			case 3:
				canvas.rotate(180, cx, cy);
				break;
			}
			if (point != null)
				canvas.drawBitmap(point, getLeft(), getTop(), null);
			canvas.restore();
		}
	}
	private void change(int index) {
		if (pms[index].leave) {
			pms[index].active = !pms[index].active;
			pms[index].leave = false;
		}
	}
	@Override
	protected void onDraw(Canvas canvas) {
		// TODO Auto-generated method stub
		// 90度初始值degree:0~360 顺序左上右下
		canvas.save();
		canvas.rotate(degree - 90, cx, cy);
		super.onDraw(canvas);
		canvas.restore();
		if (degree >= 360 - range && degree <= 360 || degree >= 0
				&& degree <= range) {
			// 左边
			change(0);
			showPoint(canvas, 0);
		} else {
			pms[0].leave = true;
			showPoint(canvas, 0);
		}
		if (degree >= 90 - range && degree <= 90 + range) {
			// 上边
			change(1);
			showPoint(canvas, 1);
		} else {
			pms[1].leave = true;
			showPoint(canvas, 1);
		}
		if (degree >= 180 - range && degree <= 180 + range) {
			// 右边
			change(2);
			showPoint(canvas, 2);
		} else {
			pms[2].leave = true;
			showPoint(canvas, 2);
		}
		if (degree >= 270 - range && degree <= 270 + range) {
			// 下边
			change(3);
			showPoint(canvas, 3);
		} else {
			pms[3].leave = true;
			showPoint(canvas, 3);
		}
	}
	boolean inRange;// 是否在合理范围之内默认为30度
	int touchRange = 30;
	float lastDegree;
	@Override
	public boolean onTouchEvent(MotionEvent event) {
		// TODO Auto-generated method stub
		if (event.getAction() == MotionEvent.ACTION_DOWN) {
			float f = getRotation(cx, cy, event.getX(), event.getY(), 180);
			inRange = Math.abs(f - degree) < touchRange;
		} else if (event.getAction() == MotionEvent.ACTION_MOVE) {
			// if (inRange) {
			// 显示角度为0~180 -180-0 转成0~360
			degree = getRotation(cx, cy, event.getX(), event.getY(), 180);
			if (Math.abs(degree - lastDegree) > 10) {
				// 活动角度大于 10
				if (degreeChangeListener != null) {
					boolean circle = (degree >= 0 && degree <= 90
							&& lastDegree <= 360 && lastDegree >= 270);// 回到原点
					if (degree - lastDegree > 0 || circle)
						degreeChangeListener.clockwise();
					else
						degreeChangeListener.anticlockwise();
				}
				lastDegree = degree;
			}
			invalidate();
			// }
		}
		return super.onTouchEvent(event);
	}
	float getRotation(float x1, float y1, float x2, float y2, float angle) {
		float value = (float) Math.toDegrees(Math.atan2(y2 - y1, x2 - x1));
		return value + angle;
	}
	private class PointMark {
		boolean active;
		boolean leave;
	}
	public interface DegreeChangeListener {
		/**
		 * 顺时针
		 */
		public void clockwise();// 顺时针
		/**
		 * 逆时针
		 */
		public void anticlockwise();// 逆时针
	}
}

point

rotation_button

rotation_point



上面是需要用到的图片,当然了,你可以设计自己喜欢的图片.

本文链接:https://www.it72.com/2206.htm

推荐阅读
最新回复 (0)
返回