第二章:使用Storyboard設(shè)計(jì)用戶界面(二)

下一步我們重命名按鈕。雙擊按鈕然后修改名字為“Hello World”。點(diǎn)擊Xcode中的運(yùn)行按鈕,我們將在仿真器中看到Hello World按鈕如圖。是不是很酷啊?但是當(dāng)我們點(diǎn)擊按鈕,沒有任何反應(yīng)。我們還需要添加一些代碼用于顯示“Hello, World”。


在Hello World按鈕上編程

迄今為止你已經(jīng)完成了HelloWorld app的UI設(shè)計(jì)。是時候開始寫代碼了!在項(xiàng)目導(dǎo)航欄中,你可以看到ViewController.swift。因?yàn)槲覀兪褂玫氖恰癝ingle View Application”項(xiàng)目模板,所以Xcode已經(jīng)在ViewController.swift中生成了ViewController類。為了在按鈕點(diǎn)擊時顯示一條消息,我們需要在文件里寫一些代碼。


Swift和Objecttive-C

如果你以前寫過Objectiv-C代碼,你會發(fā)現(xiàn)Swift中有一個重大改變是將.h和.m文件合并為.swift文件。

選擇代碼文件,然后編輯區(qū)域會立刻顯示源碼。在ViewController中輸入下面的代碼。


輸入完畢后,你的源碼應(yīng)該是這樣的:


剛才寫的代碼的功能是在ViewController類中添加showMessage()方法。Swift中方法的概念對你來說是新概念。我們將會在后面的章節(jié)中介紹。現(xiàn)在,你就幫showMessage()當(dāng)做是一個動作。當(dāng)這個動作被調(diào)用時,iOS將在屏幕上輸出“Hello World”消息。

將代碼和用戶界面關(guān)聯(lián)

在前面說過iOS開發(fā)中最優(yōu)雅的部分就是用戶界面(storyboard)和代碼(.swift文件)相分離。但是這樣的話我們?nèi)绾尾拍茉谟脩艚缑婧痛a之間建立聯(lián)系。

如果使用當(dāng)前的例子進(jìn)行解釋的話,這個問題就轉(zhuǎn)換為:我們?nèi)绾尾拍茉赟toryboard中的“Hello World”button和ViewController中的showMessage()之間建立聯(lián)系。


你需要在“Hello World”button和showMessage()方法之間建立聯(lián)系,這樣的話如果有人按下Hello World button的話,app將會有所回應(yīng)。我們選擇”Main.storyboard“切換回Interface Builder界面。

按住鍵盤上的control鍵,點(diǎn)擊“Hello World“按鈕然后拖拽到View Controller圖標(biāo)上。

同時釋放鼠標(biāo)和鍵盤然后可以在彈出窗口中的Sent Events下面看到“ShowMessage“。選擇它,這樣的話我們就在按鈕和”ShowMessage”方法之間建立了聯(lián)系。

測試你的App

好了,你現(xiàn)在可以開始測試你的第一個App了。點(diǎn)擊“Run”按鈕。如果沒有問題的話,你的app將會在仿真器上正確運(yùn)行。這次運(yùn)行,app將會在你點(diǎn)擊Hello World按鈕時顯示一條歡迎信息。


啟動界面

當(dāng)app開始運(yùn)行時,你會看到如圖顯示的啟動界面。當(dāng)加載界面消失后顯示Hello World程序界面。


一直以來在app啟動后,實(shí)際的app界面運(yùn)行之前,app會率先顯示一張靜態(tài)圖片(我們稱之啟動圖片)。啟動圖片給用戶一個印象:你的app運(yùn)行迅速并且響應(yīng)快速因?yàn)橐粏咏缑婢统霈F(xiàn)了。在iOS 8和Xcode 6中,Apple公司允許開發(fā)者使用Interface Builder創(chuàng)建啟動界面替代靜態(tài)啟動圖片。

在Xcode

6中創(chuàng)建的任何一個項(xiàng)目,你都會看到一個XIB 啟動界面文件,這是默認(rèn)的啟動加載文件。像HelloWorld項(xiàng)目,你可以在項(xiàng)目導(dǎo)航中找到LaunchScreen.xib。默認(rèn)情況下,啟動界面包含了項(xiàng)目的名字和版權(quán)信息。你可以像定制Hello World中view controller一樣定制屏幕信息。同時,你也可以保持默認(rèn)不變。我們將在你完成一個真實(shí)的app后在討論啟動界面。

?修改Button的顏色

在本章結(jié)束之前,我還想和大家分享一件事情。正如在前面提到的,你不需要通過編寫代碼定制UI。這里我向大家演示一下修改一個button的屬性是一件多么簡單的事情。選擇“Hello World”button然后點(diǎn)擊工具區(qū)域的屬性檢查器。這里你可以訪問button的屬性。你可以修改字體,文本顏色,背景顏色等等。在Button Section下面選擇文本顏色為白色,同時在View section下面選擇背景為橘色或者你想要的任何顏色。


下章簡介

首先恭喜大家,你成功創(chuàng)建了你第一個app。這是一個簡單的app,但是我相信大家已經(jīng)對Xcode 6和如何創(chuàng)建一個App有了進(jìn)一步的了解。是不是很簡單啊?

在下一章,我們將會討論Hello World app的細(xì)節(jié)并且解釋每個模塊是如何協(xié)同工作的。

專題目錄:

IOS 8 開發(fā)入門--序言(一)

IOS 8 開發(fā)入門--序言(二)

第一章:創(chuàng)建你的第一個App(一)

第一章:創(chuàng)建你的第一個App(二)

第二章:使用Storyboard設(shè)計(jì)用戶界面(一)

第二章:使用Storyboard設(shè)計(jì)用戶界面(二)

第三章 Hello World App 淺述(二)

第四章 自動布局(一)

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 228,923評論 6 535
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 98,740評論 3 420
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 176,856評論 0 380
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經(jīng)常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,175評論 1 315
  • 正文 為了忘掉前任,我火速辦了婚禮,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 71,931評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 55,321評論 1 324
  • 那天,我揣著相機(jī)與錄音,去河邊找鬼。 笑死,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,383評論 3 443
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 42,533評論 0 289
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 49,082評論 1 335
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 40,891評論 3 356
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 43,067評論 1 371
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,618評論 5 362
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 44,319評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,732評論 0 27
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,987評論 1 289
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,794評論 3 394
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 48,076評論 2 375

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

  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫、插件、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 12,154評論 4 61
  • 小南今年三十歲,是衛(wèi)計(jì)委醫(yī)政科業(yè)務(wù)骨干,單位里,大家對他交口稱贊。 可這次,醫(yī)院工作人員小何來辦事,隨手遞給他兩小...
    順子_lsm閱讀 448評論 2 3
  • 寫在前面的嘮叨 一周前忘了具體時間地點(diǎn),忽然想到這個問題。幸好,我還記得大地震發(fā)生的地點(diǎn)——這樣顯得我沒那么健忘。...
    寫日記的14號閱讀 1,936評論 0 1
  • 感覺我又陷入了一種循環(huán),一旦開始產(chǎn)生感覺,就害怕冷場,總想要掌控局面,落入俗套的情節(jié)。
    一只2b兔子閱讀 121評論 0 0
  • 這篇文章源于我在趁早里面參加的一個21天寫作的活動。你可能在想君君你怎么可以有這么多的活動可以參加啊,其實(shí)還是因?yàn)?..
    萌君君閱讀 243評論 2 1