上篇講述了自定義view初步寫法,回顧一下,自定義view的步驟總共5步:
1.在res/values下創建attrs.xml文件,存放我們的屬性
2.繼承view,并且實現它的構造方法
3.獲取屬性值并且賦值
4.重寫onMeasure和onDraw方法
5.在布局文件中,包名+類名引用
其實自定義view的套路也就這么幾種,多寫寫摸清了套路就不覺得難了,今天我們在上篇的基礎上再進行些修改,先看效果圖
我們在原來的上面加入了文字,沒錯,今天就是來說說怎么畫文字,步驟差不多,就不啰嗦了,先看看attr文件
這里我們定義了三個屬性,文字顏色,文字大小和文本內容,然后我們在構造方法中引用
然后我們需要定義出文字的畫筆,并且設置好屬性,然后在onDraw里面畫出來
現在重點來了,我們該怎么畫文字,文字沒有像畫圓那么簡單,我們先來看一張圖
我們可以看到,文字是處于圓的中心位置,而文字的左邊坐標當前view的一半減去文本的一半,就是我們的x軸坐標,view的一半實際就是半徑,所以,我們就確定了x的坐標,那么y坐標呢?先看張文字規格圖
baseline是我們的文字基準線,就是說文字基本到達的位置,我們的E和H都一樣的,J就長了點出來,那么,Descent就是基線到最低部的距離,Ascent是我們文字頂部到基準線的距離,紅色的就是我們中心線,我們需要把文字放置在中心線的位置上,那么就是Ascent+Descent的距離的一半,因為Ascent是處于基準線上方,是負數,Descent是處于基準線下方,是正數,所以我們需要取相反數,然后我們就可以用view的高的一半加上我們取值,就是我們的y軸坐標,知道規格之后,那就很容易了,看看onDraw怎么寫
代碼還是挺簡單
我們也可以通過繪制一個Rect去包裹文本,然后通過rect提供的獲取寬和高的方法繪制出文本
但是,由于rect的width()方法和height()方法返回的是int類型,所以會導致繪制出來的文本有所偏差,所以最好不用這種方式去繪制,好了,基本繪制文本內容就是這樣了