2. 程式人生 > >android 自定義view之選座功能

android 自定義view之選座功能

阿新 • • 發佈：2019-01-01

效果圖：
這裡寫圖片描述

介面比較粗糙，主要看原理。

這個介面主要包括以下幾部分
1、座位
2、左邊的排數
3、左上方的縮圖
4、縮圖中的紅色區域
5、手指移動時跟隨移動
6、兩個手指縮放時跟隨縮放

主要技術點
1、矩陣Matrix
2、GestureDetector與ScaleGestureDetector
3、Bitmap的一下基本用法
4、這裡只需要重寫view的onDraw就可實現全部功能

可以發現這個其實沒什麼難度，主要就是一些位置的計算。

為了能便於理解首先把要用到的知識點進行一下梳理

1、矩陣Matrix

Matrix由3*3矩陣中9個值來決定，我們對Matrix的所有設定， 就是對這9個值的操作。
{MSCALE_X,MSKEW_X,MTRANS_X,
MSKEW_Y,MSCALE_Y,MTRANS_Y,
MPERSP_0,MPERSP_1,MPERSP_2}

這是矩陣的9個值，看名字也知道他們是什麼意思了。

這裡主要用到縮放和平移，下面以縮放為例來了解一下縮放的控制
通過android提供的api我們可以呼叫setScale、preScale、postScale來改變MSCALE_X和MSCALE_Y的值達到縮放的效果

所以只要理解setScale、preScale、postScale這三個方法的區別我們就可以簡單的進行縮放控制了

1、setScale(sx,sy)，首先會將該Matrix設定為對角矩陣，即相當於呼叫reset()方法，然後在設定該Matrix的MSCALE_X和MSCALE_Y直接設定為sx,sy的值
2、preScale(sx,sy)，不會重置Matrix，而是直接與Matrix之前的MSCALE_X和MSCALE_Y值結合起來（相乘），M’ = M * S(sx, sy)。
3、postScale(sx,sy)，不會重置Matrix，而是直接與Matrix之前的MSCALE_X和MSCALE_Y值結合起來（相乘），M’ = S(sx, sy) * M。

這麼說其實也有些不好理解，舉個栗子一看就明白

1、pre….的執行順序

        Matrix matrix=new Matrix();
        float[] points=new float[]{10.0f,10.0f};
        matrix.preScale(2.0f, 3.0f);
        matrix.preTranslate(8.0f,7.0f);
        matrix.mapPoints(points);
        Log.i("test", points[0]+"");
        Log.i("test", points[1]+""
 
);

結果為點座標為(36.0，51.0)
可以得出結論，進行變換的順序是先執行preTranslate(8.0f,7.0f)，在執行的preScale(2.0f,3.0f)。即對於一個Matrix的設定中，所有pre….是倒著向後執行的。

2、post…的執行順序

        Matrix matrix=new Matrix();
        float[] points=new float[]{10.0f,10.0f};
        matrix.postScale(2.0f, 3.0f);
        matrix.postTranslate(8.0f,7.0f);
        matrix.mapPoints(points);
        Log.i("test", points[0]+"");
        Log.i("test", points[1]+"");

結果為點座標為(28.0，37.0)
可以得出結論，進行變換的順序是先執行postScale(2.0f,3.0f)，在執行的postTranslate(8.0f,7.0f)。即對於一個Matrix的設定中，所有post….是順著向前執行的。

這裡主要知道set…和post…方法就行，因為只用到了這兩個。
自我理解其實和scrollTo、scrollBy類似。

2、GestureDetector與ScaleGestureDetector

GestureDetector主要用於識別一些特定手勢，只要呼叫GestureDetector.onTouchEvent()把MotionEvent傳遞進去就可以了
ScaleGestureDetector用於處理縮放的攻擊類用法和GestureDetector類似

3、Bitmap的一下基本用法
參考： 關於bitmap你不知道的一些事

瞭解一下bitmap的注意事項即可

下面開始正式畫這個選座的功能了

1、畫座位：

@Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        /**
         * 如果第一次進入 使座點陣圖居中
         */
        if (mViewH != 0 && mViewW != 0&&isFrist) {
            isFrist = false;
            matrix.setTranslate(-(mViewW-getMeasuredWidth())/2, 0);
        }
        /**
         * 畫座位
         */
        drawSeat(canvas);
        /**
         * 畫排數
         */
        drawText(canvas);
        /**
         * 畫縮圖
         */
        drawOverView(canvas);
        /**
         * 畫縮圖選擇區域
         */
        drawOvewRect(canvas);

    }
private void drawSeat(Canvas canvas) {
        float zoom = getMatrixScaleX();
        scale1 = zoom;
        tranlateX = getTranslateX();
        tranlateY = getTranslateY();
        /**
         * 使用兩層for迴圈來畫出所有座位
         */
        for (int i = 0; i < row; i++) {
            float top = i * SeatHight * scale * scale1 + i * mSpaceY * scale1
                    + tranlateY;
            for (int j = 0; j < column; j++) {

                float left = j * SeatWidth * scale * scale1 + j * mSpaceX
                        * scale1 + tranlateX;

                tempMatrix.setTranslate(left, top);
                tempMatrix.postScale(scale, scale, left, top);
                tempMatrix.postScale(scale1, scale1, left, top);


                /**
                 * 獲取每個位置的資訊
                 */
                int state = getSeatType(i, j);
                /**
                 * 根據位置資訊畫不同的位置圖片
                 */
                switch (state) {
                case SEAT_TYPE_SOLD:
                    canvas.drawBitmap(SeatLock, tempMatrix, null);
                    break;
                case SEAT_TYPE_SELECTED:
                    canvas.drawBitmap(SeatChecked, tempMatrix, null);
                    break;
                case SEAT_TYPE_AVAILABLE:
                    canvas.drawBitmap(SeatNormal, tempMatrix, null);
                    break;
                case SEAT_TYPE_NOT_AVAILABLE:
                    break;

                }
            }
        }

    }

這裡其實沒什麼難度，主要就是使用兩層for迴圈，一層畫行，一層畫列

另外要注意的就是當前位置的計算 top = （當前位置i）（座點陣圖標大小SeatHight 它本身的縮放比scale*縮放時的縮放比scale1）+（當前位置i* 垂直方向的間距mSpaceY*縮放時的縮放比scale1）+垂直方向移動是的移動距離

2、畫排數

private void drawText(Canvas canvas) {
        mTextPaint.setColor(bacColor);
        RectF rectF = new RectF();
        rectF.top = getTranslateY() - mNumberHeight/2;
        rectF.bottom = getTranslateY()+ mViewH* getMatrixScaleX() + mNumberHeight/2;
        rectF.left = 0;
        rectF.right = mTextWidth;


        canvas.drawRoundRect(rectF, mTextWidth/2, mTextWidth/2, mTextPaint);
        mTextPaint.setColor(Color.WHITE);
         for (int i = 0; i < row; i++) {
             float top = (i *SeatHight*scale + i * mSpaceY) * getMatrixScaleX() + getTranslateY();
             float bottom = (i * SeatHight*scale + i * mSpaceY + SeatHight) * getMatrixScaleX() + getTranslateY();
             float baseline = (bottom + top  - lineNumberPaintFontMetrics.bottom - lineNumberPaintFontMetrics.top ) / 2-6;
             canvas.drawText(lineNumbers.get(i), mTextWidth / 2, baseline, mTextPaint);
          }     
    }

3、畫縮圖

private void drawOverView(Canvas canvas) {
        /**
         * 1、先畫張背景圖片
         */
        mBitMapOverView = Bitmap.createBitmap((int)mOverViewWidth,(int)mOverViewHight,Bitmap.Config.ARGB_8888);
        Canvas OverViewCanvas = new Canvas(mBitMapOverView);
        Paint paint = new Paint();
        paint.setColor(bacColor);
        scaleoverX = mOverViewWidth / mViewW;
        scaleoverY = mOverViewHight / mViewH;
        float tempX = mViewW * scaleoverX;
        float tempY = mViewH * scaleoverY;
        OverViewCanvas.drawRect(0, 0, (float)tempX, (float)tempY, paint);

        Matrix tempoverMatrix = new Matrix();
        /**
         * 2、和畫座點陣圖一樣在縮圖中畫座位
         */
        for (int i = 0; i < row; i++) {
            float top =  i * SeatHight * scale * scaleoverY+ i * mSpaceY * scaleoverY;
            for (int j = 0; j < column; j++) {
                float left = j * SeatWidth * scale * scaleoverX + j * mSpaceX * scaleoverX+mTextWidth*scaleoverX;
                tempoverMatrix.setTranslate(left, top);
                tempoverMatrix.postScale(scale*scaleoverX, scale*scaleoverY, left, top);

                int state = getSeatType(i, j);
                switch (state) {
                case SEAT_TYPE_SOLD:
                    OverViewCanvas.drawBitmap(SeatLock, tempoverMatrix, null);
                    break;
                case SEAT_TYPE_SELECTED:
                    OverViewCanvas.drawBitmap(SeatChecked, tempoverMatrix, null);
                    break;
                case SEAT_TYPE_AVAILABLE:
                    OverViewCanvas.drawBitmap(SeatNormal, tempoverMatrix, null);
                    break;
                case SEAT_TYPE_NOT_AVAILABLE:
                    break;

                }


            }
        }

        canvas.drawBitmap(mBitMapOverView,0,0,null);

    }

4、縮圖中的紅色區域

private void drawOvewRect(Canvas canvas) {

        OverRectPaint = new Paint();
        OverRectPaint.setColor(Color.RED);
        OverRectPaint.setStyle(Paint.Style.STROKE);
        OverRectPaint.setStrokeWidth(overRectLineWidth);
        int tempViewW ;
        int tempViewH;
        if(getMeasuredWidth()<mViewW){
            tempViewW = getMeasuredWidth();
        }else{
            tempViewW = mViewW;
        }
        if(getMeasuredHeight()<mViewH){
            tempViewH = getMeasuredHeight();
        }else{
            tempViewH = mViewH;
        }

        try{
            Rect rect ;
            if(getMatrixScaleX()>= 1.0f){
                 rect = new Rect((int)(scaleoverX*Math.abs(getTranslateX())/getMatrixScaleX()), 
                                     (int)(scaleoverY*Math.abs(getTranslateY())/getMatrixScaleX()),
                                     (int)(scaleoverX*Math.abs(getTranslateX())/getMatrixScaleX()+tempViewW*scaleoverX/getMatrixScaleX()),
                                     (int)(scaleoverY*Math.abs(getTranslateY())/getMatrixScaleX()+tempViewH*scaleoverY/getMatrixScaleX()));
            }else{
                 rect = new Rect((int)(scaleoverX*Math.abs(getTranslateX())), 
                         (int)(scaleoverY*Math.abs(getTranslateY())),
                         (int)(scaleoverX*Math.abs(getTranslateX())+tempViewW*scaleoverX),
                         (int)(scaleoverY*Math.abs(getTranslateY())+tempViewH*scaleoverY));
            }
        canvas.drawRect(rect, OverRectPaint);
        }catch(Exception e){
            e.printStackTrace();
        }   
    }

5、手指移動時跟隨移動

@Override
    public boolean onTouchEvent(MotionEvent event) {

        /**
         * 縮放事件交由ScaleGestureDetector處理
         */
        scaleGestureDetector.onTouchEvent(event);
        /**
         * 移動和點選事件交由GestureDetector處理
         */
        gestureDetector.onTouchEvent(event);

        return true;
    }
/**
                 * 移動事件 這裡只是簡單判斷了一下，需要更細緻的進行條件判斷
                 */
                public boolean onScroll(MotionEvent e1, MotionEvent e2,
                        float distanceX, float distanceY) {
                    float tempMViewW = column * SeatWidth*scale*scale1+(column -1)*mSpaceX*scale1+mTextWidth-getWidth();
                    float tempmViewH = row * SeatHight * scale * scale1 + (row -1) * mSpaceY * scale1 - getHeight();


                    if((getTranslateX()>mTextWidth+mSpaceX)&& distanceX<0){
                        distanceX = 0.0f;
                    }
                    if((Math.abs(getTranslateX())>tempMViewW)&&(distanceX>0)){
                        distanceX = 0.0f;
                    }


                    if((getTranslateY()>0)&&distanceY<0){
                        distanceY=0.0f;
                    }
                    if((Math.abs(getTranslateY())>tempmViewH)&&(distanceY>0)){
                        distanceY = 0.0f;
                    }                   
                    matrix.postTranslate(-distanceX, -distanceY);               
                    invalidate();
                    return false;

                }
                /**
                 * 單擊事件
                 */
                public 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 * scale + j * mSpaceX) * getMatrixScaleX() + getTranslateX());
                            int maxTemX = (int) (tempX + SeatWidth * scale * getMatrixScaleX());

                            int tempY = (int) ((i * SeatHight * scale + i * mSpaceX) * getMatrixScaleY() + getTranslateY());
                            int maxTempY = (int) (tempY + SeatHight * scale * getMatrixScaleY());


                            if (x >= tempX && x <= maxTemX && y >= tempY
                                    && y <= maxTempY) {
                                int id = getID(i, j);
                                int index = isHave(id);
                                if (index >= 0) {
                                    remove(index);
                                } else {
                                    addChooseSeat(i, j);


                                }
                                float currentScaleY = getMatrixScaleY();
                                if (currentScaleY < 1.7f) {
                                    scaleX = x;
                                    scaleY = y;
                                    /**
                                     * 選中時進行縮放操作
                                     */
                                    zoomAnimate(currentScaleY, 1.9f);
                                }
                                invalidate();
                                break;

                            }
                        }
                    }

                    return super.onSingleTapConfirmed(e);
                }
            });

6、兩個手指縮放時跟隨縮放

public boolean onScale(ScaleGestureDetector detector) {
                    float scaleFactor = detector.getScaleFactor();
                    //scaleX = detector.getCurrentSpanX();
                    //scaleY = detector.getCurrentSpanY();
                    //直接判斷大於2會導致獲取的matrix縮放比例繼續執行一次從而導致變成2.000001之類的數從而使
                    //判斷條件一直為真從而不會執行縮小動作
                    //判斷相乘大於2 可以是當前獲得的縮放比例即使是1.9999之類的數如果繼續放大即使乘以1.0001也會比2大從而
                    //避免上述問題。

                     if (getMatrixScaleY() * scaleFactor > 2) {
                            scaleFactor = 2 / getMatrixScaleY();
                      }
                      if (getMatrixScaleY() * scaleFactor < 0.8) {
                            scaleFactor = 0.8f / getMatrixScaleY();
                      }
                    matrix.postScale(scaleFactor, scaleFactor);


                    invalidate();

                    return true;
                }

至此這個比較粗糙的選座功能就實現了，有時間會繼續優化下細節問題。

下面兩個demo都比較給力我就不上傳demo了

主要參考：
Android例子原始碼高仿QQ電影票選座功能例子

andriod 打造炫酷的電影票線上選座控制元件，1比1還原淘寶電影線上選座功能

相關推薦

android 自定義view之選座功能

效果圖： 介面比較粗糙，主要看原理。 這個介面主要包括以下幾部分 1、座位 2、左邊的排數 3、左上方的縮圖 4、縮圖中的紅色區域 5、手指移動時跟隨移動 6、兩個手指縮放時跟隨縮放 主要技術點 1、矩陣Matrix 2、GestureDetector與S

android自定義View之自定義EditText（新增刪除功能）

           忙忙碌碌20天，新的專案終於接近尾聲了。今天公司召集幾個使用者體驗師和美工一起吐糟這20天做的這個新產品，對於產品提出了很多建議，這幾天就改介面了。在這個專案中大量的使用了EditText元件，並且添加了刪除功能。這裡面都是用RelativeLayou

Android自定義View之點選效果

最近在做新版本，各種UI效果都需要自定義，而自定義View點選效果問題一直困擾著我。各種找資料也沒有找到自己想要的東西，可能是我關鍵字打的不對吧。最後在檢視TextView的原始碼時解決了我的問題，由於原始碼功能太多，不易查詢，特此提取記錄。 UI效果

Android自定義View之分貝儀

一、說明        最近在整理自定義View方面的知識，偶爾看到meizu工具箱的分貝儀效果，感覺它的實效效果還挺好的，遂想自己模擬實現練練手，廢話不多說，直接開擼。 二、效果圖 首先看一下效果圖： 看效果還挺炫酷

Android自定義View之Canvas

https://www.jianshu.com/p/fb18c28d6627 用繼承View的方式來自定義View，我們就需要重寫onDraw方法，也就是得咱自己來畫圖了。畫圖就得用到畫筆和畫布，也就是Paint和Canvas。我們來了解下Canvas。 Canvas Canvas我們可

Android 自定義View之Canvas詳解

自定義View的相關文章： Android 實現一個簡單的自定義View Android 自定義View步驟 Android Paint詳解 Android 自定義View之Canvas相關方法說明 Android 自定義View例項之 “京東跑”

Android : 自定義View之流式佈局

寫了一個很簡單的佈局 這是周圍圓框的drawable <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android">

android自定義View之仿通訊錄側邊欄滑動，實現A-Z字母檢索

我們的手機通訊錄一般都有這樣的效果，如下圖： OK，這種效果大家都見得多了，基本上所有的android手機通訊錄都有這樣的效果。那我們今天就來看看這個效果該怎麼實現。 一.概述 1.頁面功能分析 整體上來說，左邊是一個ListView，右邊是一個自定義View，但

Android自定義View之getTextBounds()

在Android自定義View的過程中一定會用到Paint，而paint屬性中有一個方法getTextBounds(String text,int start,int end,Rext bounds),它的中文解釋是：返回一個包含中文的矩形邊界，位置為(start,end) 英文解釋：Retur

Android自定義View之自定義屬性

在Android開發中經常會用到自定義View的情況，而在自定義View時，自定義屬性是必須用到的。 1、新建一個自定義View如CustomView 它的自定義屬性主要是通過declare-styleable標籤為其配置自定義屬性。具體做法是：在res/values/目錄下增加一個reso

Android -- 自定義view之StepView

先看看實現的效果： 2，首先我們來看看我們常規的自定義view的基礎步驟吧         1，繼承View，重寫構造方法 2，自定義屬性 3，重寫onMeasure（）測量控制元件高度 4，重寫onDra

Android 自定義View 之 可隨意拖動的View

因為趕專案本人停更兩個月 從今天開始又可以更新了 今天說一下這個可隨意拖動的view 簡單說一下這個view效果 和 發展 一開始這種效果是使用在網頁端的特別是購物類 例如某寶 某東 購物車和客服視窗 都有使用這個懸浮可拖動的設計效果 後來才發展到的移動端 還有

Android 自定義View之咖啡動畫

文章目錄效果畫杯子畫杯墊畫煙霧 效果 大概思路 自定義view，直接繼承view 複寫onSizeChanged()方法，在此計算杯墊，杯子，煙霧效果的path 在onDraw()方法中，描繪杯墊，杯子 處理煙霧動畫效果 畫杯子 這裡需要畫兩部分內容，第

Android 自定義View之下雨動畫

文章目錄效果思路畫雲畫雨滴優化 效果 開始前先做個熱身( ˘•灬•˘ ) 自己實現比較容易，但是到了要出部落格整理思路，總結要點的時候就撓頭，不知雲所以，所以最簡單的還是 如果對安卓UI有興趣的朋友可以加我好友互相探討， 思路 思路比較簡單，整個view無

android自定義view之畫圓隨著手指移動

public class MyView extends View { private Paint mFanPaint,mTextPaint;//扇形畫筆和文字畫筆 public float AxisX=100; public float AxisY=100; public MyView(

Android自定義view之實現帶checkbox的Snackbar

前言 最近專案要求實現一個類似於snackbar功能，但是又不完全是snackbar的外掛，本來想在Google提供的snackbar裡面進行更改，但是這樣太麻煩了，於是自己動手實現了一個snackbar。先看下效果圖： 1.要解決的問題 1.彈框裡面除了文字提示之外還有一個按鈕，這個按

android自定義View之3D索引效果

效果圖： 我的小霸王太卡了。 最近工作比較忙，今天搞了一下午才搞出來這個效果，這種效果有很多種實現方式，最常見的應該是用貝塞爾曲線實現的。今天我們來看另一種不同的實現方式，只需要用到 canvas.scale()，有沒有很好奇是怎麼實現的呢。 首先來說一下思路，只要有了思

android 自定義view之側滑效果

效果圖： 看網上的都是兩個view拼接，預設右側的不顯示，水平移動的時候把右側的view顯示出來。但是看最新版QQ上的效果不是這樣的，但給人的感覺卻很好，所以獻醜來一發比較高仿的。 知識點： 1、ViewDragHelper 的用法； 2、滑動衝突的解決； 3、自定

Android自定義View之實現簡單炫酷的球體進度球

前言 最近一直在研究自定義view，正好專案中有一個根據下載進度來實現球體進度的需求，所以自己寫了個進度球，程式碼非常簡單。先看下效果： 效果還是非常不錯的。 準備知識 要實現上面的效果我們只要掌握兩個知識點就好了，一個是Handler機制，用於發訊息重新整理我們的進度球，一個是clip

從零開始學Android自定義View之動畫系列——屬性動畫（3）

屬性動畫對補間動畫進行了很大幅度的改進，之前補間動畫可以做到的屬性動畫也能做到，補間動畫做不到的現在屬性動畫也可以做到了。因此，今天我們就來學習一下屬性動畫的高階用法，看看如何實現一些補間動畫所無法實現的功能。 ValueAnimator的高階用法 補間