UI

活用 UIStackView:讓 APP 畫面佈局更方便快捷

活用 UIStackView:讓 APP 畫面佈局更方便快捷
活用 UIStackView:讓 APP 畫面佈局更方便快捷
In: UI
本篇原文(標題:Swift — 說說 堆疊視圖( UIStackView ))刊登於作者 Medium,由 Jeremy Xue 所著並授權轉載。

前言

這次來談一個較無關程式碼的題目,是一個叫做 StackView 的元件,它可以提供行或列佈局的視圖,我們可以透過它輕易的定義好在 StackView 中元件的佈局,不需對於所有元件進行 AutoLayout 的約束設置,StackView 會處理大部分的工作。

uistackview

因為常常會有人對這個元件有疑惑,常在使用它後卻出現一堆約束有問題的紅線,又或是設置完後顯示結果畫面不如預期的想像,碰巧最近剛好設計APP 畫面時有使用到 StackView 來佈局,加上近期有人有發問,所以就使用它來作為我文章的主題。

StackView 概覽

透過 StackView,你可以利用 AutoLayout 的強大功能,創建的用戶畫面,可以動態適應設備方向、螢幕尺寸和可用空間中的任何變化。StackView 管理其 arrangeSubviews 屬性中所有視圖的佈局。這些視圖基於它們在 arrangeSubviews 陣列中的順序,沿著 StackView 的 axis 排列。精確的佈局依賴於 StackView 的 axis、distribution、alignment、spacing 以及其他屬性。

你負責定義 StackView 的位置和尺寸(可選),然後 StackView 就會管理其內容的佈局和尺寸。

注意:放到 StackView ≠ 完成 AutoLayout

所以不是放到 StackView 就完成佈局了,你還必須設定 StackView 的位置和尺寸(可選)才算是完成。StackView 只有為其 arrangeSubviews 做佈局。

設置佈局

我們可以透過設置以下值來調整 StackView 中子視圖的佈局:

Axis

這是配置視圖的軸線,簡單說就是 StackView 整體的排列方式(行或列)。

  • Axis Vertical 手機畫面:
  • Axis-Vertical

  • Axis Horizontal 手機畫面:

Axis-Horizontal

Alignment

這是排列的子視圖對齊垂直於 StackView 的軸。這邊我們使用 (=) 符號來做一條分隔線,我們必須讓下方的 Label 寬度大於上方的 Label 才好看得出差異。

  • 在 Axis 為 Vertical 下,各個狀態下的對齊方式:
  • 在 Axis 為 Horizontal 下,各個狀態下的對齊方式:

Distribution

這個屬性算是比較難以理解的屬性,所以我下面一樣用特殊的圖形來表示,希望大家能理解。

  • Fill

如同前面的 Fill 類似,一樣是把自身的範圍給佔滿。

  • Fill Equally:

StackView 會平均分配各個子視圖的配置,例如下面的 StackView 垂直排列時,高度則會為其子視圖最高的高度。反之,水平排列則取其子視圖最寬的寬度。

  • Fill Proportionally

你可能會覺得此屬性與 Fill 屬性沒有差異,但兩者的差異在於 Fill 會根據自身的尺寸來決定在 StackView 中的尺寸,而 Fill Proportionally 則是會根據 StackView 的寬或高按比例分配給其中的子視圖。

  • Equal Spacing

此屬性簡單來說就會根據 StackView 剩餘可用空間的尺寸,來分配 StackView 子視圖間的間隔。

  • Equal Centering

此屬性與上面的 Equal Spacing 意思類似,只是它是以其子視圖中心點的中心與中心距離是相同來做為配置。

若說明得還不夠清楚可以看看這篇文章,了解當中的差異。

Spacing

這個屬性就不用多加以贅述了,就是可以自定義 StackView 的間隔大小,但是這邊要注意,如果你沒有限制 StackView 的尺寸,那麼就會加長或加寬 StackView。但是如果你有限制 StackView 的尺寸,那麼就會在限制尺寸下增加間隔(可能會造成跑版或失敗)。

後記

希望透過這篇文章大家能夠理解 StackView,並且能活用這個功能強大的元件,讓大家在處理 AutoLayout 或是佈局上能夠更快速更方便。

本篇原文(標題:Swift — 說說 堆疊視圖( UIStack View ))刊登於作者 Medium,由 Jeremy Xue 所著並授權轉載。
作者簡介:Jeremy Xue,我是 Jeremy,在「好想工作室」自學 iOS 開發將近一年的時間,目前在工作室繼續精進 iOS 開發能力以及接案增強實戰能力,在工作室也樂於教導新學員和分享個人學習經歷。目前也有在網路上 iOS 社群上分享 Swift 和 iOS 開發方面的文章,並且放到 Medium 上做成教學文章。
作者
AppCoda 編輯團隊
此文章為客座或轉載文章,由作者授權刊登,AppCoda編輯團隊編輯。有關文章詳情,請參考文首或文末的簡介。
評論
更多來自 AppCoda 中文版
利用 EarlGrey 做 UI Test 強化你的 UI 測試流程
UI

利用 EarlGrey 做 UI Test 強化你的 UI 測試流程

在軟體的開發過程中,我們一定會需要測試我們做出來的東西是不是運作正常。以手機開發為例,我們通常都是咻咻咻地寫好一堆程式之後,把它丟到手機或模擬器上面執行,然後東點一點西點一點,看看是不是一切都運作正常。這樣的流程雖然運作正常,但是卻非常花時間,而且很容易漏掉該測試的項目。如果要簡化這個流程,你就會需要電腦來幫你做自動化測試 (Test Automation)。 自動化測試有分很多類型,目前大家最常使用的分類法是用 Mike Cohn 所提出來的測試金字塔 (Test
很好! 你已成功註冊。
歡迎回來! 你已成功登入。
你已成功訂閱 AppCoda 中文版 電子報。
你的連結已失效。
成功! 請檢查你的電子郵件以獲取用於登入的連結。
好! 你的付費資料已更新。
你的付費方式並未更新。