哈囉,各位好:
很高興你們又來到這,和我一起Swift。咻咻咻~
今天是我們的第一次互動,Hello World!。
在這次的教學當中,也會讓大家知道我們的模式會是怎麼樣,
基本上每一次的課堂,都會讓你們知道我做出來的一個小專案會是什麼,我會將每一次的完整的程式碼放在我的Github上面,方便大家下載,也讓我在更新的時候,容易維護。
如果有人想多了解什麼是Github或是該怎麼使用它,恩...好問題,我會找些資源在這邊提供。
//TODO: 找Github的教學給大家
專案下載
Hello World <--- 請下載
在每一次的開頭,我都會提供一個可以執行的專案檔案,各位可以直接點擊下載,並且執行一次,看看今天要完成的東西是什麼。希望,每一個專案都會帶來一點樂趣,至少對自己要有:)
請執行
並按下▶️
接著,稍等片刻,讓模擬器完成執行,
然後,你就知道我們這次要做什麼了:)
概要
在這個HelloWorld的專案中,有幾個重點步驟:
- 開始新專案
- 設定畫面(Storyboard)
- 連結畫面(Storyboard)與程式碼(ViewController)
- 設定程式(ViewController)
- 最後,執行/除錯
一切都跟溝通有關
- 人跟這個應用怎麼溝通
- 人跟畫面怎麼溝通
- 畫面跟程式碼怎麼溝通
- 程式碼跟電腦/iPhone怎麼溝通
不用擔心太多,我們執行了就知道了
讓我們開始吧!
1. 開始新專案
對於初學者來說,使用太強大的應用程式,反而帶來很多負擔,因為在最開始的時候,給使用者太多選擇的話,大家反而會不知所措。
所以在這邊,我會儘量簡化流程,用最簡約的方式達到我們要的功能。
請打開Xcode,創建一個新的Xcode project:
而你將會遇到要選擇版型的部分,請選擇最基本的Single View Application:
接著,在ProductName的地方,打上HelloWorld
再按下右下角的Next,你就完成這個步驟了!
完成之後,可以試著執行一次
按下▶️
你將會看到:
小細節
- Language一定要選擇Swift,指的是要用什麼語言開發。
- Devices原則上選iPhone就可以了,指的是這個應用是給iPhone/iPad還是都可
- CoreData是手機本身的資料庫系統,這邊不需要
- Unit Tests和UI Tests,是屬於測試用的,這邊也不需要
- Organization Name可以自己取,而可以按到Identifier是類似像網域名稱一樣的結構,只是是相反的。
2. 設定畫面(Storyboard)
在這個專案之中,我們只會用到兩個檔案:
ViewController.swift
Main.storyboard
而關於畫面的任何東西呢,都會在Main.storyboard
上面完成。
所以請從畫面左手邊,點選Main.storyboard
:
而畫面正中間的,就是我們的ViewController,也是你們剛剛看到的那個白色的畫面。
點擊後,可以選擇它,並且看到他的各種屬性
接著,看到右手邊,確認選擇的是像盾牌的Attributes inspector
看到下面,有各種預設的元件可以使用,
請選擇一個Label
標籤,以及Button
按鈕
將兩個元件分別拖到畫面中間的ViewController上面:
基本上,這個步驟完成了!
但是如果現在你去執行一次,你會看到,標籤跟按鈕不在我們的位置上,而且我們的畫面現在看起來一點都不有趣,因此,現在要做幾件事情,來調整一下我們的畫面。
P.S. 如果你很急著想要知道寫程式的部分,可以跳過這一段。
為了讓畫面更好看,現在我們要做6件小事:
- 將Label標籤放到畫面正中間
- 將Label標籤放大到字體
46
- 將Label標籤的字,改成
Hello World!
(更改,並按下Enter)
- 將Button按鈕放大到字體
36
- 將Button按鈕放到畫面下方,手指方便按的地方
(將按鈕移到正中間靠近底部的位子之後,按住Control不放,從按鈕拖曳滑鼠到旁邊的ViewController空白處兩次,
分別選擇Center Horizontally in Container
和Vertical Spacing to Bottom Layout Guide
再點擊
- 將Button按鈕的字,改成
👋🏻
執行一次,你將會看到:
小細節
- 關於畫面的設計,不止storyboard這一個方式,之後有機會再討論
- 關於Layout,還有很多可以討論,將會另外用文章解釋。
3. 連結畫面(Storyboard)與程式碼(ViewController)
先點選兩個圈圈交疊的圖示,同時顯示storyboard與viewController。
在這邊,要做兩件事:
- 讓ViewController知道,Label的存在。
- 產生一個叫做
helloWorldLabel
的outlet
- 讓ViewController知道,什麼時候Botton被按下了。
- 產生一個叫做
buttonTapped
的action
按住Control不放,從按鈕拖曳滑鼠到程式碼
class ViewController: UIViewController {
之下
接著,連結就產生了。
4. 設定程式(ViewController)
在buttonTapped(_ sender: UIButton){}
之中,加上以下的程式碼。
// 當按鈕被按下時,就會執行這一段程式碼
@IBAction func buttonTapped(_ sender: UIButton) {
// 讓Label上的文字,在"Hello World!"和"🌏"之間切換
if helloWorldLabel.text == "Hello World!" {
helloWorldLabel.text = "🌏"
} else {
helloWorldLabel.text = "Hello World!"
}
}```
並且可以將`viewDidLoad() `與`didReceiveMemoryWarning()`先刪除,讓畫面單純一些
import UIKit
class ViewController: UIViewController {
// helloWorldLabel連結到畫面中的label
@IBOutlet weak var helloWorldLabel: UILabel!
// 當按鈕被按下時,就會執行這一段程式碼
@IBAction func buttonTapped(_ sender: UIButton) {
// 讓Label上的文字,在"Hello World!"和"🌏"之間切換
if helloWorldLabel.text == "Hello World!" {
helloWorldLabel.text = "🌏"
} else {
helloWorldLabel.text = "Hello World!"
}
}
}```
好了!你已經完成了!
5. 執行/除錯
按下▶️
你就可以看到
以上,就是這次的HelloWorld專案,希望參與的你們,有從中間學到本來不會的東西,也歡迎回饋給我,讓我知道哪個地方讓你很困惑,或者哪個地方你覺得特別重要。
我們下次見囉!