最近也是在學習自定義控制元件,以前只自己隨便玩了下,一直覺得比較難,正好現在工作輕鬆,每天閒著就看看書看看帖子學習自定義控制元件,你還別說自定義控制元件學起來還是蠻有趣的!!

這裡也跟大家分享下我關於drawText()文字居中的方法.

先附上drawText()的方法說明

說實話當時看了這個,我也沒明白這個x,y座標到底表達的啥意思,還一直以為是繪製文字中心的座標,後來發現這個理解是錯誤的

要想理解這個首先看張圖

像圖上這樣安卓的文字繪製是相對於基線繪製的,也就是圖中的紅線,而top+bottom的長度就等於字型高度.即等於|top|+|bottom|絕對值

實際繪製的時候取決於基線上一個點來繪製文字,而這個點有三種分別對應為left,center,right如下圖

而drawText()方法中x,y座標所指的點就是上圖基線上三個點中的一個,具體是哪一個根據paint的setTextAlign()方法設定,預設為left

示例程式碼如下

Rect rect = new Rect(100,100,500,500);//畫一個矩形
        Paint rectPaint = new Paint();
        rectPaint.setColor(Color.BLUE);
        rectPaint.setStyle(Paint.Style.FILL);
        canvas.drawRect(rect, rectPaint);

        Paint textPaint = new Paint();
        textPaint.setColor(Color.WHITE);
        textPaint.setTextSize(50);
        textPaint.setStyle(Paint.Style.FILL);
        //該方法即為設定基線上那個點究竟是left,center,還是right  這裡我設定為center
        textPaint.setTextAlign(Paint.Align.CENTER);

        Paint.FontMetrics fontMetrics = textPaint.getFontMetrics();
        float top = fontMetrics.top;//為基線到字型上邊框的距離,即上圖中的top
        float bottom = fontMetrics.bottom;//為基線到字型下邊框的距離,即上圖中的bottom

        int baseLineY = (int) (rect.centerY() - top/2 - bottom/2);//基線中間點的y軸計算公式

        canvas.drawText("你好世界",rect.centerX(),baseLineY,textPaint);
 

這裡有點要注意textPaint.getFontMetrics()這個方法一定要在設定字型大小或者樣式等等一系列會影響字型的方法後在呼叫,不然獲取到的top和bottom值不準.

正好是在中間的,即證明等式是沒有問題的,再來分析這個等式是如何計算的

之所以drawText()方法中x,y指的是基線中間的那個點,是因為setTextAlign(Paint.Align.Center)

那麼要想在正中間顯示文字,x只要為矩形的中點x座標即可 x = rect.centerX()

要計算的就是基線中間圖上紅色點的y座標了,看圖可以發現紅色點的y為矩形中點黑色點的y座標+圖中黑色點和紅色點之間的距離

矩形y座標為 rect.centerY()

黑色點和紅色點之間的距離為相對於基線的(top+bottom)/2 - bottom

而 top是相對於基線的所以為負數,所以公式為 (-top+bottom)/2 - bottom簡化下為-top/2 - bottom/2

所以最後計算為rect.centerY - top/2 - bottom/2. 

到此相信大家應該明白了吧,有什麼疑問不對的地方歡迎提出.