Alex Liang

使用StackView包裝不同寛高的同類型元件

iOS 9加入了stackview這個新元件幫助工程師更快打造UI,盡量減少使用auto layout

今年的CS193P課程的第一個範例--計算機就改用stackview實作

練習時我不想照它的layout來做,想比照iPhone內建的計算機,將0的按鈕寛度設定其它按鈕的二倍,這個問題請教了老師,花了幾天才試出來

下圖是我想呈現的結果,該如何用stackview刻出來呢?

計算機

Step1. 先把button拉進view controller,並複製其它三個
創建按鈕

Step2. 選取4個button並加入stackview

方法1: 點選最左邊的stack
stackview 1

方法2: 從選單 (Editor-> Embed In-> Stack View)
stackview 2

Step3. 修改stackview裡面元件的間隔
stackview setting

Step4. 重複上述2個步驟,完成剩下的計算機按鈕
4x4按鈕

Step5. 將4個stackview再包成一個stackview,垂直間隔也要修改

Step6. 選取最下面一排的stackview,砍掉最左邊的button
刪除按鈕

Step7. 將最右邊二個button的寛度設成和上一排任一button一樣

Step8. 最後再設定整個stackview的auto layout,這裡是置於右下角
auto layout

constraints

對照之前的教學,使用stackview的確能為工程師省下不少時間,可設計出整齊的介面。