iOS學(xué)習(xí)之基礎(chǔ)控件添加和事件綁定

這里記錄iOS開發(fā)學(xué)習(xí)過程

使用環(huán)境

XCode 7.1 beta

Paste_Image.png

XCode界面


Paste_Image.png

在Xcode中很多地方只要用鼠標(biāo)單擊就可以了

XCode的各個(gè)模塊功能說明,可以參照這里的一個(gè)文章闽寡。
http://blog.csdn.net/shulianghan/article/details/38424965

學(xué)習(xí)目標(biāo)

  • 學(xué)會(huì)添加控件
  • 學(xué)會(huì)設(shè)置控件的基本屬性
  • 學(xué)會(huì)綁定控件和事件
  • 學(xué)會(huì)控件和屬性綁定

創(chuàng)建項(xiàng)目

新建項(xiàng)目干签,進(jìn)行設(shè)置項(xiàng)目名稱等及刻,保存目錄岂丘。

Paste_Image.png

左上角設(shè)置設(shè)備類型,然后點(diǎn)擊【運(yùn)行】按鈕

Paste_Image.png

效果销部,是一個(gè)空白的界面摸航,那就對(duì)了制跟,因?yàn)槲覀儧]有放置任何的控件。

增加控件

點(diǎn)擊【Main.storyboard】文件酱虎,這里就可以放置控件了雨膨。

StoryBoard 的本質(zhì)是一個(gè) XML 文件,描述了若干窗體读串、組件聊记、Auto Layout 約束等關(guān)鍵信息。你可以用文本工具打開來看看恢暖。

Paste_Image.png

我們可以從右下角的【庫面板】上排监,把控件拖到View界面上

Paste_Image.png

左下角按鈕可以切換視圖顯示效果。

  • 拖動(dòng)一個(gè)Label到View上


    Paste_Image.png
  • 設(shè)置Label屬性
    點(diǎn)擊右側(cè)的【屬性檢測器】杰捂,可以設(shè)置名稱舆床,字體顏色,字體大小嫁佳,等挨队。

Paste_Image.png
  • 登錄界面
    在往View上面拖Label,Button,Text,調(diào)整布局,最后效果如下:
Paste_Image.png

【Cammand + R 】運(yùn)行效果:

Paste_Image.png

此時(shí)蒿往,基礎(chǔ)界面已經(jīng)搭建完成了盛垦。接下來,我們會(huì)把控件和ViewController進(jìn)行一些關(guān)聯(lián)瓤漏,實(shí)現(xiàn)登錄按鈕的事件腾夯。

控件和事件綁定

在ViewController.h里面,定義userLogin方法:

@interface ViewController : UIViewController
- (IBAction) userLogin:(id)obj;
@end

在ViewController.m里面赌蔑,實(shí)現(xiàn)userLogin方法:

@implementation ViewController
- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
}
- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}
- (IBAction)userLogin:(id)obj {
    UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"Information" message:@"Hellworld" delegate:nil cancelButtonTitle:@"OK" otherButtonTitles:nil];
    [alert show];
}
@end

接下來俯在,我們把登錄按鈕和這個(gè)事件進(jìn)行綁定。
回到【Main.storyboard】上娃惯,點(diǎn)擊登錄按鈕,
按住【Control】鍵肥败,這時(shí)候會(huì)出現(xiàn)帶箭頭的線趾浅,把箭頭指向【View Controller】,然后放開馒稍。

Paste_Image.png

選擇我們剛才寫好的userLogin事件皿哨。
我們會(huì)在登錄按鈕的【連接檢測器】上看到關(guān)聯(lián):

Paste_Image.png

如果想去掉關(guān)聯(lián),點(diǎn)擊那個(gè)小小的關(guān)閉按鈕即可纽谒。

我們证膨,再來【Command+R】運(yùn)行下看看,點(diǎn)擊登錄按鈕:

Paste_Image.png

出現(xiàn)了鼓黔,一個(gè)Hello world彈窗了央勒。
這還不夠不见,我們想把文本框里面的用戶名和密碼顯示出來。

控件和字段綁定

我們?cè)賄iewController.h里面崔步,添加字段稳吮,并相應(yīng)設(shè)置字段的屬性。

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController{
    UITextField *tfUserName;
    UITextField *tfPWD;
}
@property (nonatomic, retain) IBOutlet UITextField *tfUserName;
@property (nonatomic, retain) IBOutlet UITextField *tfPWD;
- (IBAction) userLogin:(id)obj;

@end

再回到【Main.storyboard】,選擇用戶名的文本框井濒,點(diǎn)擊【右鍵】

Paste_Image.png

鼠標(biāo)移到【New Referencing Outlet】后面的小圓圈上灶似,此時(shí)會(huì)出現(xiàn)一個(gè)加號(hào),然后點(diǎn)擊加號(hào)瑞你,拖動(dòng)到【View Controller】然后放開鼠標(biāo)酪惭,就會(huì)看到我們剛才定義的兩個(gè)屬性了。

Paste_Image.png

選擇tfUserName者甲。
同樣我們可以在文本框的【連接檢測器】上看到關(guān)聯(lián)撞蚕。

Paste_Image.png

同樣我們關(guān)聯(lián)密碼的文本框和tfPWD.

關(guān)聯(lián)好后,我們就可以在【ViewController】里面过牙,通過tfUserName和tfPWD來獲取文本框的內(nèi)容了甥厦。

實(shí)現(xiàn)顯示文本框內(nèi)容

在ViewController.m上,增加獲取文本框內(nèi)容和顯示的代碼如下:

@implementation ViewController

@synthesize tfUserName;
@synthesize tfPWD;

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

- (IBAction)userLogin:(id)obj {
    NSString *username = [tfUserName text];
    NSString *pwd = [tfPWD text];
    NSString *message = [NSString stringWithFormat:@"用戶名:%@ 密碼:%@", username, pwd ];
    UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"Information" message:message delegate:nil cancelButtonTitle:@"OK" otherButtonTitles:nil];
    [alert show];
}
@end

為什么要增加兩個(gè)@synthesize,因?yàn)锧synthesize和@property是配對(duì)的寇钉。
讓編譯好器自動(dòng)編寫一個(gè)與數(shù)據(jù)成員同名的方法聲明來省去讀寫方法的聲明刀疙。

運(yùn)行效果:

Paste_Image.png

寫在最后

通過本文,對(duì)iOS界面開發(fā)有了一些的認(rèn)識(shí)扫倡,當(dāng)然這僅僅是第一步谦秧,還需要在深入學(xué)習(xí)。這里只是做一個(gè)學(xué)習(xí)的記錄撵溃。

根據(jù)代碼寫完后疚鲤,需要提出一些思考才會(huì)提升。
比如:

  • IBOutlet和IBAction缘挑,只有定義這兩個(gè)才可以關(guān)聯(lián)集歇,原理是什么。
  • @property和@synthesize的用法语淘,@property還有那些用法诲宇。
  • 需要進(jìn)一步學(xué)習(xí)OC的類的概念。
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末惶翻,一起剝皮案震驚了整個(gè)濱河市姑蓝,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌吕粗,老刑警劉巖纺荧,帶你破解...
    沈念sama閱讀 206,723評(píng)論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異,居然都是意外死亡宙暇,警方通過查閱死者的電腦和手機(jī)输枯,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,485評(píng)論 2 382
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來客给,“玉大人用押,你說我怎么就攤上這事“薪#” “怎么了蜻拨?”我有些...
    開封第一講書人閱讀 152,998評(píng)論 0 344
  • 文/不壞的土叔 我叫張陵,是天一觀的道長桩引。 經(jīng)常有香客問我缎讼,道長,這世上最難降的妖魔是什么坑匠? 我笑而不...
    開封第一講書人閱讀 55,323評(píng)論 1 279
  • 正文 為了忘掉前任血崭,我火速辦了婚禮,結(jié)果婚禮上厘灼,老公的妹妹穿的比我還像新娘夹纫。我一直安慰自己,他們只是感情好设凹,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,355評(píng)論 5 374
  • 文/花漫 我一把揭開白布舰讹。 她就那樣靜靜地躺著,像睡著了一般闪朱。 火紅的嫁衣襯著肌膚如雪月匣。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,079評(píng)論 1 285
  • 那天奋姿,我揣著相機(jī)與錄音锄开,去河邊找鬼。 笑死称诗,一個(gè)胖子當(dāng)著我的面吹牛萍悴,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播粪狼,決...
    沈念sama閱讀 38,389評(píng)論 3 400
  • 文/蒼蘭香墨 我猛地睜開眼退腥,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了再榄?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,019評(píng)論 0 259
  • 序言:老撾萬榮一對(duì)情侶失蹤享潜,失蹤者是張志新(化名)和其女友劉穎困鸥,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 43,519評(píng)論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡疾就,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 35,971評(píng)論 2 325
  • 正文 我和宋清朗相戀三年澜术,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片猬腰。...
    茶點(diǎn)故事閱讀 38,100評(píng)論 1 333
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡鸟废,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出姑荷,到底是詐尸還是另有隱情盒延,我是刑警寧澤,帶...
    沈念sama閱讀 33,738評(píng)論 4 324
  • 正文 年R本政府宣布鼠冕,位于F島的核電站添寺,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏懈费。R本人自食惡果不足惜计露,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,293評(píng)論 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望憎乙。 院中可真熱鬧票罐,春花似錦、人聲如沸泞边。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,289評(píng)論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽繁堡。三九已至沈善,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間椭蹄,已是汗流浹背闻牡。 一陣腳步聲響...
    開封第一講書人閱讀 31,517評(píng)論 1 262
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留绳矩,地道東北人罩润。 一個(gè)月前我還...
    沈念sama閱讀 45,547評(píng)論 2 354
  • 正文 我出身青樓,卻偏偏與公主長得像翼馆,于是被迫代替她去往敵國和親割以。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,834評(píng)論 2 345

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

  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫应媚、插件严沥、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 12,029評(píng)論 4 62
  • 課程歸來,好像還是很多疑惑中姜,很多問題消玄。晚上的航班回深圳跟伏,飛機(jī)上看了一部電影,萬物生長翩瓜,感覺亂七八糟受扳,我可不會(huì)像他們...
    鮑潔閱讀 215評(píng)論 0 0
  • 通過幾年的學(xué)習(xí)和對(duì)自己及培訓(xùn)與理療客戶們拖拉問題的考查,我找到了五種導(dǎo)致拖拉的消極態(tài)度的自我陳述兔跌,它們讓拖拉者區(qū)別...
    昭的私房家伙閱讀 663評(píng)論 1 1
  • 當(dāng)你笑笑的說勘高,我要?jiǎng)h了你。 當(dāng)你笑笑著說坟桅,你要換掉所有聯(lián)系方式华望。 我也只能笑笑。 不再去尋找桦卒。 在記憶里活著就好立美。...
    ee53c9ef7843閱讀 129評(píng)論 0 0
  • 關(guān)注我的粉絲中有中學(xué)生家長,要求我寫一寫關(guān)于作文方面的文章》皆郑現(xiàn)在就冒昧地簡單寫一寫建蹄,不當(dāng)之處,還請(qǐng)高手指正裕偿。 前言...
    一凡李子閱讀 605評(píng)論 1 2