Swift教學- 一起來製作你的第一個iOS App!

You are currently viewing Swift教學- 一起來製作你的第一個iOS App!

下載好Xcode後,最常遇到的問題是不知道要怎麼開始,這一篇要教大家如何快速建立你的第一個Project。一起進入Swift的世界 “Hello, World” !(還沒下載Xcode?你可以參考這一篇:「最新Xcode下載安裝教學」)

Step 1 打開Swift

建立一個Swift Project

Swift教學 Xcode

選擇Single View Application

Swift教學 Single View Application

Swift在建檔時,如果已經清楚知道自己之後要做怎樣格式,可以直接選擇你要的,常用的像是Tabbed Application。一般情況下,會選Single View Application,因為大多格式,都可以在編輯的時候去做更改。

題外話,Xcode的Application非常視覺化,很容易從圖片可知是怎樣的格式。

另外,點選Xcode後,沒有跑出建立的選項,可從另外一個方式開啟Project。

Swift教學 New Project

 

Step 2 選擇你要建立檔案的格式

Swift教學 new project

其中有幾點要比較注意:

1. Organization Identifier 的地方如果你有自己公司的網域名稱

如果你有自己公司的網域名稱可以直接填寫。注意要將com寫在前面。

2. Language選擇Swift

也有Objective C可以選擇,不過如果是要新建立檔案,原則是以Swift為主。

3. Devices選擇Universal

現在較流行是用通用,也是官方推薦的作法,若你的專案還沒有考慮用在iPad上,可先選iPhone,因為iPhone相容iPad。而且,iPad的解析度較高,如果電腦本身的記憶體不夠,在跑模擬器時會跑不動。

4. 最下面三個勾勾

單純練習時,可以不用打勾,不然會多出一些測試用的資料,但是如果是真實產品,建議打勾。你可以在裡面撰寫一些測試的script,他可以幫你自動化地測試,當你在運作時,中間有遇到異常,它會通知你。

 

Step 3 進入Swift Project畫面

Swift教學 swift project

畫面大致分成三個部分

左邊是專案相關的Source Code清單 / 中間是主要編輯畫面/ 右邊有物件的編輯資料

在右上角有此選擇鈕,可以依使用者的習慣調整版面的畫面,讓區塊隱藏或顯示。

Swift教學 source code清單

 

左邊是專案相關的Source Code清單

它只是虛擬化的source group,畫面上的排放方式,和實際硬碟的排放方式是不一樣。不同於android和真實硬碟是一樣的擺放方式,需留意。

 

 

中間是主要編輯畫面

在開啟畫面時,會顯示的是有關檔案的基本資料,其中有幾點可以說明。

Swift教學 Deployment info

Deployment Target 可調整指定最低的資源版本

原則是會預設是最新版本,但是如果是用最新版本,用到真實手機運作時,會遇到很多問題。因為大部分的用戶不一定會都更新到最新,所以在選擇最低的資源版本時,會選前一個版本。

Main Interface可設定主要storyboard的主畫面

main 主畫面 / launch 啟動畫面

Device Orientation手機支援的方向

可選擇在使用你的App時,支援什麼方向。可以依據使用者習慣來做設定,像是製作有影片觀看的App會建議打橫,不要打直。

 

Step 4 點擊Source Code清單的Main storyboard開始編輯

Swift教學 View Controller

畫面上有個箭頭,是storyboard的起始畫面,是可以移動的,待之後有多個畫面操作說明時再詳細解釋。

Swift教學 Label

在右下角的地方,點著並拖拉的方式,將你需要的物件拖至storyboard上。

Swift教學 hello world

點擊物件即可更改內容

也可以透過右側的資料編輯區做修改

Swift教學 Hello World edit

 

Step 5 用模擬器預覽畫面

Swift教學 preview setting

Xcode提供模擬器,在UI方面可以很快知道在實機上會是怎樣的呈現,但是有些功能還是不支援,像是wallet等等。另外,模擬器不用通通都裝,通常會只裝前一個主流版本,除非客戶有說在哪個版本上有遇到問題,而你又沒有實機可以運作。因為每個模擬的檔案都很大,很吃容量,會讓你在跑的時候,速度變很慢。

第一次跑模擬器會比較慢,要耐心等,或是如果你的電腦記憶體比較小,在跑解析度大的機子時,也會比較慢,這時不妨可以選解析度小一點的機子。

打開模擬器後,會發現模擬器的畫面很大,因為預設是1:1的畫面,可在Window調整大小,50%是比較適當的大小。

Swift教學 Simulator

 

模擬器的桌面就會顯示一個你建立的Project,點擊進去就完成囉。

Swift教學 Hello World 成果

 

其他值得注意地方:storyboard尺寸的解析度

storyboard可更改編輯界面編輯界面

調整storyboard的尺寸

也許你會疑惑,以目前apple現役機種中,iPhone和iPad系列相加應該不只有這六款,但是下方顯示的裝置只有六款,是為什麼呢?

因為機子款式多,但是基本的解析度大約就這六種,不會加全部都機子都列上。

整理如下:

4s (3.5 吋) 960 x 640 像素 326 ppi 解析度
 SE/5/5s (4 吋) 1136 x 640 像素 326 ppi 解析度
 7/6 ( 4.7 吋) 1334 x 750 像素 326 ppi 解析度
  7/6 Plus (5.5 吋) 1920 x 1080 像素 401 ppi 解析度
 iPad  (9.7 吋) 2048 x 1536 像素 264 ppi 解析度
 iPad (12.9 吋) 2732 x 2048 像素 264 ppi 解析度

值得一提的是,iPad mini因為每一代解析度不一樣,就須依據適當的解析度來選擇編輯器尺寸,和模擬器的機子。