#6 Storyboard製作狼人樂團MWAM的電子書 App

BIO的灰瀏海好煩…但我沒時間調了QQ

設計的過程中考慮到美感與實用性，並未用到作業要求的全部功能（當然也是因為我懶得做），但盡量把無程式製作電子書該用的大功能都包含進去了。

圖片Credit：

MAN WITH A MISSION

Step 1：開啟畫面

在LaunchScreen加入一個看起來有模有樣的MWAM Logo

五週年紀念專輯的封面，請大家多多支持

Step 2：分頁與樂團介紹

新增一個Tab Bar Controller>叫出Table View Controller>右下角點選Navigation Controller進行連結>點選Tab Bar Controller，按住control鍵，將連結拉到剛剛新增的Navigation Controller>點選view controllers>完成連結。

一定要先新增一個Table View Controller才能叫出Navigation Controller。

將Table View 的Content改為Static Cells。新增Image View和Text View，把範圍拉到適當大小。

顯示出的效果如下：

Step 3：製作團員簡介

拉出Table View Controller，選項與連結步驟同Step2。設定好一個Section的寬高後，再更改Section的數量為5就可直接複製（團員有五匹狼）。接著就是稍微費時的排版時間。使用到Image View和Label x2

利用階層概念，將文字放在圖片後方or前方，效果看起來比較不死板…應該吧XD

叫出View Controller，每匹狼都給他一個介紹的頁面

點選Section後，按住Control鍵，直接拉到View Controller頁面，選Show，Segue連結就完成囉。

BIO的顯示如下：

個狼的介紹頁面很混…我知道…但是財哥…沒有時間…

Step 4：Scroll View製作左右滑動的專輯封面

叫出一個Table View Controller，步驟同2，但這次要設定超出畫面範圍的Scroll View，所以直接參考Peter的教學。

設定 content size，實現水平捲動，上下捲動和分頁的 scroll view

很明顯地可以看到超出範圍的View寬高

我試著要改Album、Single、Digital的字體顏色，但發現得用程式改…明明可以在Attributes inspector改Header的名稱，卻不能順便改字體顏色，這是什麼需要加購才能解鎖的服務嗎？只好下次再說惹。

ALBUM顯示如下：

只可看圖片，點擊沒有下一頁喔～

整體電子書map大概長這樣（很混我知道）

如果你有看到第四條線從Tab Bar Controller跑粗乃，一定是你的眼睛業障重。

感想：

用xcode的Storyboard拉一個簡單的電子書真的很方便，只是Bug有點多，拉版型的時候常常會跑版，所以事先用UI軟體設計才是正解XD

奉上GitHub連結：

GitHub - loveadumi/MWAM

對狼人樂團有興趣的人可以來聽歌喔！