這是一個簡單的電影院選座效果，實(shí)現(xiàn)該效果大致分為三步：

自定義view進(jìn)行繪制；

手勢縮放效果的實(shí)現(xiàn)；

手勢觸摸被選和未被選效果的實(shí)現(xiàn)；

先來看第一步，效果的繪制；

public class MoveSeatView extends View {private final boolean DBG = false;private Paint paint = new Paint();private Matrix matrix = new Matrix();private Matrix tempMatrix = new Matrix();//座位水平間距private int spacing;//座位垂直間距private int verSpacing;//行號寬度private int numberWidth;//行數(shù)private int row;//列數(shù)private int column;//可選座位的圖片private Bitmap seatBitmap;//選中時座位的圖片private Bitmap checkedSeatBitmap;private int lastX;private int lastY;//整個座位圖的寬度private int seatBitmapWidth;private int seatBitmapHeight;private float screenHeight;//屏幕的最小寬度private int defaultScreenWidth;//標(biāo)識是否正在縮放private boolean isScaling;private float scaleX, scaleY;//是否是第一次縮放private boolean firstScale = true;private boolean isOnClick;private int downX, downY;private boolean pointer;//用于存儲已經(jīng)選在好的座位public ArrayList<Point> list;/*** 默認(rèn)的座位圖片的寬度，如果使用的自己的座位的圖片比這個尺寸大或者小，會縮放到這個大小*/private float defaultImgW = 40;private float defaultImgH = 34;/*** 座位圖片的寬度*/private int seatWidth = 40;/*** 座位圖片的高度*/private int seatHeight = 34;private float zoom;float xScalel = 1;float yScalel = 1;public MoveSeatView(Context context) {this(context, null);}public MoveSeatView(Context context, AttributeSet attrs) {this(context, attrs, 0);}public MoveSeatView(Context context, AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);}private void init() {spacing = (int) dip2px(5);verSpacing = (int) dip2px(10);defaultScreenWidth = (int) dip2px(80);seatBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.seat_default);xScalel = defaultImgW / seatBitmap.getWidth();yScalel = defaultImgH / seatBitmap.getHeight();checkedSeatBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.seat_green);seatBitmapWidth = (int) (column * seatBitmap.getWidth() * xScalel + (column - 1) * spacing);seatBitmapHeight = (int) (row * seatBitmap.getHeight() * yScalel + (row - 1) * verSpacing);paint.setColor(Color.RED);numberWidth = (int) dip2px(20);screenHeight = dip2px(20);list = new ArrayList<>();matrix.postTranslate(numberWidth + spacing, screenHeight + 1 + verSpacing);} }

上面這些都是一些初始化動作，接下來在onDraw方法中進(jìn)行繪制；

@Overrideprotected void onDraw(Canvas canvas) {if (row <= 0 || column <= 0) {return;}drawSeat(canvas);super.onDraw(canvas);}

具體的繪制邏輯實(shí)在drawSeat(),方法中實(shí)現(xiàn)的；

/*** 繪制** @param canvas*/private void drawSeat(Canvas canvas) {zoom = getMatrixScaleX();float translateX = getTranslateX();float translateY = getTranslateY();float scaleX = zoom;float scaleY = zoom;for (int i = 0; i < row; i++) {float top = i * seatBitmap.getHeight() * yScalel * scaleY + i * verSpacing * scaleY + translateY;float bottom = top + seatBitmap.getHeight() * yScalel * scaleY;for (int j = 0; j < column; j++) {float left = j * seatBitmap.getWidth() * xScalel * scaleX + j * spacing * xScalel * scaleX + translateX;float right = left + seatBitmap.getWidth() * xScalel * scaleX;tempMatrix.setTranslate(left, top);tempMatrix.postScale(xScalel, yScalel, left, top);tempMatrix.postScale(scaleX, scaleY, left, top);if (isHave(i, j)) {//繪制被選canvas.drawBitmap(checkedSeatBitmap, tempMatrix, paint);//繪制文字drawText(canvas, i, j, top, left);} else {//繪制普通canvas.drawBitmap(seatBitmap, tempMatrix, paint);}}}}

主要是計算繪制的位置，矩陣的縮放，根據(jù)是否被選進(jìn)行繪制不同的效果；

/*** 繪制文字** @param canvas* @param row* @param column* @param top* @param left*/private void drawText(Canvas canvas, int row, int column, float top, float left) {String txt = (row + 1) + "排";String txt1 = (column + 1) + "座";//實(shí)例化文字畫筆TextPaint txtPaint = new TextPaint(Paint.ANTI_ALIAS_FLAG);txtPaint.setColor(Color.WHITE);//設(shè)置字體樣式txtPaint.setTypeface(Typeface.DEFAULT_BOLD);float seatHeight = this.seatHeight * getMatrixScaleX();float seatWidth = this.seatWidth * getMatrixScaleX();txtPaint.setTextSize(seatHeight / 3);//獲取中間線float center = seatHeight / 2;float txtWidth = txtPaint.measureText(txt);float startX = left + seatWidth / 2 - txtWidth / 2;//只繪制一行文字if (txt1 == null) {canvas.drawText(txt, startX, getBaseLine(txtPaint, top, top + seatHeight), txtPaint);} else {canvas.drawText(txt, startX, getBaseLine(txtPaint, top, top + center), txtPaint);canvas.drawText(txt1, startX, getBaseLine(txtPaint, top + center, top + center + seatHeight / 2), txtPaint);}if (DBG) {Log.d("drawTest", "top" + top);}}

這里是使用TextPaint畫筆進(jìn)行文字的繪制，在繪制文字的時候要注意基準(zhǔn)線；

/*** 獲取基準(zhǔn)線* @param p* @param top* @param bottom* @return*/private float getBaseLine(Paint p, float top, float bottom) {Paint.FontMetrics fontMetrics = p.getFontMetrics();int baseLine = (int) ((bottom + top - fontMetrics.bottom - fontMetrics.top) / 2);return baseLine;}

這樣大致的繪制做完成了，剩下的第二步和第三步都涉及到手勢觸摸，在onTouchEvent方法中去實(shí)現(xiàn)具體的邏輯；

@Overridepublic boolean onTouchEvent(MotionEvent event) {int x = (int) event.getX();int y = (int) event.getY();//手勢縮放scaleGuestureDetector.onTouchEvent(event);//手勢gestureDetector.onTouchEvent(event);//獲取當(dāng)前操作的手指數(shù)量int pointerCount = event.getPointerCount();if (pointerCount > 1) {//多手指操作pointer = true;}switch (event.getAction()) {case MotionEvent.ACTION_DOWN:pointer = false;downX = x;downY = y;invalidate();break;case MotionEvent.ACTION_UP:autoScale();break;case MotionEvent.ACTION_MOVE:if (!isScaling && !isOnClick) {int downDX = Math.abs(x - downX);int downDY = Math.abs(y - downY);if ((downDX > 10 || downDY > 10) && !pointer) {int dx = x - lastX;int dy = y - lastY;matrix.postTranslate(dx, dy);invalidate();}}lastX = x;lastY = y;isOnClick = false;break;}return true;}

剛觸摸去選擇的時候會有個手勢縮放的效果，手勢縮放系統(tǒng)提供了ScaleGestureDetector類可以很容易的實(shí)現(xiàn)，具體的邏輯系統(tǒng)都已經(jīng)處理好了，在對應(yīng)的回調(diào)方法里面去實(shí)現(xiàn)就可以了；

/*** 手勢縮放*/ScaleGestureDetector scaleGuestureDetector = new ScaleGestureDetector(getContext(), new ScaleGestureDetector.OnScaleGestureListener() {@Overridepublic boolean onScale(ScaleGestureDetector detector) {//正在縮放的時候回調(diào)isScaling = true;float scaleFactor = detector.getScaleFactor();if (getMatrixScaleY() * scaleFactor > 3) {scaleFactor = 3 / getMatrixScaleY();}if (firstScale) {scaleX = detector.getCurrentSpanX();scaleY = detector.getCurrentSpanY();firstScale = false;}if (getMatrixScaleY() * scaleFactor < 0.5) {scaleFactor = 0.5f * getMatrixScaleY();}matrix.postScale(scaleFactor, scaleFactor, scaleX, scaleY);invalidate();return true;}@Overridepublic boolean onScaleBegin(ScaleGestureDetector detector) {//開始縮放的時候回調(diào)return false;}@Overridepublic void onScaleEnd(ScaleGestureDetector detector) {//縮放完成回調(diào)isScaling = false;firstScale = true;}});

其他的手勢操作系統(tǒng)還提供了GestureDetector類，可以使用GestureDetector來實(shí)現(xiàn)具體的效果；

GestureDetector gestureDetector = new GestureDetector(getContext(), new GestureDetector.SimpleOnGestureListener() {@Overridepublic boolean onSingleTapConfirmed(MotionEvent e) {int x = (int) e.getX();int y = (int) e.getY();for (int i = 0; i < row; i++) {for (int j = 0; j < column; j++) {int tempX = (int) ((j * seatWidth + j * spacing) * getMatrixScaleX() + getTranslateX());int maxTempX = (int) (tempX + seatWidth * getMatrixScaleX());int tempY = (int) ((seatHeight * i + i * verSpacing) * getMatrixScaleY() + getTranslateY());int maxTempY = (int) (tempY + seatHeight * getMatrixScaleY());if (x >= tempX && x <= maxTempX && y >= tempY && y <= maxTempY) {if (isHave(i, j)) {remove(i, j);} else {list.add(new Point(i, j));}}}}float currentScaleY = getMatrixScaleY();if (currentScaleY < 1.7) {scaleX = x;scaleY = y;zoomAnimate(currentScaleY, 1.9f);}invalidate();return true;}});

完成上面三步，效果也就大致實(shí)現(xiàn)了，提供外部設(shè)置的方法供調(diào)用就可以了；

/*** 對外界提供的設(shè)置方法* @param row* @param column*/public void setData(int row, int column) {this.row = row;this.column = column;init();invalidate();}

源碼地址：

https://pan.baidu.com/s/1JH-HQ6_sVE1sqtTtALydOw

總結(jié)

以上是生活随笔為你收集整理的简单实现电影院选座效果的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。