Label屬性Line Breaks & Auto-shrink

Label與Text Field都屬於字元型物件,差別在於Label顯示的是固定的內容;而Text Field的內容可由外部輸入。底下要來探討兩個設計Label時候會用到的屬性。

Line Breaks

當Label內容太長超過顯示範圍時,會由Line Breaks做出對應的處理。其default值是Clip,直接將後面過多的文字刪減不顯示。其他還有Character Wrap, Word Wrap, Truncate Head, Truncate Middle, Truncate Tail等不同效果,底下會依序做說明。

Line Breaks Items

預設的Line Breaks—Clip效果如下。左邊Label可以完全顯示內容,沒有Clip效果;右邊因為範圍不足顯示全部內容,會因為Clip的效果導致後面的文字沒有顯示出來。

No Clip VS Clip

使用Character Wrap/Word Wrap屬性的時候要記得修改Label的Lines屬性。Label的Lines屬性預設為1,表示只能固定顯示單行內容。將這個參數改成0,如下圖所示,這樣Label內容就可以輸入多行內容。

Change Label Lines Attributes

將Label的顯示範圍稍作調整,並將Line Breaks效果改變為“Character Wrap”就可以看出其效果,如下圖。有發現嗎? plant應該是一個完整的單詞,但是卻被拆成pl與ant分段顯示。Character本意就是字元,plant在這個效果裡就變成p-l-a-n-t,顯示完pl之後沒有空間了,剩下的ant就變成下一行的開頭了。

Line Breaks — Character Wrap

另外一個“Word Wrap”的效果就比較不一樣了,如下圖。Word本意是指字詞,與單一字元不同。Label設定的顯示範圍內無法完整顯示的字詞,會被移至下一行作為開頭顯示。下圖例子中,plant已經無法再剩下的空間內完整顯示,所以變成第二行的開頭。

接下來Line Breaks的三種省略顯示的方式:Truncate Head/Middle/Tail一併以圖示說明比較能清楚了解。下圖例子中左邊為Truncate的第一種效果,省略內容前半段,顯示後半段內容;中間第二種效果省略中間內容,顯示前後片段內容;最後一種是省略內容後半段,只顯示前半段內容。

Truncate Head/Middle/Tail

Auto-shrink

Auto-shrink屬性預設內容Fixed Font Size,這是讓輸入內容以固定的樣式呈現在顯示範圍內。Auto-shrink還有另外兩種屬性值,如下圖。

Auto-shrink items

這兩種屬性選擇之後,系統都會幫你設定在一個最適合的倍率或字體大小,再往下調也不會改變。如果手動將屬性值調到臨界值0,該屬性就會變回Fixed Font Size。Minimum Font Scale是透過倍數縮放,以能將Label所有內容完全顯示的最小的倍率縮小,倍率差距每階間隔0.05倍。Minimum Font Size很直覺就是將字體大小縮到能在範圍內顯示全部內容的大小,但這也沒辦法一直縮小。屬性的圖例如下,左邊是Minimum Font Scale,右邊是Minimum Font Size。

Auto-shrink items

--

--