iOS-Day2 認識Controller

Navigation Controller / Tab Bar Controller / Table View Controller

Hao
彼得潘的 Swift iOS / Flutter App 開發教室
6 min readMar 13, 2024

--

目錄
ㄧ、Navigation Controller
二、Tab Bar Controller
三、Table View Controller
四、找出元件之間的連線問題
五、如何復原刪除的Segue連線
六、container View

ㄧ、Navigation Controller

控制頁面的切換,瀏覽多層頁面。最上面有一條 navigation bar,bar 的中間顯示頁面的標題。左上角是返回前一頁的按鈕。右上角是可以添加按鈕。(圖1–1)

創建完成navigation bar後,會產生在主頁面的左側區(圖1–1)

關閉與顯示 Navigation Bar 的欄位,點擊 Navigation Controller 裡的 Navigation Bar,在勾選 shows Navigation Bar。(圖1–2)

(圖1–2)

當連接到下一個畫面成功時,下一個頁面會顯示返回按鈕。(圖1–3)

兩指點擊拖拉到下一個頁面,點擊 Action Segue 的 Show(圖1–3)

更改 標題內文 和 下一頁面的 返回按鈕名稱。(圖1–4)

(圖1–4)

在 Navigation Controller Bar 上新增 Bar Button Item 按鈕。直接將元件拖拉到 navigation bar 的欄位裡。將System Item調為Custom,就能從Tint調整icon顏色,從Image選擇SF symbol。(圖1–5)

(圖1–5)

二、Tab Bar Controller

iOS 的 Tab Bar Controller 是一種容器視圖控制器,通常用於實現具有多個標籤頁的介面。順序是先 tab bar controller,隨後接 navigation controller。這樣可讓每個 tab 有各自的 navigation controller,彼此獨立,不會互相干擾。(圖2–1)

創建完成Tab Bar Controller後,會產生在主頁面的左側區(圖2–1)

當你不小心刪除Segue時,你可以透過 view controllers 重新連接。(圖2–2)

兩指點擊拖拉到下一個頁面,點擊 Relationship Segue 的 view controllers(圖2–2)

選擇全部的畫面,執行 Editor > Embed In > Tab Bar Controller 可以一次連接畫面。(圖2–3)

(圖2–3)

三、Table View Controller

功能是在做分類。每個 cell 可以放置多個不同的元件,包含文字、圖片和按鈕等。

  • Dynamic Prototypes:需要從網路上取得多筆資料進行動態生成且表格數量無上限。
  • Static Cells:表格數量和內容為固定(需要搭配Table View Controller,不能與Table View使用)。
  • 包含section區塊和cell樣式設定。
  • 顯示表格的內容,由上而下排列和捲動(不限數量)。
  • 使用 view controller,在 view controller 上另外加入table view cell 採用固定高度,cell 裡的元件設定 auto layout 條件。

因為是固定的內容不會動態增加,所以在 Table View 的 Content 選擇 Static Cells。(圖3–1)

(圖3–1)

取消cell在點擊時的顏色改變效果。(圖3–2)

(圖3–2)

Separator:可以添加分段線的顏色和樣式。(圖3–3)

(圖3–3)

選擇Table View的Sections,可以增減Section的數量。(圖3–4)

(圖3–4)

如果要在 Table View 上製作 Header,可以置入 View 到 Table View 裡的 Section 上方。(圖3–5)

(圖3–5)

四、找出元件之間的連線問題

點選其中一個元件,利用 Connections inspector 檢查連線。視窗的右側 Inspector 區塊,切換到 Connections inspector 分頁。

畫面中可以看見他們之間的關聯性

五、如何復原刪除的Segue連線

Root ViewController是ViewController層次結構的錨點。每個window只有一個root ViewController,它定義了使用者看到的初始內容。

兩指點擊拖拉,選擇 root ViewController
畫面中的位置和原理

六、container View

頁面內容如果複雜過多時,可以透過 container view 將頁面拆分出來,成不同區塊,藉由這種方式可以讓每個區塊各自獨立處理畫面的顯示。

兩指點擊拖拉到下一個頁面,點擊 Embed

~謝謝各位,下一集待續~

--

--