1.註冊或登陸頁面設計：UILabel，UIButton,UITextField

 

      學習iOS開發已經有一段時日了，以前一直沒有系統的對iOS開發的相關知識進行概括總結，致使不少知識點雲裏霧裏在腦子裏形不成iOS開發的思想，現將本身在學習過程當中遇到的一些知識進行總結，但願能對iOS初學者能有必定的幫助。最初學iOS的時候苦於沒有大神指點，全靠本身一點點摸索，確實走了不少彎路，不但願還有小夥伴跟我同樣走過多的彎路。

　　因爲本人只是從去年11月份纔開始玩iOS（附上本身的學習路線，以下圖），受限於能力，不免有一些不完善或不恰當的地方，但願大神們多多見諒，勿拍磚，有不足或須要完善的地方也但願小夥伴們能多多指教。

　　做爲iOS開發的入門總結的第一篇，這裏以最多見的註冊或登錄頁面設計做爲開篇，這裏主要會用到UILabel，UIButton,UITextField這三個控件。爲了讓繁瑣的知識點介紹不至於太枯燥泛味，我採用「總-->分」的方式來進行講解，即先介紹結果，讓你們提起興趣來，而後再針對結果中遇到的各個知識點來分別進行講解。這樣讀者看起來就能夠各取所取，不須要的地方就能夠直接跳過，節省時間。

 

一.註冊或登陸界面

      以下圖，實現了一個註冊或登陸界面，這裏先只介紹單個頁面，不介紹點擊「完成」按鈕後的動做，在以後的系列《iOS開發入門總結》中會逐步介紹，等基礎知識介紹的差很少了，就能夠以一個完整的註冊系統做爲小結。

     說明：

1. 這裏爲了展示UITextField的文本框關聯鍵盤的設置，這裏把「密碼」和「肯定密碼」的關聯鍵盤都設置爲數字鍵盤，實際應用中密碼通常都容許爲數字或字母。
2. 實現了鍵盤收回操做。
3. 這裏沒有寫對「用戶名」進行特殊字符過濾的代碼。

   實現代碼：

 

  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

View Code

 

 

 

二.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];