許許的Swift學習筆記( 3 )

終於可以開始Hello, World!
最近在課程中學到了關於 Xcode 編排 App 所需要的基礎功能，最後的成品會下這樣子。點一下 Press me 就會切換到 Hello, World 。

我的第一個App

如何編排APP的畫面

建立完專案後，就可以編排App了！

一開始，要用 Main.storyboard 這個檔案去規劃整個 App 的畫面，必須把物件一個一個放進去，慢慢堆疊。全部物件放好後，就會就像下圖這樣。是不是覺得有點面熟？其實App的概念畫面編排，有點像是繪圖軟體裡面的圖層一樣，需要一層一層疊加上去。

似曾相識的圖層

旅程開始

就像在做設計，一開始必須把素材全部丟到Library或是畫板上，接著進行排版。在 Xcode 的概念也是這樣，先把素材丟到一個像Library的資料夾裡面，就可以讓程式去抓到你想要的任何圖。但是 Xcode 資料夾的名稱不叫Library 而是 Assets。

Step 1 先把圖片丟到 assets

把所有需要的圖片放到 Assets 後，再回到 Storyboard 並在程式的右下角找到這個視窗，然後在搜尋欄打image。

Step 2 在底部的搜尋欄打上image

Step 3 畫面就會看到一個UIimageView的框框

可能做到這邊會有一些困惑，為什麼需要先弄一個框框才可以置入圖片，超麻煩的，不能就像繪圖軟體一樣直接把圖片拉進來嗎?

答案是不行，電腦的程式，自主判斷的能力還不足，需要一個口令一個動作，所以必須用電腦懂的語言去告訴他：『你現在去找出某某元件，然後執行動作！』不然就會出現錯誤，也就是俗稱的bug。

所以置入這個框框就是一個幫元件命名的動作，接著再把想要放的圖片丟進去，這樣圖片就有名字了，程式碼就會認得它。

NOTE！注意裝置的正確性！
在開始編輯之前，要先確認一下當初選的裝置是不是正確的，如果選錯了在View as 底下可以選其他不同的裝置。

在『View as』選單中，可以確認自己裝置是否有錯誤

選擇圖片

當一切設定完後，現在終於可以選擇漂亮的圖片放進 App畫面中了！在教學中，這個課程是要放一張的底圖，所以滑鼠點一下剛剛的 UIimageView 再把他拉到畫面一樣大，接著就到程式畫面右上角，可以看到一個有點像鋼筆工具的 icon ，在 image 的下拉式選單裡面，就可以選擇 Assets 資料夾的圖片。

底下這張圖中，有點像鋼筆工具的 icon 因為沒有 Xcode沒給任何名稱，就姑且叫它元件控制工具好了，因為有許多元件的設定必須從這裡去控制。

很像鋼筆工具的 icon

置入其他元件

一個 App 是由很多不同元件組成的，所以當然不可能只有圖片啦～～

接下來開始置入其他的元件，先回到程式的右下角，找到這個長得像銅錢的icon按一下並在搜尋欄上打元件的名字就可以加入大標題、按鈕等各種元件。

加入 label

加入 button

然後再App畫面中點選你的元件，就可以從元件控制工具這邊，修改文字大小、顏色、置中2對齊等…

控制元件

結語

在學習的過程中，了解到 App 的結構已經如何加入元件、置入圖片還有調整細節等…常常有人跟我說這麼龜毛幹嘛？功能可以用就好啦，幹嘛調整畫面的細節？

但是…細節很重要！細節很重要！細節很重要！所以講三次

因為一個畫面或是程式好不好用，絕對可以用就過關了，可以用只是最表面的需求而已，一個App是否成功，很多東西都會影響，像是UX、順暢度、UI之間的互動、畫面的整潔度、視覺上的舒適度等族繁不及備載..

當然，一個人做不了那麼多事，但至少最基本的『畫面呈現的細節』要到達標準，因為一般使用者，他們無法看出哪邊沒對齊，配色讓按鈕看不清楚，只會覺得好像哪裡怪怪的，接著就刪除了你精心設計的App。

調整細節為的是避免User覺得你的程式很難用