# 4 Design E-Book application with Xcode Storyboard

在 storyboard 運用 tab bar controller / navigation controller / table view controller & static cell / Scroll bar 實作電子書 App

Homework Target

1. 練習 Navigation Controller and Tab Bar Controller
2. 練習 Table View Controller 的 Static Cells 設計
3. 練習 Segue 串接頁面
4. 練習 Scroll View 實現左右捲動頁面
5. 練習 Launch Screen 設定

Navigation Controller / Tab Bar Controller / View Controller 的關係

• 如何加入 Navigation Controller ？
  1. 在第一個要顯示的 Controller 或 Controller 的元件上加入 Navigation Controller
  2. 點選右下角的向下箭頭
  3. 選擇 Navigation Controller

• 如何加入 Tab Bar Controller ？
  1. 在第一個要顯示的 Controller 或 Controller 的元件上加入 Tab Bar Controller
  2. 點選右下角的向下箭頭
  3. 選擇 Tab Bar Controller
  4. 新增分頁

設定 Tab Bar Controller

• 接上 Tab Bar Controller 後，如何新增分頁？
  對著 Tab Bar Controller 長按右鍵並拉至 Controller ，選擇 “ View Controller ” 後會出現 Segue ，即新增分頁成功

• Tab Bar Controller 接 Navigation Controller，再接 Navigation Controller 所帶的 View Controller

Tab Bar Controller 接 Navigation Controller 1 再接多個 View Controller ( View Controller 1.1 & View Controller 1.2 )，Tab Bar Controller 接 Navigation Controller 2 再接單個 View Controller 2.1 ( 若沒有後續的頁面，Navigation Controller 2 可以不加 )

• 設定 Tab Bar Item

1. System Item：Xcode 中已設計好的樣式，icon 和文字是綁在一起的，因此文字不可另外自訂
2. Selected Image：已選擇時的圖片
3. Title：當非使用 System Item 即可自行設定文字
4. Image：未選擇時的圖片，若 Selected Image 沒有設定的話，已選擇時也會顯示該圖片

• 在 Navigation Bar 中加入 Button：使用的元件為 Bar Button Item，在同一個 Navigation Bar 中同時可加多個 Bar Button Item ，一樣可以用 Segue 連起，點擊後即可跳到下一頁

1. System Item：Xcode 中已設計好的樣式，可直接使用，和 Title 、 Image 只能擇一只用
2. Tint：調整 Button 的顏色
3. Title：調整 Button 的文字，和 System Item 、 Image 只能擇一只用
4. Image：調整 Button 的圖片，和 System Item 、 Title 只能擇一只用

Table View Controller 的使用

• 分為 Dynamic Prototype 和 Static Cells，點擊 Table View 即可在 Content 中切換
  Dynamic Prototype：Cell 的模板是一樣的，用程式去產生 Cell 和 設定 Cell 的內容
  Static Cells ： Cell 的數量和欄位都是固定的，無需寫程式
• Static Cells 只能搭配 Table View Controller
• Section & Cell：一個表格可以有多個 Section ( 例如：分類 )，一個 Section 可以包涵多個 Cell
• 製作 Cell 的模板，再複製多個 Cell，選到 Table View Section 即可在 Rows 中調整欄位的複製數量

• 調整 Cell 順序：直接拖移 Table View Cell

• 將 Section 的 Header / Footer 隱藏：如果不需要分類，可以將 Section 的 Header / Footer 隱藏，選到 Table View，在 Sections 中將 Estimate 都設為 0

• 設定 Section 數量：選擇 Table View，調整 Sections 的數量，即會複製 n 組 Section

• 設定 Section 的 Header / Footer 標題：選擇要設定的 Section 後，即可在 Header 及 Footer 欄位中設定標題

• Cell 添加 Accessory：選到 Table View Cell，選擇 Accessory 的樣式，Accessory 僅是個提示符號，不是按鈕

• Cell 本身就可以點擊，因此選定 Table View Cell 後，拉 Segue 時要選擇 Section Segue 中的 Show，別被 Accessory 給誤導而選擇 Accessory Action 中的 Show

• 設定 Cell 可否點擊：Cell 本身就可以點擊，若欲使表格中的 Cell 不可點擊，需先選定 Table View 後，在 Selection 的下拉選單中選擇 No Selection ，則整個 Table View 變為無法點擊

• 設定 Cell 點擊顏色：Cell 因表示被點擊，因此在點擊時會變色，但是若在 Cell 中放的是 Switch、Text field 等僅在 Cell 上操作非進到下一頁，此時希望 Cell 還是可以點擊，但是不要變色，因此需先選定 Table View Cell 後，在 Selection 的下拉選單中選擇 None

Segue 串接頁面

• Button 和 Image 可以用 Segue 串接 Controller
  對著要串接的元件長按右鍵並拉至 Controller，選擇 “ Show ” 後會出現 Segue ，即串接成功

Scroll View 實現捲動頁面

1. 新增 Scroll View 元件：在 View Controller 中新增 Scroll View 元件，並設定大小
2. 設計 Scroll View 中的內容：先新增一個 View ，將 View 拉到 View Controller 中 “ Exit ” 的下方，並設定 View 的大小，若想讓 Scroll View 可以左右捲動，則 View 的寬度要比 Scroll View 寬，高可以和 Scroll View 一樣 ; 若想讓 Scroll View 可以上下捲動，則 View 的高度要比 Scroll View 高，寬可以和 Scroll View 一樣，接著即可在 Scroll View 中新增內容
3. 將新增完內容的 View 放回 Scroll View 中，並調整 X、Y 的位置
4. 設定 Scroll View 的 Content Size：Content Size 可以認為是 Scroll View 捲動的範圍。點擊 Scroll View ，在 User Defined Runtime Attributes 新增 contentSize / Size 並設定 Value ( 寬、高 )，若想讓 Scroll View 可以左右捲動，則設定必須 “ 寬 ”，且必須寬於 Scroll View ， “ 高 ” 則可以不設定 ; 若想讓 Scroll View 可以上下捲動，則設定必須 “ 高 ”，且必須高於 Scroll View， “ 寬 ” 則可以不設定

5. 顯示 / 隱藏 Scroll Bar，勾選即會顯示，取消勾選即會隱藏 ( Horizontal 為左右滑動的 Bar 、 Vertical 為上下滑動的 Bar )

• 備註：要讓 Scroll View 的內容剛好是一頁一個段落 ( 前提是要算好內容顯示的寬度，例如：畫面的寬度為414，所以座標0 – 414放第一張照片、座標 414 – 828 放第二張照片)，則點擊 Scroll View 並將 “ Paging Enabled ” 勾選起來

如何設定APP的第一個畫面

• 將箭頭移到Controller上
• 若找到箭頭，可直接將 “ Is Initial View Controller ” 勾選起來

設定 Navigation Bar 和 Tab Bar 的顏色 ( 在 iOS 15 的預設為透明 )

點選 Navigation Controller 的 Navigation Bar 勾選 Standard 和 Scroll Edge

點選 Tab Bar Controller 的 Tab Bar 勾選 Standard 和 Scroll Edge

設定 Tool Bar 及加入 Bar Button Item

顯示 navigation bar & tool bar 的 navigation controller