妳好,世界! - 和我一起Swift

哈囉爬骤,各位好:

很高興你們又來到這,和我一起Swift莫换。咻咻咻~

今天是我們的第一次互動霞玄,Hello World!。

在這次的教學(xué)當(dāng)中拉岁,也會讓大家知道我們的模式會是怎麼樣坷剧,

基本上每一次的課堂,都會讓你們知道我做出來的一個小專案會是什麼喊暖,我會將每一次的完整的程式碼放在我的Github上面惫企,方便大家下載,也讓我在更新的時候陵叽,容易維護(hù)狞尔。

如果有人想多了解什麼是Github或是該怎麼使用它,恩...好問題巩掺,我會找些資源在這邊提供偏序。
//TODO: 找Github的教學(xué)給大家

Github教學(xué)影片

專案下載

Hello World <--- 請下載

在每一次的開頭,我都會提供一個可以執(zhí)行的專案檔案胖替,各位可以直接點(diǎn)擊下載研儒,並且執(zhí)行一次豫缨,看看今天要完成的東西是什麼。希望殉摔,每一個專案都會帶來一點(diǎn)樂趣州胳,至少對自己要有:)

請執(zhí)行

HelloWorld.xcodeproj

並按下??

按下??

接著,稍等片刻逸月,讓模擬器完成執(zhí)行栓撞,
然後,你就知道我們這次要做什麼了:)


demoHelloWorld.gif

概要

在這個HelloWorld的專案中碗硬,有幾個重點(diǎn)步驟:

  1. 開始新專案
  2. 設(shè)定畫面(Storyboard)
  3. 連結(jié)畫面(Storyboard)與程式碼(ViewController)
  4. 設(shè)定程式(ViewController)
  5. 最後瓤湘,執(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:

Screen Shot 2016-12-16 at 4.11.49 PM.png

而你將會遇到要選擇版型的部分,請選擇最基本的Single View Application:


Single View Application

接著客年,在ProductName的地方霞幅,打上HelloWorld

NewPorject

再按下右下角的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

Project navigator

而畫面正中間的,就是我們的ViewController款违,也是你們剛剛看到的那個白色的畫面唐瀑。

ViewController

點(diǎn)擊後,可以選擇它插爹,並且看到他的各種屬性


ViewController

接著哄辣,看到右手邊,確認(rèn)選擇的是像盾牌的Attributes inspector

Attributes inspector

看到下面赠尾,有各種預(yù)設(shè)的元件可以使用力穗,
請選擇一個Label標(biāo)籤,以及Button按鈕
將兩個元件分別拖到畫面中間的ViewController上面:

DragElement.gif

基本上气嫁,這個步驟完成了当窗!

但是如果現(xiàn)在你去執(zhí)行一次,你會看到寸宵,標(biāo)籤跟按鈕不在我們的位置上崖面,而且我們的畫面現(xiàn)在看起來一點(diǎn)都不有趣,因此梯影,現(xiàn)在要做幾件事情巫员,來調(diào)整一下我們的畫面。

P.S. 如果你很急著想要知道寫程式的部分光酣,可以跳過這一段。

為了讓畫面更好看脉课,現(xiàn)在我們要做6件小事:

  • 將Label標(biāo)籤放到畫面正中間
addConstraint.gif
  • 將Label標(biāo)籤放大到字體46
FontSize.gif
  1. 將Label標(biāo)籤的字救军,改成Hello World!(更改,並按下Enter)
ChangeLabel.gif
  • 將Button按鈕放大到字體36
  • 將Button按鈕放到畫面下方倘零,手指方便按的地方
    (將按鈕移到正中間靠近底部的位子之後唱遭,按住Control不放,從按鈕拖曳滑鼠到旁邊的ViewController空白處兩次呈驶,
    分別選擇Center Horizontally in ContainerVertical Spacing to Bottom Layout Guide再點(diǎn)擊
    Update frames
addConstraintButton.gif
  • 將Button按鈕的字拷泽,改成????

執(zhí)行一次,你將會看到:

小細(xì)節(jié)

  • 關(guān)於畫面的設(shè)計(jì)袖瞻,不止storyboard這一個方式司致,之後有機(jī)會再討論
  • 關(guān)於Layout,還有很多可以討論聋迎,將會另外用文章解釋脂矫。

3. 連結(jié)畫面(Storyboard)與程式碼(ViewController)

先點(diǎn)選兩個圈圈交疊的圖示,同時顯示storyboard與viewController霉晕。


Show the Assistant editor

在這邊庭再,要做兩件事:

  • 讓ViewController知道捞奕,Label的存在。
  • 產(chǎn)生一個叫做helloWorldLabeloutlet
  • 讓ViewController知道拄轻,什麼時候Botton被按下了颅围。
  • 產(chǎn)生一個叫做buttonTappedaction

按住Control不放,從按鈕拖曳滑鼠到程式碼
class ViewController: UIViewController {
之下

IBOutlet.gif

接著恨搓,連結(jié)就產(chǎn)生了院促。

Connection.gif

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í)行/除錯

按下??

按下??

你就可以看到


demoHelloWorld.gif

以上,就是這次的HelloWorld專案废膘,希望參與的你們竹海,有從中間學(xué)到本來不會的東西,也歡迎回饋給我丐黄,讓我知道哪個地方讓你很困惑斋配,或者哪個地方你覺得特別重要。

我們下次見囉灌闺!

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末艰争,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子桂对,更是在濱河造成了極大的恐慌甩卓,老刑警劉巖,帶你破解...
    沈念sama閱讀 218,941評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件蕉斜,死亡現(xiàn)場離奇詭異逾柿,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)宅此,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,397評論 3 395
  • 文/潘曉璐 我一進(jìn)店門机错,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人父腕,你說我怎么就攤上這事毡熏。” “怎么了侣诵?”我有些...
    開封第一講書人閱讀 165,345評論 0 356
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經(jīng)常有香客問我惭蟋,道長意荤,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,851評論 1 295
  • 正文 為了忘掉前任,我火速辦了婚禮,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘搭儒。我一直安慰自己,他們只是感情好提茁,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,868評論 6 392
  • 文/花漫 我一把揭開白布淹禾。 她就那樣靜靜地躺著,像睡著了一般茴扁。 火紅的嫁衣襯著肌膚如雪铃岔。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,688評論 1 305
  • 那天峭火,我揣著相機(jī)與錄音毁习,去河邊找鬼。 笑死卖丸,一個胖子當(dāng)著我的面吹牛纺且,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播稍浆,決...
    沈念sama閱讀 40,414評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼载碌,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了衅枫?” 一聲冷哼從身側(cè)響起嫁艇,我...
    開封第一講書人閱讀 39,319評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎为鳄,沒想到半個月后裳仆,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體腕让,經(jīng)...
    沈念sama閱讀 45,775評論 1 315
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡孤钦,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,945評論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了纯丸。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片偏形。...
    茶點(diǎn)故事閱讀 40,096評論 1 350
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖觉鼻,靈堂內(nèi)的尸體忽然破棺而出俊扭,到底是詐尸還是另有隱情,我是刑警寧澤坠陈,帶...
    沈念sama閱讀 35,789評論 5 346
  • 正文 年R本政府宣布萨惑,位于F島的核電站捐康,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏庸蔼。R本人自食惡果不足惜解总,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,437評論 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望姐仅。 院中可真熱鬧花枫,春花似錦、人聲如沸掏膏。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,993評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽馒疹。三九已至佳簸,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間行冰,已是汗流浹背溺蕉。 一陣腳步聲響...
    開封第一講書人閱讀 33,107評論 1 271
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留悼做,地道東北人疯特。 一個月前我還...
    沈念sama閱讀 48,308評論 3 372
  • 正文 我出身青樓,卻偏偏與公主長得像肛走,于是被迫代替她去往敵國和親漓雅。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,037評論 2 355

推薦閱讀更多精彩內(nèi)容

  • 為何叫做 shell 朽色? shell prompt(PS1) 與 Carriage Return(CR) 的關(guān)系邻吞?...
    Zero___閱讀 3,153評論 3 49
  • The Art of Jumping Time Lines跳躍時間線的藝術(shù) A Hathor Planetary ...
    愉悅的Gil閱讀 907評論 0 4
  • 已經(jīng)是九月下旬,天氣依舊悶熱葫男,空氣中彌漫著像燒焦的禾秸似的味道抱冷。從窗子向南望去,有郁郁蔥蔥的樹和即將收獲的玉米梢褐。天...
    靜月無風(fēng)閱讀 130評論 0 0
  • 看了素黑的一本書《好好愛自己》盈咳,頗多同感耿眉。 愛是什么?愛是互相反照的鏡子鱼响,你欣賞的某個人鸣剪,一定是從那里投射到了自我...
    容玲閱讀 110評論 0 1
  • 當(dāng)我覺得我必須要離開他的時候,第一個感覺就是,我是那種只能共富貴不能同患難的婊子么筐骇。 認(rèn)識已經(jīng)五個月了债鸡,在一起四個...
    三觀混亂的渣渣閱讀 411評論 5 1