Android自定義view練習實例之（一） 泡泡彈窗

轉載請注明出處：http://blog.csdn.net/wingichoy/article/details/50455412

本系列是為新手準備的自定義view練習項目（大牛請無視），相信在學習過程中，想學自定義view又無從下手，不知道做什么。本系列為新手提供了一系列自定義view的簡單實例。看過理解之后，自己實現，相信會有很大提高。

公司需要做地圖，無奈美工沒有給那種泡泡窗口，于是只能自定義view自己畫一個。

由于實現比較簡單，便想寫下來，給新手做一個自定義view的參考，新人學自定義view的時候也可以先拿這個練手。

首先看效果圖，就是一般的泡泡窗啦。

那么現在就開始了，分析一下，其實就是一個圓角矩形 加上一個三角。畫出來就是了。

首先先創建一個類，繼承自View  ，重寫他的構造方法，這里為了簡便就不加自定義屬性了。

public PopupView(Context context) {
        this(context,null);
    }

    public PopupView(Context context, AttributeSet attrs) {
        this(context, attrs,0);
    }

    public PopupView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

    }

然后是測量他的大小，為了方便，這里只給出EXACTLY的測量值，AT_MOST的時候大家可以自己給一個初始值，這里就不加了

里面有個mRect，其實就是圓角矩形啦。圓角矩形要比整體的view小一點，這里我直接乘上一個百分比來體現，我給的值是mRectPercent = 0.8；（這個處理方式是十分不好的，是一種錯誤的方式，這里我不想更正了，因為只有錯誤才能提高。你可以查看下一篇博客，計算了padding，讓矩形處于最中間）。

@Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int widthSize = MeasureSpec.getSize(widthMeasureSpec);
        int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        int heightSize = MeasureSpec.getSize(heightMeasureSpec);
        int heightMode = MeasureSpec.getMode(heightMeasureSpec);
        if(widthMode== MeasureSpec.EXACTLY){
            mWidth = widthSize; //獲取到當前view的寬度
            mRectWidth = (int) (mWidth * mRectPercent);//計算矩形的大小 這里是直接給的初值為0.8 也就是說矩形是view大小的0.8倍 下同
        }
        if(heightMode == MeasureSpec.EXACTLY){
            mHeight = heightSize;//獲取當前view的高度

            mRectHeight = (int) (mHeight * mRectPercent+0.1);
        }

        setMeasuredDimension(mWidth,mHeight);
    }

測量完成以后接下來就是繪制了，繪制起來也比較簡單，關鍵是計算出關鍵點的坐標。這里來一張圖表示一下

只需要把三角的三個點的坐標計算出來就可以了。至于后面加減的數字，其實就是三角形的高和底邊長 也很簡單，聰明的你一定一看就懂。

那么就把這些坐標畫成圖形。

@Override
    protected void onDraw(Canvas canvas) {
        Paint p = new Paint();
        p.setColor(Color.parseColor("#2C97DE"));
        p.setStyle(Paint.Style.FILL);

        canvas.drawRoundRect(new RectF(0,0,mRectWidth,mRectHeight),10,10,p);

        Path path = new Path();
        path.moveTo(mRectWidth/2-30,mRectHeight);
        path.lineTo(mRectWidth/2,mRectHeight+20);
        path.lineTo(mRectWidth/2+30,mRectHeight);
        path.close();
        canvas.drawPath(path,p);

        super.onDraw(canvas);
    }

其中圓角矩形是用drawRoundRect方法來繪制的，里面是一個基本的矩形，和圓角的半徑

三角形是用path來繪制，首先用moveTo設定起點坐標，最后將兩條線連接起來，別忘了close成一個封閉的圖形。

這樣就大功告成泡泡窗，不用麻煩美工啦！

如果你覺得這個自定義view比較簡單可以閉著眼睛寫出來，你還可以參考進階一點點的 自定義圓形百分比，進度條 進行練習，總之自定義view并不難，只要多練，就一定會掌握熟練。

來自： http://blog.csdn.net/wingichoy/article/details/50455412