自定义钢琴键盘

模仿钢琴做了个应用,最难的点就是按键的展示.下面是我自定义的一个View

import android.annotation.SuppressLint;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Paint.Align;
import android.graphics.Paint.Style;
import android.graphics.PointF;
import android.graphics.PorterDuff;
import android.graphics.Rect;
import android.graphics.RectF;
import android.graphics.drawable.Drawable;
import android.text.TextPaint;
import android.util.AttributeSet;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;

import com.example.piano_app.model.RecodeModel;
import com.example.piano_app.model.SoundModel;
import com.example.piano_app.model.SoundModel.PlayQueueCallBack;
import com.example.piano_app.util.PreferenceService;

@SuppressLint("HandlerLeak")
public class PianoView extends View implements PlayQueueCallBack {
	/**
	 * 白键的数量
	 */
	public final static int WHITE_PIANO_KEY_COUNT = 52;
	/**
	 * 黑键的数量
	 */
	public final static int BLACK_PIANO_KEY_COUNT = 36;
	/**
	 * 白键标识
	 */
	private final static int KEY_WHITE = 0;
	/**
	 * 黑键标识
	 */
	private final static int KEY_BLACK = 1;
	/**
	 * 移动进度
	 */
	private float mProgress = 0.5f;
	/**
	 * mWhiteRect 白色键的矩形
	 * mBlackRect 黑色键的矩形
	 */
	private Rect mWhiteRect, mBlackRect;
	/**
	 * 设置个新的长方形
	 */
	private RectF oval; 
	/**
	 * 按键数量
	 */
	private int mWhiteNum;
	/**
	 * 按键底图图片
	 */
	private Drawable mWhiteDrawable, mBlackDrawable, wSelectDrawable,
			bSelectDrawable;
	/**
	 * 自定义View的宽
	 */
	private int mSurfaceWidth;
	/**
	 * 记录按下去的点
	 */
	private PointF[] list = new PointF[2];
	/**
	 * 是否选择白色
	 */
	private boolean isWselect = false;
	/**
	 * 是否选择黑色
	 */
	private boolean isBselect = false;
	/**
	 * 是否移动
	 */
	private boolean isMove = true;
	/**
	 * 画标识宽的颜色
	 */
	private Paint p;
	/**
	 * 字体画笔
	 */
	private TextPaint paint;
	/**
	 * 首选项
	 */
	private PreferenceService pf;
	/**
	 * 字体的大小
	 */
	private float mTextY;
	/**
	 * 标识1
	 */
	private String[] mTones = { "do", "re", "mi", "fa", "sol", "la", "si" };
	/**
	 * 标识2
	 */
	private String[] mDTones = { "C", "D", "E", "F", "G", "A", "B" };
	private String[] mNumbers = { "0", "1", "2", "3", "4", "5", "6", "7", "8" };
	/**
	 * 标识矩形的颜色
	 */
	private int[] mToneColors = { 0xFFCECECE, 0xFFB88886, 0xFFFE7C79,
			0xFFFEA44A, 0xFFEDED3B, 0xFF24FF24, 0xFF36FFFF, 0xFF63AFFA,
			0xFFAE6EEF };
	/**
	 * 白色按键恢复默认
	 */
	private int wIndex = -1;
	/**
	 * 黑色按键恢复默认
	 */
	private int bIndex = -1;

	public PianoView(Context context, AttributeSet attrs) {
		super(context, attrs);
		setupView(context);
	}

	private void setupView(Context context) {
		mWhiteDrawable = context.getResources()
				.getDrawable(R.drawable.white_bg);
		mBlackDrawable = context.getResources()
				.getDrawable(R.drawable.black_bg);
		wSelectDrawable = context.getResources().getDrawable(
				R.drawable.white_bg_pressed);
		bSelectDrawable = context.getResources().getDrawable(
				R.drawable.black_bg_pressed);
		pf = new PreferenceService(context);
		mWhiteNum = pf.getKeyNumber();
		p = new Paint(Paint.ANTI_ALIAS_FLAG);
		p.setColor(Color.RED);
		p.setStyle(Style.FILL);

		paint = new TextPaint(Paint.ANTI_ALIAS_FLAG);
		paint.setTextAlign(Align.CENTER);
		paint.setColor(Color.BLACK);

	}

	@Override
	protected void onSizeChanged(int w, int h, int oldw, int oldh) {
		super.onSizeChanged(w, h, oldw, oldh);
		mSurfaceWidth = w - 2;
		if (mWhiteNum == 9 || mWhiteNum > 10 && mWhiteNum < 14) {
			mSurfaceWidth = w - mWhiteNum;
		}
		mWhiteRect = new Rect(0, 0, w / mWhiteNum, h);
		mBlackRect = new Rect(0, 0, w / mWhiteNum * 2 / 3, h * 3 / 5);
		//两排按键标签位置
		if (pf.getmode() == 2) {
			oval = new RectF(0, h * 3 / 5 + mWhiteNum + 8, w / mWhiteNum / 2,
					h * 4 / 5 + 10);
		} else {
			oval = new RectF(0, h * 5 / 7 + mWhiteNum, w / mWhiteNum / 2,
					h * 6 / 7 - 4);
		}
		//字体的大小
		paint.setTextSize(oval.width() / 2 - 12 + oval.height() / 4);
		mTextY = oval.centerY() + paint.descent();

	}

	@Override
	protected void onDraw(Canvas canvas) {
		canvas.drawColor(Color.TRANSPARENT, PorterDuff.Mode.CLEAR);
		//移动的距离
		int offset = calculateOffset();
		Log.e("===>>", "wIndex:" + wIndex + "  bIndex:" + bIndex);
		//设置画布的颜色
		canvas.drawColor(getResources().getColor(R.color.font_white_color));
		//绘制白色按键
		drawWhiteKeys(canvas, offset, wIndex);
		//绘制黑色按键
		drawBlackKeys(canvas, offset, bIndex);
	}

	// 画黑色的键
	private void drawBlackKeys(Canvas canvas, int offset, int position) {
		mBlackRect.offsetTo(offset, 0);
		mBlackRect.offset(mWhiteRect.width() - mBlackRect.width() / 2, 0);
		int temp = 0;
		for (int i = 0; i < BLACK_PIANO_KEY_COUNT; i++) {
			//只画屏幕中显示的按键
			if (mBlackRect.left > mSurfaceWidth) {
				break;
			} else if (mBlackRect.right >= 0) {
				mBlackDrawable.setBounds(mBlackRect);
				mBlackDrawable.draw(canvas);
				//播放录音按键显示效果
				if (position == i) {
					bSelectDrawable.setBounds(mBlackRect);
					bSelectDrawable.draw(canvas);
				}
				//按键的点击效果
				if (isBselect) {
					for (int j = 0; j < list.length; j++) {
						if (list[j] != null
								&& mBlackRect.contains((int) list[j].x,
										(int) list[j].y)) {
							bSelectDrawable.setBounds(mBlackRect);
							bSelectDrawable.draw(canvas);
						}
					}
				}
			}
			temp = i % 5;
			//绘制黑色按键的位置
			if (temp == 0 || temp == 2) {
				mBlackRect.offset(2 * mWhiteRect.width(), 0);
			} else {
				mBlackRect.offset(mWhiteRect.width(), 0);
			}
		}
	}

	// 画白色的键
	private void drawWhiteKeys(Canvas canvas, int offset, int position) {
		mWhiteRect.offsetTo(offset, 0);
		oval.offsetTo(offset + mWhiteRect.width() / 4, oval.top);
		for (int i = 0; i < WHITE_PIANO_KEY_COUNT; i++) {
			if (mWhiteRect.left > mSurfaceWidth) {
				break;
			} else if (mWhiteRect.right >= 0) {
				mWhiteDrawable.setBounds(mWhiteRect);
				mWhiteDrawable.draw(canvas);
				if (position == i) {
					Log.i("jjf", "进入^^^^^^");
					wSelectDrawable.setBounds(mWhiteRect);
					wSelectDrawable.draw(canvas);
				}
				if (isWselect) {
					for (int j = 0; j < list.length; j++) {
						if (list[j] != null
								&& indexOfAtBlackKeys((int) list[j].x,
										(int) list[j].y) < 0) {
							if (mWhiteRect.contains((int) list[j].x,
									(int) list[j].y)) {
								wSelectDrawable.setBounds(mWhiteRect);
								wSelectDrawable.draw(canvas);
							}
						}
					}
				}
				//绘制标签
				if (pf.getTone().equals("Do")) {
					p.setColor(mToneColors[(i + 5) / 7 % 9]);
					canvas.drawRoundRect(oval, 20, 15, p);// 第二个参数是x半径，第三个参数是y半径
					canvas.drawText(mTones[(i + 5) % 7], oval.centerX(),
							mTextY, paint);
				} else if (pf.getTone().equals("D4")) {
					p.setColor(mToneColors[(i + 5) / 7 % 9]);
					canvas.drawRoundRect(oval, 20, 15, p);// 第二个参数是x半径，第三个参数是y半径
					canvas.drawText(mDTones[(i + 5) % 7]
							+ mNumbers[(i + 5) / 7 % 9], oval.centerX(),
							mTextY, paint);
				}
			}
			mWhiteRect.offset(mWhiteRect.width(), 0);
			oval.offset(mWhiteRect.width(), 0);
		}
	}
	//获取滑动的距离
	private int calculateOffset() {
		if (WHITE_PIANO_KEY_COUNT == mWhiteNum) {
			return 0;
		}

		float maxW = WHITE_PIANO_KEY_COUNT / (float) mWhiteNum * mSurfaceWidth
				- mSurfaceWidth;
		if (mProgress < 0) {
			mProgress = 0;
		}
		if (mProgress > 1) {
			mProgress = 1;
		}
		return (int) (maxW * mProgress * (-1));
	}
	//设置滑动的值
	public void setProgress(float progress) {
		mProgress = progress;
		invalidate();
	}
	//设置按键显示的数量
	public void setNumber(int i) {
		mWhiteNum = i;
		int w = getWidth();
		int h = getHeight();
		if (w == 0 || h == 0) {
			return;
		}
		mSurfaceWidth = w - 2;
		if (mWhiteNum == 9 || mWhiteNum > 10 && mWhiteNum < 14) {
			mSurfaceWidth = w - mWhiteNum;
		}
		mWhiteRect = new Rect(0, 0, w / mWhiteNum, h);
		mBlackRect = new Rect(0, 0, w / mWhiteNum * 2 / 3, h * 3 / 5);
		if (pf.getmode() == 2) {
			oval = new RectF(0, h * 3 / 5 + mWhiteNum + 8, w / mWhiteNum / 2,
					h * 4 / 5 + 10);
		} else {
			oval = new RectF(0, h * 5 / 7 + mWhiteNum, w / mWhiteNum / 2,
					h * 6 / 7 - 4);
		}
		paint.setTextSize(oval.width() / 2 - 12 + oval.height() / 4);
		mTextY = oval.centerY() + paint.descent();
		invalidate();
	}

	int touch_x, touch_y, move_x, touch_x1;
	//多点触控
	@Override
	public boolean onTouchEvent(MotionEvent event) {
		if (SoundModel.getInstance().isQueuePlaying()) {
			return true;
		}
		int pointerCount = event.getPointerCount();
		int x1 = 0, y1 = 0;
		int x = (int) event.getX(0);
		int y = (int) event.getY(0);
		if (pointerCount == 2) {
			x1 = (int) event.getX(1);
			y1 = (int) event.getY(1);
		}
		switch (event.getAction() & MotionEvent.ACTION_MASK) {
		case MotionEvent.ACTION_DOWN: // 第一个手指按下事件
			Log.i("jjf", "第一个手指按下事件");
			move_x = touch_x = (int) event.getX(0);
			touch_y = (int) event.getY(0);
			if (isMove) {
				list[0] = new PointF(touch_x, touch_y);
			}

			keyOnclick(touch_x, touch_y);
			break;
		case MotionEvent.ACTION_POINTER_DOWN: // 第二个手指按下事件
			Log.i("jjf", "第二个手指按下事件");
			touch_x1 = (int) event.getX(1);
			list[1] = new PointF(x1, y1);
			keyOnclick(x1, y1);
			break;
		case MotionEvent.ACTION_UP:
			list[0] = null;
			isBselect = false;
			isWselect = false;
			isMove = true;
			invalidate();
			break;
		case MotionEvent.ACTION_POINTER_UP:
			// 手指放开事件
			list[1] = null;
			isBselect = false;
			isWselect = false;
			invalidate();
			break;
		case MotionEvent.ACTION_MOVE:
			int xt = (int) event.getX(0);
			isMove = false;
			if (pointerCount == 2) {
				int xt1 = (int) event.getX(1);
				Log.i("jjf", "二个手指移动事件");
				if (Math.abs(xt - touch_x) > mWhiteRect.width()) {
					Log.i("jjf", "第一个手指移动事件");
					list[0] = new PointF(x, y);
					keyOnclick(x, y);
					touch_x = xt;
				}
				if (Math.abs(xt1 - touch_x1) > mWhiteRect.width()) {
					Log.i("jjf", "第二个手指移动事件");
					// 两个手指滑动
					list[1] = new PointF(x1, y1);
					keyOnclick(x1, y1);
					touch_x1 = xt1;
				}
			} else {
				if (Math.abs(xt - move_x) > mWhiteRect.width()) {
					Log.i("jjf", "一个手指移动事件");
					list[0] = new PointF(x, y);
					keyOnclick(x, y);
					move_x = xt;
				}
			}
			break;

		}

		return true;
	}

	// 手指滑动点击事件
	private void keyOnclick(int x, int y) {
		//获取黑色点击按键的位置
		int index = indexOfAtBlackKeys(x, y);
		if (index < 0) {
			//获取白色点击按键的位置
			index = indexOfAtWhiteKeys(x, y);
			if (index >= 0) {
				isWselect = true;
				//播放白色按键音乐
				SoundModel.getInstance().play(KEY_WHITE, index);
				//保存白色按键位置
				RecodeModel.getInstance().addEvent(KEY_WHITE, index);
				invalidate();
			} else {
				return;
			}
		} else {
			isBselect = true;
			//播放黑色按键音乐
			SoundModel.getInstance().play(KEY_BLACK, index);
			//保存黑色按键位置
			RecodeModel.getInstance().addEvent(KEY_BLACK, index);
			invalidate();
		}
	}
	//获取黑色点击按键的位置
	private int indexOfAtBlackKeys(int x, int y) {
		mBlackRect.offsetTo(calculateOffset(), 0);
		mBlackRect.offset(mWhiteRect.width() - mBlackRect.width() / 2, 0);
		int temp = 0;
		for (int i = 0; i < BLACK_PIANO_KEY_COUNT; i++) {
			if (mBlackRect.left > mSurfaceWidth) {
				break;
			} else if (mBlackRect.right >= 0) {
				if (mBlackRect.contains(x, y)) {
					return i;
				}
			}
			temp = i % 5;
			if (temp == 0 || temp == 2) {
				mBlackRect.offset(2 * mWhiteRect.width(), 0);
			} else {
				mBlackRect.offset(mWhiteRect.width(), 0);
			}
		}
		return -1;
	}
	//获取白色点击按键的位置
	private int indexOfAtWhiteKeys(int x, int y) {
		mWhiteRect.offsetTo(calculateOffset(), 0);
		for (int i = 0; i < WHITE_PIANO_KEY_COUNT; i++) {
			if (mWhiteRect.left > mSurfaceWidth) {
				break;
			} else if (mWhiteRect.right >= 0) {
				if (mWhiteRect.contains(x, y)) {
					return i;
				}
			}
			mWhiteRect.offset(mWhiteRect.width(), 0);
		}
		return -1;
	}
	//恢复按键默认状态
	public void Recover() {
		wIndex = -1;
		bIndex = -1;
		invalidate();
	}
	//播放录音接口
	@Override
	public void callback(int type, int position) {
		if (type == KEY_WHITE) {
			wIndex = position;
			bIndex = -1;
		} else {
			wIndex = -1;
			bIndex = position;
		}
		invalidate();
	}
}

上面的注释比较清楚,上面多点触控还不够完善.大家可以加以修改.希望能帮助大家.