Xcode|嘗試做一個實用的app吧
『跨過一山，還有一山。』如果只能用一句話總結製作時的心力路程，我會這麼說…。
創製工具：MacBook pro, Mid 2010 & Xcode Version 9.2 & Adobe illustrator
（想先看作品完整呈現，可以直接滑到文末.gif）
嗨，大家，我是一個菜鳥iOS APP開發學徒，這篇文章主要想帶著你，就像手中拿著一張大地圖，跟我一起走進app建造工廠一探究竟。
我打造了一個畫面雖然不夠精緻炫目、功能不太強大，但至少對我自己而言相當實用的iOS app。對一個學習中的入門者而言，也得用上不僅僅止於掏出18般武藝了…已經汗流浹背好幾天…。（天吶，每個段落我都要強忍住不能一直打”…”💧）
創作構思：
這次作業主要是做出一本電子書。
恩～電子書…思索著，我想要哪種方向的內容呢？很純粹地敘述一段小故事？？
最終，我想讓這個電子書app貼近我自己的生活；我想讓他實用，也就是放在手機裡3不5時會想點開來看看的那種。
主題…?敲定！該怎麼呈現…….？敲定！那麽就開始著手進行囉。
（😱以上構思過程輕描淡寫，其實是癡呆的坐著、趴著、蹲著、傻傻的站著，恍惚的看著像當機的機械軀殼；但實際上腦海分分秒秒波濤洶湧建構、組織，想辦法榨出靈感，是相當糾結的歷程。）
OK ! Let’s do it ! 把靈感打造成現實吧
地圖拿好了沒？祝好運～
（這次創作過程中，我不是太好運，之後有機會再來說說吧）
插入起始畫面
如何建立一個新專案，這篇不再贅述了。歡迎看我的上一篇作業誌，裡頭有提到，（連結在下方）。
『起始畫面』，也就是當我們打開某些app時，會最先跳出有如曇花一現的Logo或歡迎你的窩心頁面。往後，除非重新啟動app，否則再怎麼樣點，點穿螢幕也再也回不去的那個風景。
小叮嚀‼️
Xcode打造app要用到的圖檔，全部通通都得先匯入到最左側瀏覽區塊的[Assets.xcassets]資料夾。
製作起始畫面的步驟其實相當單純好上手，點選左側瀏覽區塊中的[LaunchScreen.storyboard]>工具區右下角的Object library拉出一個新的[View controller]>再拉出一個[image view]元件到View頁面上>從工具區的image匯入圖片就可以了！（圖片檔，也就是以上的”跟你說個故事。”）
製作小小電子書
- 也算是此app的前提情要
主頁的一切～
皆從[Main.storyboard]開始。
起始畫面弄懂後，做出電子書的畫面應該就沒什麼問題了。只是從Object library多拉幾個View controller出來>想要貼上的圖片通通匯入image view元件，故事書的版面大致就編輯完成了。
這邊的技巧在於拉segue線，將所有書頁串串串在一起🍢🍡。
第一面書頁，也就是起始畫面跳走後最早出現的起頭頁。我想讓使用者有選擇權，如果對小故事沒興趣，我是不會強迫你地（😭偷偷留下兩行漢子的熱淚），點按『跳過』按鈕隨即可帥氣飄撇地略過囉。
現階段解析讓我傷心的『跳過』按鈕製作方法，略嫌太早，放到後面一點再敘述會比較清楚。
從製作：點按螢幕開始閱讀開始
首先必須知道，segue線是無法平白無故地將兩個頁面串接的，需要有個引路人→[Button]元件。Button範圍涵蓋之處，就是手指能觸發到下個頁面的點按範圍。
因為我想讓整個螢幕都是手指頭點按的遊樂場～（除了首頁的『跳過』😭），所以引路人[Button]我把他拉的就跟整個螢幕涵蓋範圍一樣大。為了讓整本書都串在一起，想當然爾，每面書頁都要有個螢幕那麼大個的透明Button囉。
牽起segue關連線
拉起segue小手的方法：按住鍵盤control鍵＋滑鼠拖拉至目的地。
由於我想讓我的小故事書閱讀模式是只能往下翻閱的單向道，所以拉線的方式如下☟
起始點：[Button]元件 — — —終點：下一個畫面的 View controller
串接模式：Present Modally
『跳過』＆『 走 』按鈕製作
最簡單的辦法就從Object library拉出[Label]元件，把字改一改，變變顏色、粗細就好了。但我有點太執著，沒有我要的字型、沒有我要的角度，所以我依然是用image view匯入手繪圖片檔。
接著套入[Button]，拉出範圍就和按鈕一樣大就ok囉。
（由於跳過＆走的button較後製作，所以圖層較前，因此不會被拉的跟螢幕一樣大的Button覆蓋掉。）
至於此階段要設置的segue線起點、終點，如果文章讀到這邊，等等還是無法明白，先別緊張，後面會撥雲見日！（learn伶也是撥撥撥，撥好久才悟道的☁️⛅️🌈）拉線方式如下☟
起始點：[Button]元件 — — — 終點：Tab Bar Controller
串接模式：Present Modally
/更改過場特效/
串接Present Modally，Xcode預設的過場特效是畫面由[下→上]刷入。然而，我想讓故事書以翻書頁的方式呈現。
方法：點選segue連接線>工具列storyboard segue>[Transition]>選[Partial Curl]，翻頁特效完成。
應用主頁＋內容
✨亮點是✨：吃掉👄！吃掉👄！吃掉！！ 有發現嗎大家？ 我自己覺得很好笑。正所謂，自己埋得梗，自己笑，哈哈哈哈哈哈哈哈哈👅
（好啦，正題繼續☟☟）
欸對，以上就是赤裸裸的app完整骨架
本節重點是讓頁面從單向道；變成雙向道！
是怎麼從『保健食品庫存』⇌『大嘴巴』之間轉跳的呢？？
就從主頁面開始講起吧！
有請[Navigation Controller]!!
（會在串接畫面上端顯示一條bar）→Navigation bar
這條Navigation bar，手機世代的我們肯定超熟悉的呀，想到的app八九不離十，近乎每個都會使用這項元件。
[Navigation Controller]一樣可以從Object library找到，但有更更更快，更更更不容易出錯的法子來召喚他！極致地適合菜鳥開發者：☟
點選要被當成戳戳樂點開的首頁（就如同🚂火車頭，或者樹狀圖的主幹，此app咖啡色頁面）>滑到最上方工具列的[Editor]>[Embed in]>[Navigation Controller]，搞定。
（什麼？什麼？沒懂，哪裡又快又不容易出錯？）這位朋友，莫慌莫急，實際操作試試，你就能深深層層跟我一起嘆口氣體悟到，不用自己拉線，就是無比的小確幸惹。
這次的作品只用到一個[Navigation Controller]，所以速度、便利之處不大明顯；但當需要用到多個頁面時，就能感受到有多暢快～
這條Navigation bar上面含有兩個元件：[Navigation item]=保健食品庫存 ＆[ Bar Button item]＝play底片卷。
前者[Navigation item]在創建Navigation Controller的時候就已經很貼心附好給我們使用了，只要動手改改喜歡的名稱就好；可是到了主幹外階層以下的頁面，就要自己到Object library拖出來囉。
後者[ Bar Button item]，從頭至尾都要自己添加，可以選擇工具區Xcode系統附上的system item樣式，也可以從image匯入自己喜歡的icon😇，只要背景無色，還可以直接在tint置換icon色彩歐～
讓頁面可以來回切換的segue牽牽手
『保健食品庫存』⇌『大嘴巴』
操作☞ [Navigation Controller] — [View Controller]⇌[View Controller]
起始點：第一畫面[Button]元件— —終點：第二畫面View controller。
串接模式：Show
我想讓要再次閱讀故事書的人可以從主頁面再次切進複習 XD，所以插入了一個底片卷造型的Bar Button item，以下是串接方式：
[ Bar Button item]的segue牽牽手
起始點：[Bar Button item]元件 — — 終點：故事書第一頁的View controller。
串接模式：Present Modally
主頁面切換調控專業的 — [Tab Bar Controller]📦 🗒
有了Tab Bar Controller，會在頁面下顯示出數個可以在不同主畫面間自由切換的按鈕。我們經常使用的app（Line、messenger、Youtube…等等）必見這條切換bar。而 [Tab Bar Controller]就是專門負責這項工作的，想要速速又簡易的置入，如同以上[Navigation Controller]置入的手法：
點選如同火車頭的主頁第一頁>滑到上面工具列的[Editor]>[Embed in]>[Tab Bar Controller]，搞定。（Tab Bar Controller會在Navigation Controller前端）
依我的小經驗，先把每個頁面規劃好，要串接的頁面全部一條龍式的完成，再置入[Tab Bar Controller]是最好上手又省時的。Tab bar會自動匯入bar上預設的按鈕（Bar Item，含icon小圖＋文字），有幾個主頁火車頭相接就會有幾個Bar Item。想要變換Item圖騰或置換文字，在工具區操作更動就可以囉。看是要使用Xcode內建的system item；亦或自行從image匯入，各位隨喜，開心啊，看了心情愉快啊就好～
如果想要調換Item順序，直接在Tab Bar上，點住icon拖移就可以囉，人性化…又被治癒了幾秒。
內容頁
內容頁的格局，我設計的非常簡樸，想要一種一眼明瞭、五臟俱全、帶點小幽默的風格。
整組頁面只用到兩種元件：
[image view] +[text view]
image view匯入我畫的紅唇大嘴；text view能容納萬言書，可以用卷軸上下滑動閱讀。
✨👄👄大嘴阿呣～阿呣～吃掉，通通吃掉👄👄✨
這個意象點子，實在是太太太棒了，哈哈哈哈哈，別阻止我啊，再讓我得意一陣子吧🤪哈哈哈哈哈哈哈哈。
好了冷靜
進入本節最大重點：
血與淚水，我搭上無數小時研究出來的。☟☟☟
如何在Xcode插入超連結？
✨[text view]就能實現了
[text view]元件工具區
- 將Text預設的Plain改選成Attributed。
- Behavior勾選Selectable
- Data Detectors勾選Link
- 選取欲發生超連結的網址內容，按右鍵>Make Link>Enter搞定！
太感動，眼淚要衝出來了～🌈😭
製作表單的 — [Table View Controller]
這頁面我想呈現的像『提醒事項』app，to do list的功能，把完成的事項✓✓，標註已經吞下去的保健食品。另外，最好還能有每日定時刷新，從空白開始勾選的功能。
只可惜…..我還不會😭[哭]
功力不足，只能做出一個沒有靈魂的草創軀殼…。等我功力夠了，再來更新分享。
以下僅分享表單打造步驟：
- Object library拖出[Table View Controller]
- 點選[Table View]，於工具區[Content]欄位將程式預設的[Dynamic Prototypes]改選成[Static cells]，如此不寫程式即能進行表單設計。
- 再來很直覺地，每一列項目就是一個[Table View Cell]，如果每行cell的內容沒有太大差異，我的方法是：只留下一個Table View Cell，其他的先行刪除。並著手編輯第一行，把會用到的空白元件，一個個拖拉進來，佈局成想像的模板。初製編輯好後，懶人方便的速速福音又響叮噹了！！🛎🎊
- 點選[Table View Cell]上一階層的[Table View Section]，可以看到工具區顯示Rows數量＝1，此時此刻點點手指頭，噠噠噠，往上加，就會驚見！剛剛初製編輯好的那一行[Table View Cell]被優雅的一行行複製出來了，很感動～
/分類表單項目/
- 想要分類表單，就要在[Table View]創建群組。工具區：style>Grouped
- 預計歸納成幾群，就增加幾個Sections。
- 幫群組Sections命名：點選[Table View Section]層級，到工具區寫名字就可以了。另外，群組名字顯示方式有兩種，一則名稱顯示在群組列表之上（如我設計的表單）=Header；二則名稱顯示於群組列表最末端=Footer。群組名稱以何種方式呈現，將名稱寫入對應的欄位就可以囉！
打完。收工。
菜鳥iOS APP開發學徒Learn伶的實用app完整呈現☟☟
後記
這篇文生出來真的百經波折，從作品的方向構思，實際打造，到歷經數次的更改航道，重新拋下重重的錨，幾乎可以說是砍掉重練好幾次。
在離完工燒腦躊躇不前的幾哩路，收到一則彼得潘發來的訊息：『你電子書做了嗎？』😱😱😱😱😱😱 我不知道該怎麼講吶？！因為，我還在修正方向；因為，我還在苦惱版面的編排；因為，我對我的app還不甚滿意；因為，我的Xcode發生了很多怪事；因為，我還在研究我認為依照現在菜鳥功力應該可以達成的某些功能…….；因為，我不想要一有問題沒試著先自己解決，就去問彼得潘。
以上，過程路有好多好多的徒勞無功，還有一大列的問號還沒辦法一一破解，發現自己有很多的不足，要學得還太多。這段一有時間就像苦行僧窩在電腦前，步履沈甸甸蹣跚往前踏，執意地撞牆，層層疊疊積堆，因而學到的點滴技術，直到完成創作。很累吶！！！但我很喜歡，不然也不會現在坐在這兒鍵盤前敲敲打打。
由於，這篇文長已經遠遠遠超過我預計的長度了🤢，App創製過程中有一些打怪成功的小筆記，就不在這篇分享了…..也許之後寫個『加映場』？maybe~
眼球在唱熱情的沙漠了，肩頸疲勞頂摳摳…..
🌷大家對文章有什麼疑問，歡迎告訴我，詢問我，建議我，或教教我喔！
菜鳥iOS APP開發學徒Learn伶的本篇作業誌就在這邊結束囉，bye~
