在iOS開發及測試中，除了業務邏輯和算法以外，UI控件是最重要的一部分，所以熟悉UI控件及實現原理，對於瞭解開發實現和測試是至關必要的，這篇文章將給你們介紹經常使用的UI控件及實現。
ios
UI相關概念
算法
1. UI微信
UI（User Interface）用戶界面，即用戶能看到的各類各樣的頁面元素，iOS App 主要是由各類各樣的UI控件加業務邏輯和算法構成，想要開發出一款精美的應用程序，須要熟練掌握各類各樣UI控件的用法。app
2. UIWindow編輯器
widow是窗口，每一個app都須要藉助window將內容展示給用戶看，在iOS中，使用UIWindow類來表示窗口，一般一個應用程序只建立一個UIWindow對象；ide
建立window示例代碼：self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];函數
window如何呈現內容？下面咱們將引入UIView；學習
3. UIView測試
view(視圖)表明屏幕上的一個矩形區域。iOS中用UIView來表示視圖，App中能看到的元素，都是UIView及其子類，通俗的說各類UI控件都屬於view，不一樣的控件表明不一樣種類的view。iOS中全部能看到的內容都是view或其子類。字體
建立view的步驟以下:
①開闢空間並初始化視圖(初始化時,給出視圖位置和大小)
②對視圖作一些設置(好比:背景顏色)
③將視圖添加到window上進行顯示
④釋放視圖對象
視圖建立代碼：
UIView *blueView = [[UIView alloc]initWithFrame:CGRectMake(100, 100, 120, 100)];
blueView.backgroundColor = [UIColor blueColor];
[self.window addSubview:blueView];
[blueView release];
UIView做爲全部可視化控件的BaseClass,提供了許多屬性和方法：顯示效果控制(frame、alpha等)、視圖添加和移除(addSubview: 等)、視圖層次調整(bringSubviewToFront:等)等。
4. UIView的屬性frame、bounds、center
1）frame：描述當前視圖在其父視圖中的位置和大小；
frame是一個結構體,包含2部份內容:origin和size。origin也是一個結構體,包含2部份內容：x和y（ios座標系以左上角爲座標原點(0,0)，以原點向右側爲X軸正方向，原點下側爲Y軸正方向）；size一樣是一個結構體,包含2部份內容:width和height，frame的origin和size是相對於父視圖來講的。CGRectMake()函數能夠幫咱們快速構造一個CGRect變量。
-(CGRect)frame{
return CGRectMake(self.frame.origin.x,self.frame.origin.y,self.frame.size.width,self.frame.size.height);
}
2）bounds：描述當前視圖在其自身座標系統中的位置和大小；
bounds(邊界)同frame同樣是一個CGRect結構體變量。當一個view設置bounds時,會把本身當成一個容器,定義本身的邊界大小以及左上角的初始座標。當子視圖添加到此視圖時,會根據bounds指定的原點(0,0)計算frame,而非左上角。
-(CGRect)bounds{
return CGRectMake(0,0,self.frame.size.width,self.frame.size.height);
}
3）center：描述當前視圖的中心點在其父視圖中的位置；
center(中心點)也是個結構體,包含2個部分:x和y，center與frame有着密切的聯繫。
center.x = frame.origin.x + frame.size.width/2;
center.y = frame.origin.y + frame.size.height/2;
bounds和frame和center有着微妙的聯繫（詳見下圖）：
5. UIView的操做方法
1）添加視圖
UIView的addSubview:方法能夠添加子視圖,對於同一個視圖的全部子視圖來說,後添加的子視圖會把已加的子視圖蓋在下面。
UIView提供了其餘添加視圖的方法（詳見下表）：
2）管理視圖層次
UIView除了提供添加視圖的方法,還提供了管理視圖層次的方法（詳見下表）：
3）視圖重要屬性
UIView做爲其餘UI控件的BaseClass,提供了不少屬性（詳見下表）：
經常使用UI控件介紹
UIView其實就是承載各類控件的一個容器，不少的控件都繼承於UIView，只要繼承UIView的控件，那麼就相應的繼承了UIView的各類屬性，能夠說UIView是視圖控件之父。
下表是經常使用UI控件一覽表：
下面詳細介紹幾種最經常使用的控件及屬性：
1. UILabel
1）UILabel是什麼？
（1）UILabel(標籤):是顯示文本的控件，在App中UILabel是出現頻率最高的控件。
（2）UILabel是UIView子類，做爲子類通常是爲了擴充父類的功能,UILabel擴展了文字顯示的功能,UILabel是能顯示文字的視圖。
2 ）如何使用UILabel？
（1）建立UILabel與建立UIView的步驟很類似。
①開闢空間並初始化(若是本類有初始化方法,使用本身的;不然使用父類的)。
②設置文本控制相關的屬性。
③添加到父視圖上,用以顯示。
④釋放。
（2）視圖建立代碼：
UILabel *userNameLabel = [[UILabel alloc]initWithFrame:CGRectMake(30, 100, 100, 30)];
userNameLabel.text = @"用戶名";
[containerView addSubview:userNameLabel];
[userNameLabel release];
3 ）如何控制文本顯示？ UILabel的主要做用是顯示一段文本,所以提供了不少與顯示文本相關的API（詳見下表）
2. UITextField
1）UITextField是什麼？
（1）UITextField(輸入框):是控制文本輸入和顯示的控件。在App中UITextField出現頻率也比較高；
（2）iOS系統藉助虛擬鍵盤實現輸入,當點擊輸入框,系統會自動調出鍵盤,方便 你進一步操做。在你不須要輸入的時候,可使用收回鍵盤的方法,收回彈出的鍵盤；
（3）UITextField和UILabel相比,UILabel主要用於文字顯示,不能編輯, UITextField容許用戶編輯文字(輸入)。
2 ）如何使用UITextField？ 建立UITextField與建立UILabel的步驟很類似。 ①開闢空間並初始化(若是本類有初始化方法,使用本身的;不然使用父類的)； ②設置文本顯示、輸入相關的屬性； ③添加到父視圖上,用以顯示； ④釋放； 3 ）UITextField使用示例： UITextField *userNameTextField = [[UITextField alloc]initWithFrame:CGRectMake(100, 100, 190, 30)];
userNameTextField.borderStyle =UITextBorderStyleRoundedRect;
userNameTextField.placeholder = @"手機號/郵箱";
[containerView addSubview:userNameTextField];
[userNameTextField release];
4 ）UITextField更多
UITextField核心功能主要包含3個方面: ①文本顯示 ②輸入控制 ③外觀配置。
5 ）文本顯示： UITextField提供了許多API方便咱們控制文本的顯示，包括字體顏色、對齊方式、佔位符等等（詳見下表）
6 ）輸入控制： UITextField類提供了許多控制輸入的API，包括密碼模式、鍵盤樣式、自定義鍵盤等（詳見下表）
7 ）外觀控制： UITextField一樣提供了外觀控制的API，包括邊框樣式、清除按鈕、輔助視圖等；
3. UIButton
1 ）UIButton是什麼？ （1）UIButton(按鈕):是響應用戶點擊的控件。在App中UIButton是出現頻率很高的控件；
（2）UIButton與UILabel、UITextField側重點不一樣,側重於處理點按。固然UIButton類也提供了一些方法控制按鈕外觀。
2 ）如何使用UIButton？ 創 建UIButton與建立UILabel、UITextField、UIView的步驟很類似。 ①建立button對象(若是本類有初始化方法,使用本身的;不然使用父類的)； ②設置按鈕顯示相關的屬性； ③爲按鈕添加點擊事件； ④添加按鈕到父視圖上,用以顯示； ⑤按鈕無需釋放(由於使用的是類方法建立的button)。 3 ）UIButton使用示例： UIButton *loginButton = [UIButton buttonWithType:UIButtonTypeSystem]; loginButton.frame = CGRectMake(30, 200, 60, 30); [loginButton setTitle:@"登陸" forState:UIControlStateNormal]; [loginButton addTarget:self action:@selector(login:) forControlEvents:UIControlEventTouchUpInside]; [containerView addSubview:loginButton]; 4 ）UIButton添加事件： UIButton從父類UIControl那繼承了控制相關的方法,好比添加事件、移除事件等。
注:UIButton : UIControl : UIView（詳見下表）
5 ）外觀控制： UIButton提供了外觀控制的API。包括標題、背景圖⽚片、前景圖⽚片等（詳見下表）
總結
該文主要分享了UI相關的概念，重點介紹了全部可視化控件的基類UIView及其屬性和相關方法，並詳細介紹3個最多見的UI控件-UILabel（標籤）、UITextField（輸入框）、UIButton（按鈕）的屬性及其使用，其餘控件的使用都是相似的，瞭解了各類UI控件的屬性及開發使用以後，就能夠在測試用例設計及UI相關測試中，更精準地設計測試用例，針對每一類UI控件根據其屬性設計特定的測試方法。
本次就先記錄這麼多，下一次再見。
但願你們能有所收穫，一塊兒進步、互相學習！
搜狗測試微信號：Qa_xiaoming
搜狗測試QQ粉絲羣：459645679
本文分享自微信公衆號 - 搜狗測試（SogouQA）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。