TextView 總是對不齊 Drawable

Android

前言

不曉得你們有沒有遇過這種狀況:

<TextView
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:gravity="center_vertical"
   android:drawableRight="@mipmap/arrow"
   android:text="免費註冊取得更多功能"/>

在 TextView 的屬性設定了 android:gravity="center_vertical"

結果一旁的 Drawable 卻沒有置中對齊,變成這樣:

TextView 總是對不齊 Drawable

無法垂直置中

TextView 總是對不齊 Drawable

這是因爲字型設計時,文字會有筆畫延伸高度:

上延筆畫(ascender)

下延筆畫(descender)

而 Android 會針對這兩個高度去畫額外的留白空間,

此時就會導致視覺上文字無法跟圖片垂直置中。

設計師看到就會訐譙你這跟他畫的 mockup 不一樣。

解決方法

<TextView
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:gravity="center_vertical"
   android:drawableRight="@mipmap/arrow"

   android:includeFontPadding="false"

   android:text="免費註冊取得更多功能"/>

設定 android:includeFontPadding="false" 這項屬性,
先來看看 Android 官方文件如何說明這項設定:

Leave enough room for ascenders and descenders instead of using the font ascent and descent strictly. (Normally true).

預設為 true,此時會連同額外的留白空間一起畫,

也就是說,當屬性設定為 false 時,

應可預期那些額外的留白會消失,

讓 TextView 的 Drawable 可以垂直置中對齊 。

垂直置中

設定屬性後可以垂直置中

參考資料

字型搭配攻略:造型篇
日常生活中總能看見跨語言字型的搭配,例如車站內的指示牌、百貨公司的顧客需知、產品包裝等。把字放在一塊不是難事,但如何搭配,呈現終極目標──和諧,融合度(consistency)與協調性(harmony)兼備,絕對是一門得好好思考的學問。而了...
字型設計自己來-英文字型設計的第一課(1) , justfont blog
在開始字型製作之前,為了之後的說明方便,在一開始先介紹一些字型設計時常常會碰到的名詞,以及一些預備觀念。首先,讓我們從拉丁文字談起。

留言列表

Copied title and URL