哈囉爬骤,各位好:
很高興你們又來到這,和我一起Swift莫换。咻咻咻~
今天是我們的第一次互動霞玄,Hello World!。
在這次的教學(xué)當(dāng)中拉岁,也會讓大家知道我們的模式會是怎麼樣坷剧,
基本上每一次的課堂,都會讓你們知道我做出來的一個小專案會是什麼喊暖,我會將每一次的完整的程式碼放在我的Github上面惫企,方便大家下載,也讓我在更新的時候陵叽,容易維護(hù)狞尔。
如果有人想多了解什麼是Github或是該怎麼使用它,恩...好問題巩掺,我會找些資源在這邊提供偏序。
//TODO: 找Github的教學(xué)給大家
專案下載
Hello World <--- 請下載
在每一次的開頭,我都會提供一個可以執(zhí)行的專案檔案胖替,各位可以直接點(diǎn)擊下載研儒,並且執(zhí)行一次豫缨,看看今天要完成的東西是什麼。希望殉摔,每一個專案都會帶來一點(diǎn)樂趣州胳,至少對自己要有:)
請執(zhí)行
並按下??
接著,稍等片刻逸月,讓模擬器完成執(zhí)行栓撞,
然後,你就知道我們這次要做什麼了:)
概要
在這個HelloWorld的專案中碗硬,有幾個重點(diǎn)步驟:
- 開始新專案
- 設(shè)定畫面(Storyboard)
- 連結(jié)畫面(Storyboard)與程式碼(ViewController)
- 設(shè)定程式(ViewController)
- 最後瓤湘,執(zhí)行/除錯
一切都跟溝通有關(guān)
- 人跟這個應(yīng)用怎麼溝通
- 人跟畫面怎麼溝通
- 畫面跟程式碼怎麼溝通
- 程式碼跟電腦/iPhone怎麼溝通
不用擔(dān)心太多,我們執(zhí)行了就知道了
讓我們開始吧恩尾!
1. 開始新專案
對於初學(xué)者來說弛说,使用太強(qiáng)大的應(yīng)用程式,反而帶來很多負(fù)擔(dān)翰意,因?yàn)樵谧铋_始的時候木人,給使用者太多選擇的話,大家反而會不知所措冀偶。
所以在這邊醒第,我會儘量簡化流程,用最簡約的方式達(dá)到我們要的功能进鸠。
請打開Xcode稠曼,創(chuàng)建一個新的Xcode project:
而你將會遇到要選擇版型的部分,請選擇最基本的Single View Application:
接著客年,在ProductName的地方霞幅,打上HelloWorld
再按下右下角的Next,你就完成這個步驟了量瓜!
完成之後司恳,可以試著執(zhí)行一次
按下??
你將會看到:
小細(xì)節(jié)
- Language一定要選擇Swift,指的是要用什麼語言開發(fā)绍傲。
- Devices原則上選iPhone就可以了抵赢,指的是這個應(yīng)用是給iPhone/iPad還是都可
- CoreData是手機(jī)本身的資料庫系統(tǒng),這邊不需要
- Unit Tests和UI Tests唧取,是屬於測試用的铅鲤,這邊也不需要
- Organization Name可以自己取,而可以按到Identifier是類似像網(wǎng)域名稱一樣的結(jié)構(gòu)枫弟,只是是相反的邢享。
2. 設(shè)定畫面(Storyboard)
在這個專案之中,我們只會用到兩個檔案:
ViewController.swift
Main.storyboard
而關(guān)於畫面的任何東西呢淡诗,都會在Main.storyboard
上面完成骇塘。
所以請從畫面左手邊伊履,點(diǎn)選Main.storyboard
:
而畫面正中間的,就是我們的ViewController款违,也是你們剛剛看到的那個白色的畫面唐瀑。
點(diǎn)擊後,可以選擇它插爹,並且看到他的各種屬性
接著哄辣,看到右手邊,確認(rèn)選擇的是像盾牌的Attributes inspector
看到下面赠尾,有各種預(yù)設(shè)的元件可以使用力穗,
請選擇一個Label
標(biāo)籤,以及Button
按鈕
將兩個元件分別拖到畫面中間的ViewController上面:
基本上气嫁,這個步驟完成了当窗!
但是如果現(xiàn)在你去執(zhí)行一次,你會看到寸宵,標(biāo)籤跟按鈕不在我們的位置上崖面,而且我們的畫面現(xiàn)在看起來一點(diǎn)都不有趣,因此梯影,現(xiàn)在要做幾件事情巫员,來調(diào)整一下我們的畫面。
P.S. 如果你很急著想要知道寫程式的部分光酣,可以跳過這一段。
為了讓畫面更好看脉课,現(xiàn)在我們要做6件小事:
- 將Label標(biāo)籤放到畫面正中間
- 將Label標(biāo)籤放大到字體
46
- 將Label標(biāo)籤的字救军,改成
Hello World!
(更改,並按下Enter)
- 將Button按鈕放大到字體
36
- 將Button按鈕放到畫面下方倘零,手指方便按的地方
(將按鈕移到正中間靠近底部的位子之後唱遭,按住Control不放,從按鈕拖曳滑鼠到旁邊的ViewController空白處兩次呈驶,
分別選擇Center Horizontally in Container
和Vertical Spacing to Bottom Layout Guide
再點(diǎn)擊
Update frames
- 將Button按鈕的字拷泽,改成
????
執(zhí)行一次,你將會看到:
小細(xì)節(jié)
- 關(guān)於畫面的設(shè)計(jì)袖瞻,不止storyboard這一個方式司致,之後有機(jī)會再討論
- 關(guān)於Layout,還有很多可以討論聋迎,將會另外用文章解釋脂矫。
3. 連結(jié)畫面(Storyboard)與程式碼(ViewController)
先點(diǎn)選兩個圈圈交疊的圖示,同時顯示storyboard與viewController霉晕。
在這邊庭再,要做兩件事:
- 讓ViewController知道捞奕,Label的存在。
- 產(chǎn)生一個叫做
helloWorldLabel
的outlet
- 讓ViewController知道拄轻,什麼時候Botton被按下了颅围。
- 產(chǎn)生一個叫做
buttonTapped
的action
按住Control不放,從按鈕拖曳滑鼠到程式碼
class ViewController: UIViewController {
之下
接著恨搓,連結(jié)就產(chǎn)生了院促。
4. 設(shè)定程式(ViewController)
在buttonTapped(_ sender: UIButton){}
之中,加上以下的程式碼奶卓。
// 當(dāng)按鈕被按下時一疯,就會執(zhí)行這一段程式碼
@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連結(jié)到畫面中的label
@IBOutlet weak var helloWorldLabel: UILabel!
// 當(dāng)按鈕被按下時墩邀,就會執(zhí)行這一段程式碼
@IBAction func buttonTapped(_ sender: UIButton) {
// 讓Label上的文字,在"Hello World!"和"??"之間切換
if helloWorldLabel.text == "Hello World!" {
helloWorldLabel.text = "??"
} else {
helloWorldLabel.text = "Hello World!"
}
}
}```
好了盏浙!你已經(jīng)完成了眉睹!
5. 執(zhí)行/除錯
按下??
你就可以看到
以上,就是這次的HelloWorld專案废膘,希望參與的你們竹海,有從中間學(xué)到本來不會的東西,也歡迎回饋給我丐黄,讓我知道哪個地方讓你很困惑斋配,或者哪個地方你覺得特別重要。
我們下次見囉灌闺!