這里記錄iOS開發(fā)學(xué)習(xí)過程
使用環(huán)境
XCode 7.1 beta
XCode界面
在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)目名稱等及刻,保存目錄岂丘。
左上角設(shè)置設(shè)備類型,然后點(diǎn)擊【運(yùn)行】按鈕
效果销部,是一個(gè)空白的界面摸航,那就對(duì)了制跟,因?yàn)槲覀儧]有放置任何的控件。
增加控件
點(diǎn)擊【Main.storyboard】文件酱虎,這里就可以放置控件了雨膨。
StoryBoard 的本質(zhì)是一個(gè) XML 文件,描述了若干窗體读串、組件聊记、Auto Layout 約束等關(guān)鍵信息。你可以用文本工具打開來看看恢暖。
我們可以從右下角的【庫面板】上排监,把控件拖到View界面上
左下角按鈕可以切換視圖顯示效果。
-
拖動(dòng)一個(gè)Label到View上
設(shè)置Label屬性
點(diǎn)擊右側(cè)的【屬性檢測器】杰捂,可以設(shè)置名稱舆床,字體顏色,字體大小嫁佳,等挨队。
- 登錄界面
在往View上面拖Label,Button,Text,調(diào)整布局,最后效果如下:
【Cammand + R 】運(yùn)行效果:
此時(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】,然后放開馒稍。
選擇我們剛才寫好的userLogin事件皿哨。
我們會(huì)在登錄按鈕的【連接檢測器】上看到關(guān)聯(lián):
如果想去掉關(guān)聯(lián),點(diǎn)擊那個(gè)小小的關(guān)閉按鈕即可纽谒。
我們证膨,再來【Command+R】運(yùn)行下看看,點(diǎn)擊登錄按鈕:
出現(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)擊【右鍵】
鼠標(biāo)移到【New Referencing Outlet】后面的小圓圈上灶似,此時(shí)會(huì)出現(xiàn)一個(gè)加號(hào),然后點(diǎn)擊加號(hào)瑞你,拖動(dòng)到【View Controller】然后放開鼠標(biāo)酪惭,就會(huì)看到我們剛才定義的兩個(gè)屬性了。
選擇tfUserName者甲。
同樣我們可以在文本框的【連接檢測器】上看到關(guān)聯(lián)撞蚕。
同樣我們關(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)行效果:
寫在最后
通過本文,對(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的類的概念。