關於自定義view中的文字垂直居中的問題。

2021-08-13 14:04:57 字數 1258 閱讀 7654

很多同學在剛剛接觸到自定義view 的時候就一陣頭大,本人也是菜鳥一枚,近些天辭職沒事情,所以在家裡研究自定義view,在研究圓形進度條的時候發現進度條中間的百分比文字始終沒有在圓所在的正中心,於是就各種搜尋,解決了文字居中的問題。接下來就把我的處理分享給大家。

先來張圖(從別的地方copy過來的

這張圖是我們在

canvas.drawtext
的時候離不開的,也就是說只有了解了這個的內容,才可以對自定義view的文字輕車熟路,畫出自己想要的效果。
圖中的top,ascent,baseline,descent,bottom所在的類是fontmetricsint和fontmetrics,這兩個其實作用是相同的,只不過前者返回的是int型別的資料,而後面返回的是float型別的資料。
在我們畫文字的時候,很多人認為它的x,y的座標是從文字的左上角開始的,其實只說對了一半,y軸的座標是從基線(baseline)開始的,也就是說如果我們從(0,0)點開始畫,
那麼它的座標應該是上圖中紅色線(baseline)最左側開始的,這也就導致了很多人畫的文字不垂直居中的問題所在。
那麼怎麼解決這個問題呢,其實很好解決。大家看我列印的log
e/tag: ascent=-56;top=-64;descent=15;bottom=17
有人問ascent和top怎麼是負數呢?
其實上圖中除了baseline之外,其他的四條線的位置是基於baseline定位的,換句話說如果baseline的y座標是0,那麼ascent=baseline-ascent。
這下大家理解了嗎。
而想要文字垂直居中就可以這樣寫
canvas.drawtext(string,centerx - textwidth/2, centery+((math.abs(metrics.ascent)+metrics.descent)/2-metrics.descent),paint);

以上只是個人在工作中的解決辦法,如果有誤,請各位大神們指正,希望各位大神不吝賜教。
祝願所有的程式猿的**沒有bug。

自定義View中關於文字的學習

如果要實現一串文字居中顯示在螢幕的正中心,只要確定繪製的baseline的座標即可,x座標比較簡單我們略過,看y座標 basey int canvas.getheight 2 math.abs textpaint.ascent math.abs textpaint.descent 2 如果y座標是螢...

自定義view 文字自動換行

protected void ondraw canvas canvas 自動分割文字 param content 需要分割的文字 param p 畫筆,用來根據字型測量文字的寬度 param width 最大的可顯示畫素 一般為控制項的寬度 return 乙個字串陣列,儲存每行的文字 private...

自定義View之繪製文字

在初始化方法裡建立畫筆,設定畫筆顏色,不設定預設黑色 mtextpaint new paint mtextpaint.setcolor color.white 在ondraw方法裡繪製文字 canvas.drawtext text,float x,float y offset,mtextpaint ...