阿許的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覺得你的程式很難用