在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源创计划”，欢迎正在阅读的你也加入，一块儿分享。