刻度尺

原创 2015年07月09日 16:25:02

如图所示图的上面就是一个可以旋转的刻度尺

代码如下:

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.drawable.Drawable;
import android.media.SoundPool;
import android.view.MotionEvent;
import android.view.SurfaceHolder;
import android.view.SurfaceView;

import com.ijoysoft.flashlight.R;
import com.ijoysoft.flashlight.activity.MainActivity;
import com.ijoysoft.flashlight.util.Arithmetic;
import com.ijoysoft.flashlight.util.ScreenUtil;

public class StaffView extends SurfaceView implements SurfaceHolder.Callback,
		Runnable {

	private SurfaceHolder mSurfaceHolder = null;
	private Canvas canvas;
	private Paint paint;
	// 刻度游标
	private Drawable pointer;
	// 图片
	private Drawable imgBitmap;
	// 背景
	private Drawable background;
	// 初始值
	private float initValue;
	// 刻度单位最小值
	private float interval;
	// 单位
	private String unit;
	// 是否初始
	private boolean isInit = true;
	// 显示结果X坐标
	private int result_x = 36; // 结果的X轴位置
	// 显示结果Y坐标
	private int result_y = 25; // 结果的Y轴位置
	/**
	 * 显示结果字体大小
	 */
	private int result_size = 24; // 结果的字体大小
	private int size;
	private float result = 0;
	// 结果画笔
	private Paint reslutPaint;
	// 字体画笔
	private Paint textPaint;
	// 黑线画笔
	private Paint bPaint;
	// 白线画笔
	private Paint wPaint;
	// 显示的文字
	private String value[] = { "8", "9", "sos", "0", "1", "2", "3", "4", "5",
			"6", "7" };
	// 线的间隔
	private int mSpace;
	// 图片的间隔
	private int imgSpace;
	// view宽
	private int mWidth;
	// view高
	private int mHeight;
	// 选择的值
	private int rate;
	// 滑动时变化的值
	private int mNumber = 0;
	private int index = 1;
	private boolean isLeft = true;
	private int isLeftChange = 1;
	private Context context;
	private SoundPool pool;
	private int hitOkSfx;

	public StaffView(Context context, float initValue, float interval,
			SoundPool pool, int i) {
		super(context);
		this.context = context;
		this.pool = pool;
		hitOkSfx = i;
		mSurfaceHolder = this.getHolder();
		mSurfaceHolder.addCallback(this);
		paint = new Paint();
		this.setFocusable(true);
		pointer = getResources().getDrawable(R.drawable.kedu_pointer);
		imgBitmap = getResources().getDrawable(R.drawable.turn_img);
		background = getResources().getDrawable(R.drawable.staff_bg);

		this.initValue = initValue;
		this.interval = interval;
		this.unit = unit;
		init(context);
	}

	@Override
	public void surfaceChanged(SurfaceHolder holder, int format, int width,
			int height) {

	}

	@Override
	public void surfaceCreated(SurfaceHolder holder) {
		new Thread(this).start();
	}

	@Override
	public void surfaceDestroyed(SurfaceHolder holder) {

	}

	@Override
	public void run() {
		draw(0);
	}

	private void init(Context context) {
		size = ScreenUtil.dip2px(context, 1);
		// 显示结果
		reslutPaint = new Paint();
		reslutPaint.setColor(Color.BLACK);
		reslutPaint.setTextSize(result_size);
		// 字体
		textPaint = new Paint();
		textPaint.setStrokeWidth(ScreenUtil.dip2px(context, 3));
		// 黑线
		bPaint = new Paint();
		bPaint.setColor(Color.BLACK);
		bPaint.setStrokeWidth(size);
		// 白线
		wPaint = new Paint();
		wPaint.setColor(Color.WHITE);
		wPaint.setStrokeWidth(size);
	}

	/**
	 * @param direction
	 *            方向,-1向左,1向右,0不动
	 */
	public void draw(int direction) {
		// 获取画布
		canvas = mSurfaceHolder.lockCanvas();
		if (mSurfaceHolder == null || canvas == null) {
			return;
		}
		canvas.drawColor(Color.WHITE);
		paint.setAntiAlias(true);
		paint.setColor(Color.GRAY);
		background.setBounds(0, 0, getWidth(), getHeight());
		background.draw(canvas);
		if (isInit) {
			result = initValue;
		} else {
			switch (direction) {
			case 1:
				result = Arithmetic.add(result, interval);
				mNumber = (int) ((result - initValue) / interval);
				initValue = result;
				isLeft = true;
				break;
			case -1:
				result = Arithmetic.sub(result, interval);
				mNumber = (int) ((result - initValue) / interval);
				initValue = result;
				mNumber = Math.abs(mNumber);
				isLeft = false;
				break;
			}
			if (MainActivity.isSound) {
				if (index % 2 == 0) {
					pool.play(hitOkSfx, 1, 1, 0, 0, 0);
				}
			}
		}
		initStaff();

		pointer.setBounds(mWidth / 2 - ScreenUtil.dip2px(context, 17), mHeight
				* 5 / 6 - ScreenUtil.dip2px(context, 20), mWidth / 2
				+ ScreenUtil.dip2px(context, 17),
				mHeight * 5 / 6 + ScreenUtil.dip2px(context, 12));
		pointer.draw(canvas);
		// canvas.drawText(Float.toString(result) + " " + unit, result_x,
		// result_y, reslutPaint);
		// 画上面的图
		if (isInit) {
			for (int i = 0; i < 8; i++) {
				int top = mHeight / 9;
				int left = imgSpace + i * imgSpace * 2;
				int right = imgSpace * 2 + i * imgSpace * 2;
				imgBitmap.setBounds(left, top, right, mHeight * 5 / 9);
				imgBitmap.draw(canvas);
			}
		} else {
			if (index % 2 == 0) {
				for (int i = 0; i < 8; i++) {
					int top = mHeight / 9;
					int left = imgSpace + i * imgSpace * 2;
					int right = imgSpace * 2 + i * imgSpace * 2;
					imgBitmap.setBounds(left, top, right, mHeight * 5 / 9);
					imgBitmap.draw(canvas);
				}
			} else {
				for (int i = 0; i < 9; i++) {
					int top = mHeight / 9;
					int left = 0 + i * imgSpace * 2;
					int right = imgSpace + i * imgSpace * 2;
					imgBitmap.setBounds(left, top, right, mHeight * 5 / 9);
					imgBitmap.draw(canvas);
				}
			}

		}
		// 解锁画布,提交画好的图像
		mSurfaceHolder.unlockCanvasAndPost(canvas);
	}

	@Override
	protected void onSizeChanged(int w, int h, int oldw, int oldh) {
		super.onSizeChanged(w, h, oldw, oldh);
		mWidth = getWidth();
		mHeight = getHeight();
		mSpace = getWidth() / 14;
		imgSpace = getWidth() / 17;
	}

	private void initStaff() {
		canvas.drawLine(0, mHeight * 2 / 3, mWidth, mHeight * 2 / 3, wPaint);
		canvas.drawLine(0, mHeight * 2 / 3 - 2, mWidth, mHeight * 2 / 3 - 2,
				bPaint);
		canvas.drawLine(0, mHeight, mWidth, mHeight, wPaint);
		canvas.drawLine(0, mHeight - 2, mWidth, mHeight - 2, bPaint);

		if (mNumber > 0) {
		//实现从新排列数组
			if (!isLeft) {
				String temp;
				if (isLeftChange % 2 == 0) {
					for (int k = value.length - 1; k > 0; k--) {
						temp = value[k];
						value[k] = value[k - 1];
						value[k - 1] = temp;
					}
				}
				isLeftChange++;
			} else {
				String mp;
				if (isLeftChange % 2 == 1) {
					for (int k = 0; k < value.length - 1; k++) {
						mp = value[k];
						value[k] = value[k + 1];
						value[k + 1] = mp;
					}
				}
				isLeftChange++;
			}
		}
		int j = 0;
		for (int i = 1; i < 14; i++) {
			if (isInit) {
				if (i % 2 == 1) {
					canvas.drawLine(mSpace * i, mHeight - 2, mSpace * i,
							mHeight - mHeight / 12, bPaint);
					if (value[j].equals("sos")) {
						textPaint.setColor(Color.YELLOW);
					} else if (value[j].equals("0")) {
						textPaint.setColor(Color.RED);
					} else {
						textPaint.setColor(Color.WHITE);
					}

					if (i == 7) {
						textPaint.setTextSize(ScreenUtil.dip2px(context, 18));
						if (value[j].equals("sos")) {
							rate = 0;
						} else if (value[j].equals("0")) {
							rate = -1;
						} else {
							rate = Integer.parseInt(value[j]);
						}
					} else {
						textPaint.setTextSize(ScreenUtil.dip2px(context, 12));
					}
					if (value[j].equals("sos")) {
						if (i == 7) {
							canvas.drawText(
									value[j],
									mSpace * i - ScreenUtil.dip2px(context, 13),
									mHeight - mHeight / 6, textPaint);
						} else {
							canvas.drawText(
									value[j],
									mSpace * i - ScreenUtil.dip2px(context, 10),
									mHeight - mHeight / 6, textPaint);
						}
					} else {
						canvas.drawText(value[j],
								mSpace * i - ScreenUtil.dip2px(context, 3),
								mHeight - mHeight / 6, textPaint);
					}
					j++;
				} else {
					canvas.drawLine(mSpace * i, mHeight - 2, mSpace * i,
							mHeight - mHeight / 24, bPaint);
				}

			} else {
				if (index % 2 == 0) {
					if (i % 2 == 1) {

						canvas.drawLine(mSpace * i, mHeight - 2, mSpace * i,
								mHeight - mHeight / 12, bPaint);
						if (value[j].equals("sos")) {
							textPaint.setColor(Color.YELLOW);
						} else if (value[j].equals("0")) {
							textPaint.setColor(Color.RED);
						} else {
							textPaint.setColor(Color.WHITE);
						}

						if (i == 7) {
							textPaint.setTextSize(ScreenUtil
									.dip2px(context, 18));
							if (value[j].equals("sos")) {
								rate = 0;
							} else if (value[j].equals("0")) {
								rate = -1;
							} else {
								rate = Integer.parseInt(value[j]);
							}
						} else {
							textPaint.setTextSize(ScreenUtil
									.dip2px(context, 12));
						}
						if (value[j].equals("sos")) {
							if (i == 7) {
								canvas.drawText(value[j], mSpace * i
										- ScreenUtil.dip2px(context, 13),
										mHeight - mHeight / 6, textPaint);
							} else {
								canvas.drawText(value[j], mSpace * i
										- ScreenUtil.dip2px(context, 10),
										mHeight - mHeight / 6, textPaint);
							}
						} else {
							canvas.drawText(value[j],
									mSpace * i - ScreenUtil.dip2px(context, 3),
									mHeight - mHeight / 6, textPaint);
						}
						j++;
					} else {
						canvas.drawLine(mSpace * i, mHeight - 2, mSpace * i,
								mHeight - mHeight / 24, bPaint);
					}
				} else {
					if (i % 2 == 1) {
						canvas.drawLine(mSpace * i, mHeight - 2, mSpace * i,
								mHeight - mHeight / 24, bPaint);
					} else {
						canvas.drawLine(mSpace * i, mHeight - 2, mSpace * i,
								mHeight - mHeight / 12, bPaint);
						if (value[j].equals("sos")) {
							textPaint.setColor(Color.YELLOW);
						} else if (value[j].equals("0")) {
							textPaint.setColor(Color.RED);
						} else {
							textPaint.setColor(Color.WHITE);
						}

						if (i == 7) {
							textPaint.setTextSize(ScreenUtil
									.dip2px(context, 18));
							if (value[j].equals("sos")) {
								rate = 0;
							} else if (value[j].equals("0")) {
								rate = -1;
							} else {
								rate = Integer.parseInt(value[j]);
							}
						} else {
							textPaint.setTextSize(ScreenUtil
									.dip2px(context, 12));
						}
						if (value[j].equals("sos")) {
							if (i == 7) {
								canvas.drawText(value[j], mSpace * i
										- ScreenUtil.dip2px(context, 13),
										mHeight - mHeight / 6, textPaint);
							} else {
								canvas.drawText(value[j], mSpace * i
										- ScreenUtil.dip2px(context, 10),
										mHeight - mHeight / 6, textPaint);
							}
						} else {
							canvas.drawText(value[j],
									mSpace * i - ScreenUtil.dip2px(context, 3),
									mHeight - mHeight / 6, textPaint);
						}
						j++;
					}
				}
				if (i == 13) {
					index++;
				}
			}

		}

	}

	private float initx = 0;

	@Override
	public boolean onTouchEvent(MotionEvent event) {
		switch (event.getAction()) {
		case MotionEvent.ACTION_DOWN:
			initx = event.getX();
			break;
		case MotionEvent.ACTION_MOVE:
			float lastx = event.getX();
			if (lastx > initx + mSpace) {
				isInit = false;
				draw(-1);
				initx = lastx;
			} else if (lastx < initx - mSpace) {
				isInit = false;
				draw(1);
				initx = lastx;
			}
			if (callback != null) {
				callback.run();
			}
			break;
		}
		return true;
	}
	
	private Runnable callback;
	//这个接口监听刻度尺的旋转
	public void setCallback(Runnable callback) {
		this.callback = callback;
	}
	//获取选中的值
	public int getRate() {
		return rate;
	}
}

Android自定义view之(刻度尺view)

前言: 最近一直在做h5,感觉学的东西多了还真有点混淆了,再来看anroid的时候,觉得有点点陌生了,难道真的是鱼与熊掌不可兼得吗? 好吧,也罢~ 在技术群中看到一个小伙伴有一个这样的需求,所以在不...
  • vv_bug
  • vv_bug
  • 2017年05月11日 20:46
  • 300

Gallery 横向滑动的刻度尺

Gallery(画廊)虽然已过时,官方也建议我们使用ViewPager,但是用它来做一下小功能还是可以的, 我们先来看效果图:这里的有透明的效果,所以需要我们来自定义Gallery:package ...

Android自定义刻度尺的实现思路以及步骤

最近一直在学自定义view,博大精深,感觉如果向底层看的话,功力不够且时间不允许,所以一直都是停留在怎么实现自定义view上,而为何会这么实现以及差异并没有考虑的很清晰,因为面向对象编程以及封装,都是...

android自定义View:纯canvas绘制的体重刻度尺

废话不多说,先上效果图 在此特别感谢扔物线的HenCoder系列,目前已更新了8章内容,让我从一个纯canvas小白变成了canvas小菜。 刻度尺效果是仿写HenCoder公众号中《仿写酷界面》中的...
  • joe91
  • joe91
  • 2017年10月25日 16:35
  • 249

安卓自定义view之——可滑动时间轴(时间刻度尺)

如果需要解决在viewpager,horizontalscrollview中滑动事件的冲突,可注入viewpager,horizontalscrollview对象,在down的时候调用requestd...

Android自定义控件尺子 滚动刻度尺

自定义控件是件很有乐趣的事,慢慢的会爱上它,哈哈哈。废话不多说先上设计图 接下来我们我们要先分析一下页面中需要到哪些东西 1.一条无限长的底线; 2.一根在屏幕中间的红色标记线,代表当前位置; 3....

android 滚轮刻度尺的实现

android 滚轮刻度尺的实现
  • ttdevs
  • ttdevs
  • 2014年09月01日 09:02
  • 8791

自定义view---滚动的刻度尺(三)

scrollview+ 里linearlayout 使用addview方法添加小view shoushi

android 滚轮刻度尺的实现

遇到一个需求需要实现如下图的效果: vcPmtcS2q8730tTHsMO7xaq5/aOs0tTEv8ewxOO1xMTcwaajrM/rwcu8uNbWy7zCt7a8y8DU2sHLsOvCt...

HighCharts 改源码,添加次刻度尺

本次修改针对HignCharts4.0.3render: function (index, old, opacity)
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:刻度尺
举报原因:
原因补充:

(最多只允许输入30个字)