調整 tab bar 上 tab icon 的位置

問題: tab 沒有文字時,tab icon 的位置偏上

有些時候,我們希望 tab bar 上的 tab 只有圖片,沒有文字。如下圖可愛學生冠禎模仿 instagram 的 App 例子

這個 App 畫面做得很棒,唯一美中不足的,tab 上的 icon 圖片有點偏上,因為原本下面的空間是保留給文字的。


解答:

針對每一個 tab,調整 tab bar item 的 Image Inset。

  1. 點選 tab bar item 元件,切換到 Size Inspector 頁面。

2. Image Inset 可以控制圖片距離上面跟下面的間距。當我們將 Top 設為 6 時,即可讓圖片往下偏移,因為上面多了 6 point 的空間。

不過奇怪的事情發生了,此時圖片竟被狠狠地變形壓扁。這是因為圖片距離下面的間距也要調整,不然它會維持原來跟下面的間距,造成圖片高度變矮。

解法的方法是將 Bottom 設為 Top 間距 * -1,因此我們將它設成 -6。為什麼要這樣呢 ? 因為負數的 Bottom 間距才表示圖片跟下面的間距要變短, 圖片要往下移動,而我們想縮短的距離,正好是 Top 設定的數字。

成果

完美置中的 tab icon 圖片 !