作業#3 用Storyboard來製作電子書App
目的: 不寫程式，從 storyboard 運用 tab bar controller，navigation controller，實作出電子書App
高雄，我從小到大成長的地方，但自認為還有很多角落很多美食還沒去過還沒嚐過，所以以高雄為這次電子書的主題，希望能透過這次作業實作再多多了解自己的家鄉以及我之後三餐還能去哪裡覓食吧😋😂
App架構
用Tab Bar Controller連接兩個Navigation Controller，Tab Bar Controller切換兩個分類，Navigation Controller用來同一分類中前後頁的來回，然後利用Segue來連接頁面
App Icon
首先來幫這個App設定一個Icon，進到Xcode的Assets中點選App Icon會看到不同需要大小的Icon，這是用來在不同地方需要顯示不同大小的Icon，那要怎麼做才能快速得到這麼多不同大小的Icon呢？
可以搜尋App Icon Generator，這個網站可以把我們給的圖片製作成大小不同的Icon
點選進來後的畫面，然後可以勾選需要的大小，然後直接把圖片拉進去左手邊的方框即可然後按下右下角藍色按鈕Generate
按下按鈕後就會將製作好的Icon存在Finder->Downloads裡，點選進去後有一個AppIcon.appiconset的檔案，將他複製進去Assets裡就會出現以下畫面，Xcode會自動偵測幫忙排好無需自己動手
最後點開模擬器，Icon就會顯示在螢幕上囉！
實作App
1.美食選單畫面
完成以上畫面需要用到：
1.用TableViewController的Static Cells先完成一列後直接增加Rows快速完成其他列
2.利用Scroll View完成水平的滑動切換照片以及利用visual effect view with blur製作出背景毛玻璃感
3.自製Accessory View
用TableViewController的Static Cells先完成一列後直接增加Rows快速完成其他列
建立Table View Controller
先拉出一個Table View Controller，Static Cells只有Table View Controller才有，然後將Content預設的Dynamic Prototypes改為Static Cells，然後左邊欄位上點選Table View Section設定Rows的數量，那這邊先設定兩個，做好一組後下面的都複製貼上即可
利用Scroll View完成水平的滑動切換照片以及利用visual effect view with blur製作出背景毛玻璃感
2.1 設定Cell高度以及加入Scroll View
在放Scroll View 進去前先設定好Rows的高度，左邊欄位我們要使用的Table View Cell點下去，Size Inspector設定Rows Height，設定好後就可以拉Scroll View進去Cell了，然後設定與cell一樣大填滿整個cell
2.2建立加入Scroll View的View
接下來拉一個View用來在螢幕外先把我們要的畫面做好，因為我們會使用Scroll View就代表我們會有寬度大於螢幕的畫面需要滑動，但是如果我們直接放在Scroll View上操作會發生除了螢幕上的元件其他我們是看不到的，然後回來View的部分，設定好View的大小，我希望每個顯示的圖片寬200然後左右間隔20頭尾距離邊10總共10個圖片，所以設定寬2200然後高跟Scroll View一樣高，接下來拉一個View到剛做的View上作為每個圖片的底部，接下來我只要做完這一個View我整個在複製9個就做完了
2.3建立每格View中的畫面
剛剛上面說到加入一個作為底的View後，在View中再加入一個我們真正要顯示的view，然後加入一樣大的Image View，在Image View上面再覆蓋一層visual effect view with blur製造毛玻璃霧霧的感覺，最後在最上一層加上一個顯示店名用的Label就做好一個了，接下來複製鋪滿然後加入每格的照片以及文字就大功告成囉
2.4將View加入Scroll View中
最後一個步驟囉！把我們要顯示的View放進Scroll View中讓這個View成為Scroll View的SubView，然後選定Scroll View到它的Identity Inspector，設定它的User Defined Runtime Attributes，填入Key Path是contentSize設定Scroll View所要顯示的全部大小，然後Type是Size，Value填入x填入2200，就完成囉
以上內容參考下方連結：
3.自製Accessory View
加入View，Image View，Button以畫面疊加完成
原本Table View Cell的Accessory有四種標示(如下圖)來提醒使用者這裡可以按下去，但是今天如果都不喜歡的話可以來做成屬於自己的Accessory View
實作：
首先在Cell尾端加入一個作為底的View方便之後整組複製貼上到其他地方，加入一個Image View接下來才加上Button，為了不要讓Image遮住部分的Button無法使用，最後把Button的字刪掉以及底色設為clear，View的底色也設為Clear就完成囉
以上內容參考下方連結：
2.美食選單切換至清單
完成以上畫面需要運用Segue切換畫面：
比如說按下剛剛放在Accessory View的Button後跳轉畫面，首先按下要連接的元件，按著control拉到要到達的頁面，然後跳出這個畫面下面這個畫面後選擇show，就這樣Segue就建立好了
2.美食清單畫面
完成以上這畫面需要：
- 將Image View裁成圓形顯示
- 將Table View的Style改為Inset Grouped
將Image View裁成圓形顯示
設定Image的User Defined Runtime Attributes即可完成
首先先拉一個Image View到cell中，然後選擇Image的Identity Inspector的User Defined Runtime Attributes，Key Path輸入layer.cornerRadius，Type選擇Number，Value填入我們希望圓的半徑，那這邊我們希望整張圖變成圓形就填入尺寸的一半，這邊要注意一點要設定成圓形圖片一定要正方形才行，然後點選Attributes Inspector下方Clips to Bounds要勾選，把超出的部分裁掉，才會顯示成圓形
將Table View的Style改為Inset Grouped
可以參考下方連結：
3.美食清單點選連結顯示網頁
完成以上畫面需要：
將TextView加入網址變成Link
拉一個View後加入cell然後鋪上要顯示的Label，然後最上層鋪上TextView，輸入網址進去後將Behavior這個欄位勾選Selectable就好然後勾選Link的形式，即可完成一個連結，最後再把View跟TextView顏色都設為透明，就可看起來只有連結兩字的網路連結囉
4.景點介紹畫面
最後來畫面的部分介紹一下圖片如何有陰影又有圓角，一般來說圖片設定圓角又設定陰影，如果Clips to Bounds的話會把陰影也裁切掉，這樣失去設定陰影的意義了🥲，因此一起來看一下該怎麼實作吧
加入一個View在底部用於顯示陰影
在官方對於cornerRadius圓角的說明中有說，如果是一般的View設定圓角不用設定Clips to Bounds為true，我們不用擔心設定圓角後陰影會被裁剪到，所以先加入一個View在Image底部，然後設定View的User Defined Runtime Attributes，Key Path加入圓角以外再加入layer.shadowOpacity設定陰影的不透明度，最大值為1.0這邊我先設定為0.5，最後ImageView也加入一樣的圓角，然後底部的View不用Clips to Bounds，ImageView要喔！
以上內容參考下方連結：
Tab Bar Controller的分類icon
除了以上兩個，個人也蠻推薦可以到App Store下載icons8 Lite，可以選擇圖片大小畫質直接選擇底色，也可以用關鍵詞搜尋各式各樣的icon
最後整個成品的操作畫面：
GitHub連結：
