學習iOS開發已經有一段時日了,之前一直沒有系統的對iOS開發的相關知識進行歸納總結,導致很多知識點雲里霧里在腦子里形不成iOS開發的思想,現將自己在學習過程中遇到的一些知識進行總結,希望能對iOS初學者能有一定的幫助。最初學iOS的時候苦於沒有大神指點,全靠自己一點點摸索,確實走了很多彎路,不希望還有小伙伴跟我一樣走過多的彎路。
由於本人只是從去年11月份才開始玩iOS(附上自己的學習路線,如下圖),受限於能力,難免有一些不完善或不恰當的地方,希望大神們多多見諒,勿拍磚,有不足或需要完善的地方也希望小伙伴們能多多指教。
作為iOS開發的入門總結的第一篇,這里以最常見的注冊或登陸頁面設計作為開篇,這里主要會用到UILabel,UIButton,UITextField這三個控件。為了讓繁瑣的知識點介紹不至於太枯燥泛味,我采用“總-->分”的方式來進行講解,即先介紹結果,讓大家提起興趣來,然后再針對結果中遇到的各個知識點來分別進行講解。這樣讀者看起來就可以各取所取,不需要的地方就可以直接跳過,節省時間。
一.注冊或登錄界面
如下圖,實現了一個注冊或登錄界面,這里先只介紹單個頁面,不介紹點擊“完成”按鈕后的動作,在之后的系列《iOS開發入門總結》中會逐步介紹,等基礎知識介紹的差不多了,就可以以一個完整的注冊系統作為小結。
說明:
- 這里為了展現UITextField的文本框關聯鍵盤的設置,這里把“密碼”和“確定密碼”的關聯鍵盤都設置為數字鍵盤,實際應用中密碼一般都允許為數字或字母。
- 實現了鍵盤收回操作。
- 這里沒有寫對“用戶名”進行特殊字符過濾的代碼。
實現代碼:

1 #import "ViewController.h" 2 3 @interface ViewController () 4 5 @end 6 7 @implementation ViewController 8 9 - (void)viewDidLoad 10 { 11 [super viewDidLoad]; 12 // Do any additional setup after loading the view, typically from a nib. 13 14 //三個UILabel 15 UILabel *nameLabel = [[UILabel alloc]initWithFrame:CGRectMake(10, 60, 80, 37)]; 16 nameLabel.font = [UIFont systemFontOfSize:15]; 17 nameLabel.text = @"用 戶 名:"; 18 nameLabel.backgroundColor = [UIColor clearColor]; 19 nameLabel.textAlignment = NSTextAlignmentLeft; 20 nameLabel.numberOfLines = 2; //用於設置UILabel中文本的行數 21 [self.view addSubview:nameLabel]; 22 [nameLabel release]; 23 24 UILabel *newPasswordLabel = [[UILabel alloc]initWithFrame:CGRectMake(10, 60+40, 80, 37)]; 25 newPasswordLabel.font = [UIFont systemFontOfSize:15]; 26 newPasswordLabel.text = @"密 碼:"; 27 newPasswordLabel.backgroundColor = [UIColor clearColor]; 28 newPasswordLabel.textAlignment = NSTextAlignmentLeft; 29 [self.view addSubview:newPasswordLabel]; 30 [newPasswordLabel release]; 31 32 UILabel *oncePasswordLabel = [[UILabel alloc]initWithFrame:CGRectMake(10, 60+40*2, 80, 37)]; 33 oncePasswordLabel.font = [UIFont systemFontOfSize:15]; 34 oncePasswordLabel.text = @"確認密碼:"; 35 oncePasswordLabel.backgroundColor = [UIColor clearColor]; 36 oncePasswordLabel.textAlignment = NSTextAlignmentLeft; 37 [self.view addSubview:oncePasswordLabel]; 38 [oncePasswordLabel release]; 39 40 41 //三個輸入框 42 UITextField *nameTextField = [[UITextField alloc]initWithFrame:CGRectMake(90, 60, 210, 30)]; 43 nameTextField.placeholder = @"請輸入用戶名"; 44 nameTextField.tag = 1; 45 [nameTextField setSecureTextEntry:NO]; 46 nameTextField.font = [UIFont systemFontOfSize:14]; 47 nameTextField.delegate = self; 48 nameTextField.backgroundColor = [UIColor clearColor]; 49 nameTextField.borderStyle = UITextBorderStyleRoundedRect; 50 [self.view addSubview:nameTextField]; 51 [nameTextField release]; 52 53 UITextField *passwordTextField = [[UITextField alloc]initWithFrame:CGRectMake(90, 60+40, 210, 30)]; 54 passwordTextField.placeholder = @"至少6位數字"; 55 passwordTextField.tag = 2; 56 [passwordTextField setSecureTextEntry:YES]; 57 passwordTextField.font = [UIFont systemFontOfSize:14]; 58 passwordTextField.delegate = self; 59 passwordTextField.backgroundColor = [UIColor clearColor]; 60 passwordTextField.borderStyle = UITextBorderStyleRoundedRect; 61 passwordTextField.keyboardType = UIKeyboardTypeNumberPad; 62 [self.view addSubview:passwordTextField]; 63 [passwordTextField release]; 64 65 UITextField *onceNewPasswordTextField = [[UITextField alloc]initWithFrame:CGRectMake(90, 60+40*2, 210, 30)]; 66 onceNewPasswordTextField.placeholder = @"請再次輸入密碼"; 67 onceNewPasswordTextField.tag = 3; 68 onceNewPasswordTextField.font = [UIFont systemFontOfSize:14]; 69 [onceNewPasswordTextField setSecureTextEntry:YES]; 70 onceNewPasswordTextField.delegate = self; 71 onceNewPasswordTextField.backgroundColor = [UIColor clearColor]; 72 onceNewPasswordTextField.borderStyle = UITextBorderStyleRoundedRect; 73 onceNewPasswordTextField.keyboardType = UIKeyboardTypeNumberPad; 74 [self.view addSubview:onceNewPasswordTextField]; 75 [onceNewPasswordTextField release]; 76 77 78 UIButton *confirmButton = [UIButton buttonWithType:UIButtonTypeRoundedRect]; 79 confirmButton.frame = CGRectMake(110, 60+40*3+20, 100, 37); 80 [confirmButton setTitle:@"確定" forState:UIControlStateNormal]; //正常狀況下button顯示的標題 81 [confirmButton setTitle:@"確定" forState:UIControlStateHighlighted]; //高亮顯示時button的標題 82 confirmButton.backgroundColor = [UIColor redColor]; 83 [confirmButton addTarget:self action:@selector(confirm:) forControlEvents:UIControlEventTouchUpInside];//button被按下又抬起后發生的事件 84 //@selector可以理解為"選擇子",selector是一個指針變量,類似於sender。 這里是將method的方法指定給新建的這個confirmButton 85 [self.view addSubview:confirmButton]; 86 } 87 88 //收回鍵盤 89 - (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event 90 { 91 for (int i = 0; i<4; i++) { 92 UITextField *textField = (UITextField*)[self.view viewWithTag:1+i]; 93 [textField resignFirstResponder]; 94 } 95 } 96 97 - (void)didReceiveMemoryWarning 98 { 99 [super didReceiveMemoryWarning]; 100 // Dispose of any resources that can be recreated. 101 } 102 103 @end
二.UILabel
UILabel繼承了UIView,它可以設置UIView所支持的屬性。
UILabel *label1 = [[UILabel alloc]initWithFrame:CGRectMake(50.0, 20.0, 200.0, 50.0)]; //設置Label的位置和大小 //設置顯示文字 label1.text = @"用戶名"; //設置字體:粗體,正常的是 SystemFontOfSize label1.font = [UIFont boldSystemFontOfSize:20]; //設置文字顏色 label1.textColor = [UIColor orangeColor]; //設置文字位置 label1.textAlignment = UITextAlignmentRight; label2.textAlignment = UITextAlignmentCenter; //設置字體大小適應label寬度 label4.adjustsFontSizeToFitWidth = YES; //設置label的行數 label5.numberOfLines = 2; UIlabel.backgroudColor=[UIColor clearColor]; //可以去掉背景色 //設置高亮 label6.highlighted = YES; label6.highlightedTextColor = [UIColor orangeColor]; //設置陰影 label7.shadowColor = [UIColor redColor]; label7.shadowOffset = CGSizeMake(1.0,1.0); //設置是否能與用戶進行交互 label7.userInteractionEnabled = YES; //設置label中的文字是否可變,默認值是YES label3.enabled = NO; //設置文字過長時的顯示格式 label3.lineBreakMode = UILineBreakModeMiddleTruncation;//截去中間 // typedef enum { // UILineBreakModeWordWrap = 0, // UILineBreakModeCharacterWrap, // UILineBreakModeClip,//截去多余部分 // UILineBreakModeHeadTruncation,//截去頭部 // UILineBreakModeTailTruncation,//截去尾部 // UILineBreakModeMiddleTruncation,//截去中間 // } UILineBreakMode; //如果adjustsFontSizeToFitWidth屬性設置為YES,這個屬性就來控制文本基線的行為 label4.baselineAdjustment = UIBaselineAdjustmentNone; // typedef enum { // UIBaselineAdjustmentAlignBaselines, // UIBaselineAdjustmentAlignCenters, // UIBaselineAdjustmentNone, // } UIBaselineAdjustment;
有時需要設置UILabel中文本的行數,其屬性值默認為1,用於設置該UILabel只能顯示一行文本。
oldPasswordLabel.numberOfLines = 2;
三.UITextField
//初始化textfield並設置位置及大小 UITextField *text = [[UITextField alloc]initWithFrame:CGRectMake(20, 20, 130, 30)]; //當輸入框沒有內容時,水印提示 ,提示內容為“用戶名” //顯示灰色字體,作為提示信息 text.placeholder = @"用戶名"; //設置邊框樣式,只有設置了才會顯示邊框樣式 text.borderStyle = UITextBorderStyleRoundedRect; typedef enum { UITextBorderStyleNone, UITextBorderStyleLine, UITextBorderStyleBezel, UITextBorderStyleRoundedRect } UITextBorderStyle; //設置鍵盤的樣式 text.keyboardType = UIKeyboardTypeNumberPad; typedef enum { UIKeyboardTypeDefault, //默認鍵盤,支持所有字符 UIKeyboardTypeASCIICapable, //支持ASCII的默認鍵盤 UIKeyboardTypeNumbersAndPunctuation, //標准電話鍵盤,支持+*#字符 UIKeyboardTypeURL, //URL鍵盤,支持.com按鈕 只支持URL字符 UIKeyboardTypeNumberPad, //數字鍵盤 UIKeyboardTypePhonePad, //電話鍵盤 UIKeyboardTypeNamePhonePad, //電話鍵盤,也支持輸入人名 UIKeyboardTypeEmailAddress, //用於輸入電子 郵件地址的鍵盤 UIKeyboardTypeDecimalPad, //數字鍵盤 有數字和小數點 UIKeyboardTypeTwitter, //優化的鍵盤,方便輸入@、#字符 UIKeyboardTypeAlphabet = UIKeyboardTypeASCIICapable, } UIKeyboardType; //每輸入一個字符就變成點 用語密碼輸入 text.secureTextEntry = YES; //設置輸入框的背景顏色,此時設置為白色 如果使用了自定義的背景圖片邊框會被忽略掉 text.backgroundColor = [UIColor whiteColor]; //設置背景圖片 text.background = [UIImage imageNamed:@"dd.png"]; //設置背景 text.disabledBackground = [UIImage imageNamed:@"cc.png"]; //設置輸入框內容的字體樣式和大小 text.font = [UIFont fontWithName:@"Arial" size:20.0f]; //設置字體顏色 text.textColor = [UIColor redColor]; //輸入框中是否有個叉號,在什么時候顯示,用於一次性刪除輸入框中的內容 text.clearButtonMode = UITextFieldViewModeAlways; typedef enum { UITextFieldViewModeNever, //從不出現 UITextFieldViewModeWhileEditing, //編輯時出現 UITextFieldViewModeUnlessEditing, //除了編輯外都出現 UITextFieldViewModeAlways //一直出現 } UITextFieldViewMode; //輸入框中一開始就有的文字 text.text = @"一開始就在輸入框的文字"; //是否糾錯 text.autocorrectionType = UITextAutocorrectionTypeNo; typedef enum { UITextAutocorrectionTypeDefault, //默認 UITextAutocorrectionTypeNo, //不自動糾錯 UITextAutocorrectionTypeYes, //自動糾錯 } UITextAutocorrectionType; //再次編輯就清空 text.clearsOnBeginEditing = YES; //內容對齊方式 text.textAlignment = UITextAlignmentLeft; //內容的垂直對齊方式 UITextField繼承自UIControl,此類中有一個屬性contentVerticalAlignment text.contentVerticalAlignment = UIControlContentVerticalAlignmentCenter; //設置為YES時文本會自動縮小以適應文本窗口大小.默認是保持原來大小,而讓長文本滾動 textFied.adjustsFontSizeToFitWidth = YES; //設置自動縮小顯示的最小字體大小 text.minimumFontSize = 20; //首字母是否大寫 text.autocapitalizationType = UITextAutocapitalizationTypeNone; typedef enum { UITextAutocapitalizationTypeNone, 不自動大寫 UITextAutocapitalizationTypeWords, 單詞首字母大寫 UITextAutocapitalizationTypeSentences, 句子的首字母大寫 UITextAutocapitalizationTypeAllCharacters, 所有字母都大寫 } UITextAutocapitalizationType; //return鍵變成什么鍵 text.returnKeyType =UIReturnKeyDone; typedef enum { UIReturnKeyDefault, //默認 灰色按鈕,標有Return UIReturnKeyGo, //標有Go的藍色按鈕 UIReturnKeyGoogle, //標有Google的藍色按鈕,用語搜索 UIReturnKeyJoin, //標有Join的藍色按鈕 UIReturnKeyNext, //標有Next的藍色按鈕 UIReturnKeyRoute, //標有Route的藍色按鈕 UIReturnKeySearch, //標有Search的藍色按鈕 UIReturnKeySend, //標有Send的藍色按鈕 UIReturnKeyYahoo, //標有Yahoo的藍色按鈕 UIReturnKeyYahoo, //標有Yahoo的藍色按鈕 UIReturnKeyEmergencyCall, //緊急呼叫按鈕 } UIReturnKeyType; //鍵盤外觀 textView.keyboardAppearance=UIKeyboardAppearanceDefault; typedef enum { UIKeyboardAppearanceDefault, //默認外觀,淺灰色 UIKeyboardAppearanceAlert, //深灰 石墨色 } UIReturnKeyType; //設置代理 用於實現協議 text.delegate = self; //把textfield加到視圖中 [self.window addSubview:text]; //最右側加圖片是以下代碼 左側類似 UIImageView *image=[[UIImageView alloc] initWithImage:[UIImage imageNamed:@"right.png"]]; text.rightView=image; text.rightViewMode = UITextFieldViewModeAlways; typedef enum { UITextFieldViewModeNever, UITextFieldViewModeWhileEditing, UITextFieldViewModeUnlessEditing, UITextFieldViewModeAlways } UITextFieldViewMode;
在處理密碼等隱私類的信息時,可能需要將輸入的信息隱藏一下。
//每輸入一個字符就變成點 ,用語密碼輸入 [passwordTextField setSecureTextEntry:YES];
也可以設置文本框關聯的鍵盤,如下:
//設置鍵盤的樣式 text.keyboardType = UIKeyboardTypeNumberPad; typedef enum { UIKeyboardTypeDefault, //默認鍵盤,支持所有字符 UIKeyboardTypeASCIICapable, //支持ASCII的默認鍵盤 UIKeyboardTypeNumbersAndPunctuation, //標准電話鍵盤,支持+*#字符 UIKeyboardTypeURL, //URL鍵盤,支持.com按鈕 只支持URL字符 UIKeyboardTypeNumberPad, //數字鍵盤 UIKeyboardTypePhonePad, //電話鍵盤 UIKeyboardTypeNamePhonePad, //電話鍵盤,也支持輸入人名 UIKeyboardTypeEmailAddress, //用於輸入電子 郵件地址的鍵盤 UIKeyboardTypeDecimalPad, //數字鍵盤 有數字和小數點 UIKeyboardTypeTwitter, //優化的鍵盤,方便輸入@、#字符 UIKeyboardTypeAlphabet = UIKeyboardTypeASCIICapable, } UIKeyboardType;
有時需要限制輸入文本的長度,這類操作也非常普遍和重要。
//限制輸入文本的長度 - (BOOL)textField:(UITextField *)textField shouldChangeCharactersInRange:(NSRange)range replacementString:(NSString *)string { if ([textField.text length] > MAXLENGTH) { textField.text = [textField.text substringToIndex:MAXLENGTH-1]; return NO; } return YES; }
四.UIButton
UIButton *button1 = [UIButton buttonWithType:UIButtonTypeRoundedRect]; // 能夠定義的button類型有以下6種, // typedef enum { // UIButtonTypeCustom = 0, 自定義風格 // UIButtonTypeRoundedRect, 圓角矩形 // UIButtonTypeDetailDisclosure, 藍色小箭頭按鈕,主要做詳細說明用 // UIButtonTypeInfoLight, 亮色感嘆號 // UIButtonTypeInfoDark, 暗色感嘆號 // UIButtonTypeContactAdd, 十字加號按鈕 // } UIButtonType; //給定button在view上的位置 button1.frame = CGRectMake(20, 20, 280, 20); //button背景色 button1.backgroundColor = [UIColor clearColor]; //設置button填充圖片 //[button1 setImage:[UIImage imageNamed:@"btng.png"] forState:UIControlStateNormal]; //設置button標題 [button1 setTitle:@"點擊" forState:UIControlStateNormal]; /* forState: 這個參數的作用是定義按鈕的文字或圖片在何種狀態下才會顯現*/ //以下是幾種狀態 // enum { // UIControlStateNormal = 0, 常規狀態顯現 // UIControlStateHighlighted = 1 << 0, 高亮狀態顯現 // UIControlStateDisabled = 1 << 1, 禁用的狀態才會顯現 // UIControlStateSelected = 1 << 2, 選中狀態 // UIControlStateApplication = 0x00FF0000, 當應用程序標志時 // UIControlStateReserved = 0xFF000000 為內部框架預留,可以不管他 // }; /* * 默認情況下,當按鈕高亮的情況下,圖像的顏色會被畫深一點,如果這下面的這個屬性設置為no, * 那么可以去掉這個功能 */ button1.adjustsImageWhenHighlighted = NO; /*跟上面的情況一樣,默認情況下,當按鈕禁用的時候,圖像會被畫得深一點,設置NO可以取消設置*/ button1.adjustsImageWhenDisabled = NO; /* 下面的這個屬性設置為yes的狀態下,按鈕按下會發光*/ button1.showsTouchWhenHighlighted = YES; /* 給button添加事件,事件有很多種,我會單獨開一篇博文介紹它們,下面這個時間的意思是 按下按鈕,並且手指離開屏幕的時候觸發這個事件,跟web中的click事件一樣。 觸發了這個事件以后,執行butClick:這個方法,addTarget:self 的意思是說,這個方法在本類中 也可以傳入其他類的指針*/ [button1 addTarget:self action:@selector(butClick:) forControlEvents:UIControlEventTouchUpInside]; //顯示控件 [self.view addSubview:button1];
單獨說明一下:
UIButton *confirmButton = [UIButton buttonWithType:UIButtonTypeRoundedRect]; confirmButton.frame = CGRectMake(110, 60+40*3+20, 100, 37); [confirmButton setTitle:@"確定" forState:UIControlStateNormal]; //正常狀況下button顯示的標題 [confirmButton setTitle:@"確定" forState:UIControlStateHighlighted]; //高亮顯示時button的標題 confirmButton.backgroundColor = [UIColor redColor]; [confirmButton addTarget:self action:@selector(confirm:) forControlEvents:UIControlEventTouchUpInside];//button被按下又抬起后發生的事件 //@selector可以理解為"選擇子",selector是一個指針變量,類似於sender。 這里是將method的方法指定給新建的這個confirmButton [self.view addSubview:confirmButton];
若要設置UIButton的背景圖片時:
UIButton *confirmButton = [UIButton buttonWithType:UIButtonTypeCustom]; confirmButton.frame = CGRectMake(10, 60, 100, 40); UIImage *nextStepImage = [UIImage imageNamed:@"app.png"]; UIImage *nextStepDownImage = [UIImage imageNamed:@"app.png"]; nextStepImage = [nextStepImage resizableImageWithCapInsets:UIEdgeInsetsMake(8, 8, 8, 8)]; nextStepDownImage = [nextStepDownImage resizableImageWithCapInsets:UIEdgeInsetsMake(8, 8, 8, 8)]; [confirmButton setBackgroundImage:nextStepImage forState:UIControlStateNormal]; [confirmButton setBackgroundImage:nextStepDownImage forState:UIControlStateHighlighted]; [confirmButton setTitle:@"確定" forState:UIControlStateNormal]; [confirmButton addTarget:self action:@selector(confirm:) forControlEvents:UIControlEventTouchUpInside]; [self.view addSubview:confirmButton];