StoryBook App#1 — Buttons, Image views, Text Views and Progress View
StoryBook App by April C. — GitHub
以「可翻頁的故事書」作為主題，第一次製作不寫code的新手友善App。
本篇內容包含：
- 開新檔案、基礎設定：Swift & StoryBoard
- 構成頁面的基本要素：View Controllers
- 基礎UI元件：Button, Image View, Label, Text View
- 資源庫 Assets：加入圖片資源
- 建立StoryBook首頁及故事頁排版
- 可顯示故事進度的Progress View 進度條
上圖就是這個StoryBook App會呈現出來的結果，那我們就一步步來看這是怎麼建立出來的吧！
開新檔案、基礎設定：Swift & StoryBoard
首先，我們要打開Xcode建立一個新的專案(Project)，設定的地方我們要點選iOS的分類頁之下的[App]。
產品名稱(Product Name)輸入StoryBook，或是你想先輸入demo來做初步練習也可以。Organization Identifier先輸入自己的名字就可以了，這裡暫時還不重要，不用太糾結。
重要的是Interface(介面)和Language(語言)欄位，分別選Storyboard和Swift。
Interface: Storyboard
Language: Swift。
Storage(儲存空間)選None(無)，其它對我們也暫時都不重要，照著上圖選擇即可。設置完後點選Next進入下一步，選擇你的Project要存放的資料夾位址。
構成頁面的基本要素：View Controllers
選好之後我們就第一次進到開發畫面了，最左邊的工具列叫做Navigator(導航列)，在小小的資料夾圖示下選擇Main(主要)，中間的Editor(編輯器)會出現一個iPhone形狀的預覽，這裡就是我們可以視覺化製作App頁面的地方。
而這一格iPhone畫面就正如它頭上的橫條所說，是一個View Controller(畫面控制器)。簡單來說，一個View Controller元件，代表一個頁面，而一個App通常由多個頁面連結、組成。
接下來我們將製作第一個頁面，也是StoryBook故事書App的主畫面。在幫畫面添加內容之前，我們先來簡單了解幾個最基礎的UI元件。
基礎UI元件：Button, Image View, Label, Text View
- Button 按鈕：能做出互動反應的文字按鈕，也可以加入圖片，變成可互動的圖片按鈕。可更改背景和文字顏色，字體、字重、大小…等。
- Image View 圖像框架：用來放置圖片，可更改圖片大小、圓角、呈現的方式…等等。
- Label 文字標籤：單行的文字標籤，不可互動、換行，適合用作短標題或單行標註。
- Text View 文字框：適用於內容較多的段落文字，會隨文字框大小自動換行。
除了對元件的基本認識，我們還需要準備好要用的故事圖片和文字內容。
近年AI發展進步神速，讓我們可以不用再自己苦思籌備練習用的素材，只要利用ChatGPT和AI圖片繪製器便能輕鬆獲得圖文。
請幫我寫一段有8個畫面的兒童故事，主題是關於「做聰明的決定，並勇於承擔責任」，每一段不要超過100字，用有對話和場景描述的形式表現。故事中有兩個主角，三個配角。請用一個有寓意的故事來表現，並在最後一段才提到主旨「做聰明的決定，並勇於承擔責任」。
這裡簡單提供ChatGPT的範例指令，暫不贅述ChatGPT和AI繪圖的使用方法，日後有機會再另寫一篇教學分享。如果不知如何使用，故事內容可用文字產生器或隨便的文字代替，圖片則從Google或Pinterest上搜尋喜歡的圖片，先把用得到的圖片們存在資料夾裡。
資源庫 Assets：加入圖片資源
存好之後我們要把App中會用到的圖片們都先加入到Assets裡面。最簡單的方式就是打開你系統的圖片資料夾，選取好要用的圖片們，把它們拖拉到Assets窗口裡。
Assets就是我們在這個專案中的資料庫，要先收集好資源，才能供我們日後使用。拉進去之後，可以先把圖片名稱改成簡短好辨認的名字，之後再選擇的時候可以更快速找到。
建立StoryBook首頁及故事頁排版
接下來就是真正開始建立畫面的時候了，我們第一個要做的是首頁排版。
從Navigator點選回到Main的編輯畫面，按下在Editor右上角的 “＋”，會彈出物件選單。此選單可以搜尋到所有我們將用到的物件。
為了完成首頁排版，我們會用到：
(1)Label：製作“彩虹小兔學分享”的標題。
(2)Image View：拖曳出理想的大小，放置於中間當作主圖。
(3)Button：此處的Style是filled(填滿)，Corner Style(圓角樣式)是Capsule(膠囊)。
底部的Tab分頁下一篇會講到，現在先當作它不存在。
這裡特別講一下，Image View拉好大小和位置後，點一下選取畫面上的Image View，我們從右側的Inspectors窗口，找到調整數值的小圖示(三條橫線的那個)，點它之後，我們就可以針對此Image View元件調整客製各種樣式特質。設計其它的元件時也是選取好物件後，到這個地方調整。
點開最上面一條Image的下拉式選單，就可以看到剛剛你已經加入Assets資料庫的所有圖片，只要點選你需要的那一個，Image View就會幫你替換上去。其它樣式選項則隨自己喜歡微調即可。
下一步我們將建立故事頁排版，我的故事文本有七個段落，表示我們需要製作七個故事頁面的View Controller，但不用急，先做好一個再複製修改就行了。
這是第一個畫面，和首頁一樣需要一個Image View和一個Button，但不需要Label。Button的Corner Style改成“Dynamic”，變成圓角長方形。除此之外，我特地在底部加入了綠色的進度條，讓讀者在讀故事書時，可以清楚知道現在閱讀到整個故事的哪個部份。
可顯示故事進度的Progress View進度條
從物件庫加入Progress View進度條後，將它選取後再到Inspectors修改數值。我有7個故事頁，所以用100除以7，根據進度，每一頁增加約0.14。第一張輸入0.14，第二張就是0.28，以此類推。
從第二頁開始，除了「繼續講！」的按鈕，我們也可以加入另一個「回前頁」的按鈕，以免讀者沒看清楚想再看一次。這一顆「回前頁」的按鈕我們勾選“Highlighted”，讓它變成比較淡的顏色，引導使用者點另一顆主要顏色的「繼續講！」按鈕繼續看下去。
最後一段的畫面，我把「繼續講！」改為「晚安！」，讓它點擊返回首頁。目前因為還沒建立View Controllers之間的聯繫，所以按鈕沒有作用是很正常的。
到這裡為止，我們已經做出8張有點像樣的App畫面囉，接下來只差用Segue線將它們連接成一個連貫的故事。
下一篇將繼續講Table View, Navigation Controller, and Tab Bar，以及如何快速地在View Controllers之間建立連結。
