Storyboard 電子書 App
有段時間沒有去電影院觀賞電影，上網看了電影的節目表
發現 Marvel Studios 準備要發行了這十年來最讓人期待的一部電影
讓我決定要製作這十年來，Marvel相關系列電影的「網頁版電影目錄」以及「英雄演員」的介紹
其中StoryBoard的設計我分成五個部分
1.Main.StoryBoard 主畫面
2.About.StoryBoard 關於漫威
3.Actor.StoryBoard 角色介紹
4.Movie.StoryBoard 電影系列
5.YouTube.StoryBoard 近期強檔
為何分成五個部分的原因是
不想讓全部的ViewController都在Main.StoryBoard內會顯得雜亂
一方面要整理及設計的管理分開管理是較為合適的做法
二方面則是培養自己設計畫面的習慣使設計畫面保持乾淨
一開始我使用了ViewController
透過Editor內Embed In 將Tab Bar Controller及Navigation Controller 加入
將Main.StoryBoard設計完成
最右邊的ViewController使用了
兩個UIButton：控制WKWebView的上一頁與下一頁
一個WKWebView：連結網路將相關資訊呈現
一個UIActivityIndicatorView：WKWebView在loading呈現讀取網頁的動畫
一開始的ViewController使用了
一個UIImageView：設計圖片的呈現
一個UILabel：文字的標題
一個UITextView：相關簡介內容可以滑動的文字區域
透過Tab Bar Controller連結其他四個StoryBoard
從Tab Bar Controller按住control連結至各個StoryBoard
並使用view controllers來管理
分開設計我則使用了StoryBoardReference元件連結其他四個StoryBoard
使用StoryBoardReference元件時要注意的地方
將各自的StoryBoard檔名選取
並將Rederenced ID對應至各自的StoryBoard ID
設定各自Controller的StoryBoard ID
另一個作法則為將原本設計好在Main.StoryBoard內的Controller
利用重構將Controller搬移並儲存為另一個StoryBoard
講解About.StoryBoard
AboutTableViewController與WebViewController程式碼
第10行的部分
會在AboutTableViewController使用iOS內建所擁有的Safari連結網路，因此在開頭需要import至AboutTableViewController程式碼
第14.15行的部分
先設計好要在TableView上的資料
利用Array及Tuple的方式儲存資料
第36行的部分
因為不要在最後面的TableView有額外的分隔線，因此此程式碼為移除分隔線
第47–51行的部分
覆寫原本TabelView內的方法，回傳的值為TabelView每個Section的Title數量
第54–58行的部分
覆寫原本TabelView內的方法，回傳的值為TabelView每個Section的Cell內容數量
第61–64行的部分
覆寫原本TabelView內的方法，回傳的值為TabelView每個Section的Title內容
第67–77行的部分
覆寫原本TabelView內的方法，設計Cell內的資料及圖片並回傳的值為設計好的Cell
68行的部分從TableView內取得的Cell要與在StoryBoard所設計好的Cell為同一個，透過Identifier參數來辨識
第79–107行的部分
覆寫原本TabelView內的方法，設計Section內的Cell，並在按下Cell後透過Url的方式連結網路,將相關的資料網頁呈現
87行的部分
在Mobile上的Safari開啟網頁
94–95行的部分
在自己的App上嵌入Safari瀏覽器
99行的部分
將相關資料透過Segue傳至WebViewController內，並透過WKWebView呈現網頁資訊，利用Identifier參數來辨識是否為自己設計好的Segue，而Sender參數為從哪個Controller傳遞資料，參數則給為self自己
第109–117行的部分
覆寫 prepare方法，並將SectionContent內的link傳至WebViewController，透過WKWebView呈現網頁資訊
講解WebViewController程式碼
第10行的部分
會在WebViewController使用WKWebView連結網路，因此在開頭需要import至WebViewController程式碼
第23行的部分
避免WebView在navigation使用大標題，因此將largeTitleDisplayMode的屬性設為never
第25–28行的部分
判斷從Segue取的資料是否有link值，如果有得情況下將WebView載入此URL
講解Actor.StoryBoard
ActorTableViewController與WebViewController及ActorTableViewCell程式碼
此ActorTableViewController做法上與AboutTableViewController大致相同，講解不同的部分，詳情的部分請往上詳讀
此WebViewController做法上都使用同一個，詳情的部分請往上詳讀
第84–94行的部分
覆寫TableView的方法
85行的部分應映自己客製化Cell的部分因此有建立了ActorTableViewCell
並且設定Identifier為ActorCell
最為重要的則為要轉型為ActorTableViewCell，如果此轉型沒有寫則還是會以預設的Cell顯示
建立客製化的Cell
講解Movie.StoryBoard
MovieTableViewController與WebViewController程式碼
此MovieTableViewController做法上與AboutTableViewController相同，詳情的部分請往上詳讀
此WebViewController做法上都使用同一個，詳情的部分請往上詳讀
講解YouTube.StoryBoard
YouTubeTableViewController程式碼
第10行的部分
會在WebViewController使用WKWebView連結網路，因此在開頭需要import至WebViewController程式碼
第12行的部分
要使用WKNavigationDelegate內的方法，因此YouTubeTableViewController要實作WKNavigationDelegate
第19行的部分
在viewDidLoad時期使用youTubeWebView的navigationDelegate，但本身Controller已經是因此使用self自己
第23–26行的部分
在viewDidAppear後使用loadYouTube方法並傳入String參數
第33–45行的部分
判斷此URL是否有，如果有則youTubeWebView執行load方法將URL傳入
42–44行則是如果youTubeWebView還在讀取時讓loadingIndicator元件使用startAnimating方法，會使畫面有讀取的動畫
第47–51行的部分
此方法則為youTubeWebView讀取完畢時，所要執行的事情，我則是將loadingIndicator元件使用stopAnimating，使畫面讀取的動畫停止並隱藏此元件
講解Main.StoryBoard
ViewController與WikiPediaViewController及ActorTableViewCell程式碼
第10行的部分
會在WebViewController使用WKWebView連結網路，因此在開頭需要import至WebViewController程式碼
第12行的部分
要使用WKNavigationDelegate內的方法，因此YouTubeTableViewController要實作WKNavigationDelegate
第19–28行的部分
在viewDidLoad時期使用youTubeWebView的navigationDelegate，但本身Controller已經是因此使用self自己
第30–32行的部分
在viewDidAppear後使用loadWebView方法
第34–48行的部分
判斷此URL是否有，如果有則ㄊwikiPediaWebView執行load方法將URL傳入
44–46行則是如果youTubeWebView還在讀取時讓loadingIndicator元件使用startAnimating方法，會使畫面有讀取的動畫
第50–55行的部分
判斷wikiPediaWebView是否可以回至上一頁，如果可以則wikiPediaWebView使用goBack方法，使wikiPediaWebView回至上一頁
第57–61行的部分
判斷wikiPediaWebView是否可以移至下一頁，如果可以則wikiPediaWebView使用goForward方法，使wikiPediaWebView移至下一頁
第63–71行的部分
此方法則為youTubeWebView讀取完畢時，所要執行的事情，我則是將backButton與forwardButton使用isEnabled方法，讓一讀取完網頁後判定是否有上一頁與下一頁，有的情況下按鈕才能使用將loadingIndicator元件使用stopAnimating，使畫面讀取的動畫停止並隱藏此元件
最後則是此App的GitHub
覺得此文有學習到新事物的話，請別吝嗇多給點掌聲吧！
