#68 單純使用 Storyboard 實作電子書APP
這次再複習一下 Storyboard 的操作，不寫程式，單純從 Storyboard 運用 Navigation Controller、Table View Controller、Scroller View、Container View 實作出電子書App。
前一次只單純用到 View Controller，這次主要是練習 Table View Controller 的各種操作。
這次電子書的內容就以『彼得潘的iOS App程式設計入門』的網頁資訊為例子，把網頁內容轉為 APP。
操作 GIF
螢幕截圖
完成了5個頁面，其他頁面的樣式就以此類推囉。
首頁，目錄頁
table view controller
拉一個 table view controller, 再 Embed In 一個 Navigation Controller
Static Cells
Table View 的 Content 改為 Static Cells
刪除多的 cell，只留一個cell來客製化
cell 的高度改為66(六六大順)
拉一個 Label 字型大小調為 24
cell 的 Accessory 改為 Disclosure Indication (右邊符號，代表點下去有內容)
cell 的 Selection 改為 None (點下去不會變黑)
有13個項目，把cell 複製12個，把 Label 的內容填上
Estimate
把 Sections 的 Header 和 Footer Estimate 改為 0 (往上推，上方不會出現灰色的bar)
再多加一個 header view 好了
預覽
簡介
先下載2張圖片，拉到 Assets.xcassets
加一個 view controller
加入 image view, label view
label 屬性設為 Attributed, 然後把網頁標題貼過來，設定置中，
Lines 設為2.
加入背景 image view, 在上面加上一個view, 背景為黑色，透明度為 0.6, 讓他看起來比較深色，突顯白色的字
加上 2個 label view ，和 button
目標頁
網頁的內容
這裡會有二個 cell 樣式
- 標題
- 內容列表
所以我們留二個 cell 來客製
第1個 cell
先拉一個 Text View
把 Text View 的 Text 屬性改為 Attributed, 把網頁的標題貼過來，文字改為置中。
第2個 cell
加一個 image view 和一個 label
image View , 用 SF Symbols 裡的符號就行。
label 因為是靜態的，所以先手動調整高度，還有 cell 的高度，來配合內容長度。Line 設為0，不限制line 的數量。
然後複製8個cell, 修改內容
再把分隔線拿掉，Separator 設為 None
課程資訊頁
這一頁用在 cell 裡加一個 scroller view 來實作
加一個 scroller view , 寛度為 393x4 = 1572
拉一個view 到 table view 之外，方便編輯
編輯好4張卡片view後，再拉回到 Scroll View 裡，view 的 x 要重設為0
在首頁目錄頁再加個表格的背景圖片
方法一: 不寫任何程式
- 在 View Controller 上先加一個 image view，設定背景圖片。
- 將 Container View 拖曳到 controller 的畫面上。
- 將 container view 原本連到的空白的 view controller 刪除。
- 將 container view 拉大，這裡我是讓它在中間，周圍留一些邊界。
- 從 Container View 拉 segue 到 table view controller ，選擇 Embed。
- 將 table view 的 Background 設成 opacity 50% 的黑色，如此才不會蓋住背景圖片。
- 將 cell 的 Background 設成 Clear Color，如此才不會蓋住背景圖片。
- 將 原本的 label 的顏色改為白色，才看的見字
- cell 後面的 Accessory 指示號，沒法改顏色，改放一個 Label 來取代
參考：
Q：如果不小心出現藍色框，
到 Editor menu->Canvas->Show Bounds Rectangles，取消勾選就好
漸層
