以編程方式使用 Auto Layout 讓你直覺又簡單地設計 App UI!


本篇原文(標題:如何使用 Code Auto Layout )刊登於作者 Medium,由 yasuoyuhao 所著並授權轉載。

Auto Layout ㄧ直是 iOS 必學的技術之一,在 iOS 中你可以選擇使用 Storyboard 設置 Auto Layout,好處是非常直覺,而且多人使用時好懂,就算不大會 Swift / OC 都可以很容易做出想要的版面。最近公司面試需要出題,我也選擇了這個 Layout 題目。

為什麼喜歡用 Code Auto Layout?

對我而言,我比較喜歡 Code Auto Layout 表達,並且也可以常常運用 Code Auto Layout 技巧,產出比較複雜的畫面。這裡我不評斷哪個方式比較好,畢竟最合理還是應該依照專案屬性與工程師的熟悉程度來選擇。

今天要示範的畫面

今天我們來簡單做一個 App Store 的 Auto Layout,描述一下思路及實現方式。最終畫面應該如下:

code-auto-layout-final-product

開啟新專案

首先我們開啟一個新專案,選擇使用 Swift 語言,完成後使用 CMD + R 編譯執行,應該可以看到一個空白畫面。

客製化 TabBarController

TabBarController

接著我們要實現 TabBarController,思路如下:

  1. 建立檔案 BaseTabBarController
  2. 建立三個帶有 UINavigationControllerUIViewController
  3. 加入 TabBarController

建立檔案 BaseTabBarController

我們先建立一個名叫 BaseTabBarController 的檔案,並繼承 UITabBarController 實作:

現在你的 BaseTabBarController 應該像這樣。

建立三個帶有 UINavigationController 的 UIViewController

我們先試著建立一個:

現在編譯且運行,你的畫面應該如下:

UIViewController

接下來,我們要建立三個這樣的東西。你可以選擇寫三次:

或者寫出一個方法來產生:

並在 viewDidLoad 產生並綁定:

最後的 BaseTabBarController 應該如下:

現在,再次運行吧!你應該可以看到以下畫面:

BaseTabBarController

實作 AppsSearchController

創建檔案 AppsSearchController,並且繼承 UICollectionViewController, UICollectionViewDelegateFlowLayout

接著,我們做一些初始化:

CollectionView 產生 Cell View:

別忘了回到 BaseTabBarController 填入我們自定義的 AppsSearchController

現在,再次運行:

AppSearchController

幹得好,出現了 5 個不同背景的 cell!

實作 SearchResultCellView 自定義 cell use code auto layout

創建檔案 SearchResultCellView,並繼承 UICollectionViewCell

加入自定義的 identifier:

覆寫 init

別忘了回到 AppsSearchController 註冊我們的 Cell

建立元件:

接著,我們在 init layout 這些元件。先建立垂直的標籤:

vStackView

再建立水平方向的 View

infoTopStackView

使用 Auto Layout

現在你應該可以看到以下畫面:

code-auto-layout-1

設置截圖區域

快速製作三個 ImageView

建立截圖 StackView

疊加 infoTopStackView:

移除 infoTopStackView 的 layout,加入 overallStackView 的 layout:

現在運行!

code-auto-layout-2

嗯!很不錯,但我們還是要設置一下邊界,修改一下 overallStackView 的 layout:

constant: 16 代表我們修正了邊界,注意最後的 trailingAnchor-16

code-auto-layout-3

總結

至此,我們完成了 Code Auto Layout,當然, 這還只是入門,更多 Layout 的趣味等著你去發掘!

如果你需要範例輔助您,請點此專案

感謝您的閱讀,祝你有個美好的 Coding。

本篇原文(標題:如何使用 Code Auto Layout )刊登於作者 Medium,由 yasuoyuhao 所著並授權轉載。
yasuoyuhao,自認為終身學習者,對多領域都有濃厚興趣,喜歡探討各種事物。目前專職軟體開發,系統架構設計,企業解決方案。最喜歡 iOS with Swift。
作者的話:yasuoyuhao 2019/04/29
如果喜歡我的文章,可以按下喜歡或追隨讓我知道呦,更歡迎許多大神指點討論。感謝您的閱讀。
部落格:yasuoyuhao’s Area

此文章為客座或轉載文章,由作者授權刊登,AppCoda編輯團隊編輯。有關文章詳情,請參考文首或文末的簡介。

blog comments powered by Disqus
訂閲電子報

訂閲電子報

AppCoda致力於發佈優質iOS程式教學,你不必每天上站,輸入你的電子郵件地址訂閱網站的最新教學文章。每當有新文章發佈,我們會使用電子郵件通知你。

已收你的指示。請你檢查你的電郵,我們已寄出一封認證信,點擊信中鏈結才算完成訂閱。

Shares
Share This