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

16th鐵人賽 android 排版 baseline constraintlayout

團隊看不見未來

2024-08-19 19:23:38

213 瀏覽

分享至

情境

有時候看著設計稿拉完 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 對排版的影響

「顯示版面配置界限」使用方法請參考上一篇：[UI] 01-通過UI設計師嚴格的檢查-排版&點擊範圍

比較 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" />