iT邦幫忙

2024 iThome 鐵人賽

DAY 2
0
Mobile Development

我的 Android 工具箱系列 第 2

Day 2 - [UI] 02-通過UI設計師嚴格的檢查-文字Baseline

  • 分享至 

  • xImage
  •  

情境

有時候看著設計稿拉完 TextView,View 對齊了但字好像沒有真的對齊。這是因為中文字和英數字 Baseline 不一樣高。在使用 ConstrainLayout 拉 TextView 的時候不妨多注意看看。

Demo 程式:GitHub: https://github.com/dreambo4/LayoutInspectorDemo

Baseline說明

Baseline 是文字的基線,可以參考維基百科的說明:
https://zh.wikipedia.org/zh-tw/%E5%9F%BA%E7%B7%9A

標明Baseline的紅色線即為基線(圖片來源:由 Max Naylor - 自己的作品, 公有領域, 連結)
標明Baseline的紅色線即為基線

有無使用 Baseline 對排版的影響

比較 A、B 兩組 TextView 對齊的方式,右下圖有開啟「顯示版面配置界限」,更能看清楚量兩種排版方式下 View 的位置。
實測兩種排法,上下大概差2~3dp,足以看出文字並無完全對齊。
兩種ContraintLayout比較

  • A: 使用 constraintTop、constraintBottom 對齊。
    雖然使用了上下 constraint,使 tvTopBottom 位於 chineseChar1 中間位置,但中文字與英文字,字體的 baseline 本就不一樣高。所以只是將 View 置中,並不能完全對齊文字。
<TextView
    android:id="@+id/tvTopBottom"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginEnd="20dp"
    android:text="constraint top and bottom"
    android:textSize="20sp"
    app:layout_constraintBottom_toBottomOf="@id/chineseChar1"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toEndOf="@id/chineseChar1"
    app:layout_constraintTop_toTopOf="@id/chineseChar1" />
  • B:使用 constraintBaseline 對齊。
    中文字與英文字,字體的baseline 不一樣高,所以應該要讓前後兩個 TextView 的 Baseline 對齊,才不會看起來一邊高一邊低。
<TextView
    android:id="@+id/tvBaseline"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginEnd="20dp"
    android:text="constraint baseline"
    android:textSize="20sp"
    app:layout_constraintBaseline_toBaselineOf="@id/chineseChar2"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toEndOf="@id/chineseChar2" />

參考資料



上一篇
Day 1 - [UI] 01-通過UI設計師嚴格的檢查-排版&點擊範圍
下一篇
Day 3 - [UI] 03-UI設計師不在家-用滴管工具取得色碼
系列文
我的 Android 工具箱30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言