@import url(http://i.cnblogs.com/Load.ashx?type=style&file=SyntaxHighlighter.css);

@import url(/css/cuteeditor.css);

1、View架构

1.1 简介

UIView表示屏幕上的一块矩形区域，它在App中占有绝对重要的地位，因为IOS中几乎所有可视化控件都是UIView的子类。UIView的功能 ：

        1) 管理矩形区域里的内容；

        2) 处理矩形区域中的事件；

        3) 子视图的管理；

        4) 实现动画。

图 11 UIView及子类继承关系

1.2 基本结构体 

       1) CGPoint

       该结构表示在二维坐标系中的坐标点。

struct CGPoint {

    CGFloat x;

    CGFloat y;

};

        2) CGSize

        该结构表示一个矩形的长宽值。

struct CGSize {  

    CGFloat width;  

    CGFloat height;  

};

        3) CGRect

        该结构表示一个矩形在坐标系中的位置。

struct CGRect {  

    CGPoint origin;   

    CGSize size;  

};

这三个结构体均在一个头文件里：CGGeometry.h

1.3 UIView属性

UIView已经声明来一些属性来控制view的显示和行为，若需要可以在程序和 Interface Builder中进行修改。

1.3.1 坐标属性

UIView有三个属性用来控制view的尺寸和位置，其语义如下：

• frame：是CGRect 类型，其成员变量origin是指在父视图的坐标系统中的位置；
• center：是CGPoint类型，其是指子视图的中心点在父视图坐标系统中的位置；
• bounds：是CGRect类型，是指当前视图在自身的坐标系统中的位置。

如图 12所示是frame和center两个属性的差别。

图 12 Frame、center和bounds的差别

1.3.2 透明度属性

1.3.2.1 alpha属性［5］

液晶显示器是由一个个的像素点组成的，每个像素点都可以显示一个由RGBA颜色空间组成的一种色值。其中的A就表示透明度alpha，UIView中alpha是一个浮点值，取值范围0~1.0，表示从完全透明到完全不透明。

alpha的默认值是1.0，但当把alpha的值设置成0以后：

• 当前的UIView和subview都会被隐藏，而不管subview的alpha值为多少。
• 当前UIView会从响应者链中移除，而响应者链中的下一个会成为第一响应者。

另外，更改alpha值时，默认是有动画效果的，这是因为图层在Cocoa中是由Core Animation中CALayer表示的，该动画效果是CALayer的隐含动画。

1.3.2.2 hidden属性

该属性为BOOL类型值，用来表示UIView是否隐藏，默认值是NO。

当值设为YES时^［5］:

• 当前的UIView和subview都会被隐藏，而不管subview的hidden值为多少。
• 当前UIView会从响应者链中移除，而响应者链中的下一个会成为第一响应者

hidden与alpha不同的是，hidden只有两种可能：隐藏或可见，而alpha可以设置多种值，从0～1.0。

1.3.2.3 opaque属性［5］

该属性为BOOL值，UIView的默认值是YES，但UIButton等子类的默认值都是NO。opaque属性是一个合成开关。当设置为YES值时显示本来的颜色，若设置为NO，则与其下层view进行RGB颜色合成。

图 13 opaque属性值差异

前面讲过，显示器中的每个像素点都可以显示一个由RGBA颜色空间组成的色值，比如图 13中有红色和绿色两个图层色块，对于没有交叉的部分，是红色和或绿色，而相交的颜色为黄色。这里的黄色是怎么来的呢？原来，GPU会通过图层一和图层二的颜色进行图层混合，计算出混合部分的颜色，最理想情况的计算公式如下： R = S + D * ( 1 – Sa )

      其中，R表示混合结果的颜色，S是源颜色(位于上层的红色图层一)，D是目标颜色(位于下层的绿色图层二)，Sa是源颜色的alpha值，即透明度。公式中所有的S和D颜色都假定已经预先乘以了他们的透明度。

知道图层混合的基本原理以后，再回到正题说说opaque属性的作用。当UIView的opaque属性被设为YES以后，按照上面的公式，也就是Sa的值为1，这个时候公式就变成了： R = S

即不管D为什么，结果都一样。因此GPU将不会做任何的计算合成，不需要考虑它下方的任何东西(因为都被它遮挡住了)，而是简单从这个层拷贝。这节省了GPU相当大的工作量。由此看来，opaque属性的真实用处是给绘图系统提供一个性能优化开关！

按照前面的逻辑，当opaque属性被设为YES时，GPU就不会再利用图层颜色合成公式去合成真正的色值。因此，如果opaque被设置成YES，而对应UIView的alpha属性不为1.0的时候，就会有不可预料的情况发生。

1.3.3 内容属性

1.3.3.1 contentMode属性

该属性是枚举值，其决定了图像在视图内是怎样的显示方式，其可以决定图像是拉伸或者填满方式来适应视图的变化。当视图的 frame 或 bounds属性发生了width或height值变化，那么将导致视图重新绘制图像的显示方式。

NOTE 

     你可以使用 setNeedsDisplay或者setNeedsDisplayInRect:方法来强制对一个view进行重绘。

      1) 属性值

contentMode属性可以设置的值为如下，默认是UIViewContentModeScaleToFill。

typedef enum {

   UIViewContentModeScaleToFill,

   UIViewContentModeScaleAspectFit,

   UIViewContentModeScaleAspectFill,

   UIViewContentModeRedraw,

   UIViewContentModeCenter,

   UIViewContentModeTop,

   UIViewContentModeBottom,

   UIViewContentModeLeft,

   UIViewContentModeRight,

   UIViewContentModeTopLeft,

   UIViewContentModeTopRight,

   UIViewContentModeBottomLeft,

   UIViewContentModeBottomRight,

} UIViewContentMode;

其中主要分为如下几种：

• ScaleToFill为将图片按照整个区域进行拉伸(会破坏图片的比例)
• ScaleAspectFit将图片等比例拉伸，可能不会填充满整个区域
• ScaleAspectFill将图片等比例拉伸，会填充整个区域，但是会有一部分过大而超出整个区域。
• 至于Top,Left,Right等等就是将图片在view中的位置进行调整。

       2) 示例^［6］

比如在视图中添加一个ImageView，然后修改ImageView内图像的不同显示方式，为了比较效果将图像的背景色设置为绿色。

• UIViewContentModeScaleAspectFill显示

- (void)viewDidLoad {

    [super viewDidLoad];        

    _imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 350, 250)];

    _imageView.image = [UIImage imageNamed:@"monkey"];

    _imageView.contentMode = UIViewContentModeCenter;

    _imageView.backgroundColor = [UIColor greenColor];

    [self.view addSubview:_imageView];

     _imageView.contentMode = UIViewContentModeScaleAspectFill;

} 

• UIViewContentModeScaleAspectFit显示

- (void)viewDidLoad {

    [super viewDidLoad];        

    _imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 350, 250)];

    _imageView.image = [UIImage imageNamed:@"monkey"];

    _imageView.contentMode = UIViewContentModeCenter;

    _imageView.backgroundColor = [UIColor greenColor];

    [self.view addSubview:_imageView];

     _imageView.contentMode = UIViewContentModeScaleAspectFit;

}

1.3.4 subviews属性

该属性为 NSArray <UIView *>类型，即为一个UIView＊类型的数组，并且为只读类型。该属性是指在当前视图中的子视图列表，而数组元素的顺序表示子视图显示的顺序，坐标为0的子视图是处于最底层。

1.3.5 transform属性

1.3.5.1 实现原理

transform是view的一个重要属性,它在矩阵层面上改变view的显示状态,能实现view的缩放、旋转、平移等功能。transform是CGAffineTransform类型的。使用transform后view的frame被真实改变的。CGAffineTransform结构定义为：

struct CGAffineTransform {

    CGFloat a, b, c, d;

    CGFloat tx, ty;

};

　　transform详解

　　在view可以看做有很多像素块构成，可以用(x,y)代表一个像素块，x为宽，y为高。transform就是改变每个像素块的形状。在运算过程中，[x,y,1]表示原来的像素块，而新的像素块[xn,yn,1]是由[x,y,1]乘以矩阵

　　{

　　a, b, 0

　　c, d, 0

　　tx,ty,1

　　}生成的。化简矩阵相乘，公式为

　　xn=ax+cy+tx;

　　yn=bx+dy+ty;

　　这个矩阵的第三列是固定的，所以每次变换时，只需传入前两列的六个参数[a,b,c,d,tx,ty]即可。

　　在CGAffineTransform的生成函数中，大多是两两对应的，一个带make字样，一个没有。带make字样的是直接生成一个新的CGAffineTransform，没有make字样的则是在一个CGAffineTransform的基础上生成新的。

　　其中的缩放、旋转和平移函数都只是修改了CGAffineTransform矩阵中的部分值，从而实现了不同功能，并且返回值均是CGAffineTransform类型。

1.3.5.2 实现的是放大和缩小

       在原来transform的基础上生成一个新的transform。生成新的transform相当于将t' = [sx ，0 ，0，sy ，0， 0]这六个参数代入矩阵中。

则矩阵为    [ sx, 0 ,0

                  0 , sy,0

0 , 0 ,1];

代入公式中，xn=(sx)*x,yn=(sy)*y。所以sx,sy分别代表x轴与y轴上的放大倍数。

CGAffineTransformScale(CGAffineTransform t,CGFloat sx, CGFloat sy);

CGAffineTransformMakeScale(CGFloat sx, CGFloat sy);

若希望对某个视图进行缩放，但对视图内部的控件则保持原大小，那么可以通过坐标转换实现。如下所示, _parentView为进行缩放的视图，_subView为保持不变的视图，self.view为_parentView的父视图：

1 - (IBAction)downbutton:(id)sender {    

2     CGRect subFrame = _subView.frame;

3     CGRect parFrame = [self.view convertRect:subFrame fromView:_subView];

4     _parentView.transform = CGAffineTransformScale(_parentView.transform,0.5, 0.5);;

5     

6     CGRect conFrame = [self.view convertRect:parFrame toView:_parentView];

7     conFrame.origin = subFrame.origin;

8     [_subView setFrame:conFrame];

9 }

1.3.5.3 实现的是旋转

      angle为弧度值，即当angle为3.14时，则旋转180度。矩阵的六个参数为t' = [ cos(angle)，sin(angle)，-sin(angle)，cos(angle) , 0, 0];

CGAffineTransformRotate(CGAffineTransform t,CGFloat angle)

CGAffineTransformMakeRotation(CGFloat angle);

1.3.5.4 实现的是平移

矩阵的六个参数为t' = [1，0，0，1，tx，ty] ;代入公式，xn=x+tx,yn=y+ty。

CGAffineTransformTranslate(CGAffineTransform t,CGFloat tx, CGFloat ty);

CGAffineTransformMakeTranslation(CGFloat tx,CGFloat ty);

1.4 界面元素：window（窗口）、视图（view）

UIWindow是一种特殊的UIView，通常在一个app中只会有一个UIWindow。iOS程序启动完毕后，创建的第一个视图控件就是UIWindow，接着创建控制器的view，最后将控制器的view添加到UIWindow上，于是控制器的view就显示在屏幕上了。其中这个view称为根视图或是初始化视图，一般也只有一个。

1.5创建UIView

有两种方式创建view对象，Interface Builder和Programmatically。

1.5.1 Interface Builder

最简单的方式是使用图形界面的Interface Builder方法，通过这种方式能够从对象库中拖拽一个view对象到interface，安排它们的层次结构并对其配置，同时能够将这些view连接到代码中，从而实现它们的行为。可以参考《Interface Builder User Guide》文档。若创建完view后，可以在代码中获得view对象的controller，如：

1 swift实现：

2     var blue:blueViewController! blue = storyboard?.instantiateViewControllerWithIdentifier("blue") as! blueViewController; 

3 Object－C实现：

4     blueViewController* blue = [self.storyboard instantiateViewControllerWithIdentifier:@"blue"];

1.5.2 Programmatically

还可以通过程序进行创建，其中可以使用标准的allocation/initialization模式。默认的initialization方法是initWithFrame，可以该方法初始化view尺寸和相对位置。比如object c实现为：

CGRect  viewRect = CGRectMake(0, 0, 100, 100);

UIView* myView = [[UIView alloc] initWithFrame:viewRect];

2、View层次结构

管理视图的层次结构对应用开发来说是一个很重要的部分，对视图的组织即影响视图的显示，又影响事件是如何响应的。如图 21所示的Clock应用。

图 21 view层次结构

2.1 增加和移除子视图（subview）

一个UIView里面可以包含许多的Subview（其他的UIView），而这些 Subview 彼此之间是有所谓的阶层关系，这有点类似绘图软体中图层的概念，其中第0层是在最低下，即层数越高越在上层，从而上层的视图会遮住下层的视图。如所示表 21时UIView的常用方法。

表 21 UIView常用方法

如下的程序是在父视图控制器中实现两个子视图之间的切换：

 1 func viewMove(from:UIViewController!,to:UIViewController!){

 2         let subViewNun = self.view.subviews.count //为视图的层数，待会将to视图放在最上层。

 3             if from != nil{

 4                 from!.willMoveToParentViewController(nil);

 5                 from!.view.removeFromSuperview();//调用子视图方法，从父视图中移除子视图。

 6                 from!.removeFromParentViewController();

 7             }

 8             if to != nil{

 9             to. view.frame = view.frame//设置子视图的框架与父视图一样

10                 self.addChildViewController(to!)//将子视图控制器添加到父视图的subview controller列表中

11                 self.view.insertSubview(to!.view, atIndex: subViewNun)//将子视图添加到父视图的subview列表中

12                 to!.didMoveToParentViewController(self) //调用子视图控制器方法，表明视图图发生变化了

13             }

14 }

当添加一个subview到另一个view中，UIKit即会通知父视图，又会通知子视图发生视图内容发生变化了。所以如果实现了定制的view，那么可以通过重载willMoveToSuperview, willMoveToWindow, willRemoveSubview, didAddSubview, didMoveToSuperview或didMoveToWindow方法来拦截这些消息，可以通过这些消息来更新相关的视图层次结构的状态或信息。

2.2 隐藏视图

为了隐藏视图的可见性，可以通过将"hidden"属性设置为yes，或者是将"alpha"属性值设置为0.0。被隐藏的视图不会再从系统中接收到触摸事件，当隐藏的视图还是会参加一些布局操作。其中若需要在隐藏时设置动画操作，那么只能通过修改alpha属性，而不能修改hidden属性，因为hidden不是animation属性。

Important：

如果要对第一响应者进行隐藏操作时，那么系统不会取消该视图的第一响应。所以当有消息到来时，仍然会把消息传递给这个被隐藏的视图，若要取消其事件的接收，需要手动进行取消。

2.3 加载视图

在视图的层次结构中获得其层次结构的子视图，有如下两种方式：

• 可以先存储某个子视图的指针，然后就可以获取子视图；
• 在层次结构中的任何一个视图调用viewWithTag:方法就能获取指定的视图；

也可以通过"Storyboard ID"值获得UIViewController，然后获得其view，如：

1 UIViewController *parentViewController = [self.storyboard instantiateViewControllerWithIdentifier:@"parentView"];

2 UIView *_parentView = parentViewController.view;

2.3.1 指针方式

可以在一个合适的地方创建一个指向视图的指针，那么就可以通过这个指针获取相应的视图，这种方式非常简单和普遍。如果使用Interface Builder创建视图，那么可以将该视图 outlets到视图控制器中，从而能方便获得。

2.3.2 tag方式

可以通过UIView的viewWithTag:方法获取指定值的子视图，该方法是从当前视图开始向子视图搜索，可以搜索多层子视图。

 UIView *subView = [self.view viewWithTag:22];

设置视图的tag值有两种方式：

• interface builder

可以在interface builder设置tag值，但是需要先添加到视图的层次结构中，才能搜索到。

图 22 interface builder 设置tag值

• programmatically

[self.view setTag:1];

2.4 转换坐标

在一个视图的层次结构中，可以在不同的坐标系统中实现坐标值转换。这种转换是指在同一个平面中的点，在不同坐标值。其中UIView提供如下的方法：

- (CGPoint)convertPoint:(CGPoint)point fromView:(UIView *)view

- (CGRect)convertRect:(CGRect)rect fromView:(UIView *)view

- (CGPoint)convertPoint:(CGPoint)point toView:(UIView *)

- (CGRect)convertRect:(CGRect)rect toView:(UIView *)view

注意：

    convert...:fromView: 方法是从其它坐标系统的坐标值转换到当前坐标系统中；

    convert...:toView:方法是从当前坐标系统的坐标值转换到其它坐标系统中。

      当对旋转的视图进行坐标转换时，其矩阵的尺寸会发生变化。如图 23所示，右边最内层的紫色矩形是在转换前的视图，而紫色矩形外的浅绿色是转换后的矩形。

图 23 旋转视图的转换

如下是从父视图的坐标值简单转换到子视图中：

 1 -(void) convert

 2 {

 3     CGRect  viewRect = CGRectMake(20, 20, 100, 100);

 4     UIView* myView = [[UIView alloc] initWithFrame:viewRect];

 5     [myView setBackgroundColor:[UIColor yellowColor]];

 6     [myView setTag:23];

 7     [self.view addSubview:myView];

 8     

 9     CGRect rect = [self.view bounds];

10     CGPoint oright = rect.origin;

11     

12     CGRect parentRect = [myView convertRect:rect toView:self.view];

13     CGPoint parentPoint = [myView convertPoint:oright toView:self.view];

14     

15     NSLog(@"sub:%f",oright.x);

16     NSLog(@"parent:%f",parentPoint.x);

17 }

18 2016-01-23 21:42:08.559 viewProject[3402:399380] sub:0.000000

19 2016-01-23 21:42:08.560 viewProject[3402:399380] parent:20.000000

2.5 自适应布局

当父视图的尺寸和位置发生了改变，那么其相应子视图应该适应父视图的变化。

子视图为了适应父视图的变化，可以设置子视图的autoresizingMask属性，从而当父视图发生变化，那么子视图也能相应发生变化。其中autoresizingMask属性可以设置如表 22所示的各种值。若设置了autoresizingMask某一项值，那么该项就动态适应父视图的变化；若没有设置的项则保持原来固定的尺寸或位置。

表 22 autoresizingMask值

注意：

若失通过Interface Builder创建子视图，也可以在inspector设置子视图的自动布局。不过在inspector的设置与通过autoresizingMask设置的方式是相反的，设置autoresizingMask某项值，表示该项是自动适应，而设置了inspector某项值，表示该项固定值。

如下是通过对比设置了autoresizingMask属性后的对比图：

      1) 不手动设置autoresizingMask值

 1 -(void) autoresizing

 2 {

 3     UIViewController *parentViewController = [self.storyboard instantiateViewControllerWithIdentifier:@"parentView"];

 4     _parentView = parentViewController.view;

 5     [self.view addSubview:_parentView];

 6     

 7     CGRect  viewRect = CGRectMake(20, 20, 100, 100);

 8     UIView* subView = [[UIView alloc] initWithFrame:viewRect];

 9     [subView setBackgroundColor:[UIColor yellowColor]];

10     [_parentView addSubview:subView];

11 }

12 

13 - (IBAction)downbutton:(id)sender {   //按钮相应操作

14     CGRect rect = CGRectMake(0, 0, 200, 200);

15     [_parentView setBounds:rect];  

16 }

           

图 24 不设置autoresizingMask值的变化图

       2) 手动设置autoresizingMask值

 1 -(void) autoresizing

 2 {

 3     UIViewController *parentViewController = [self.storyboard instantiateViewControllerWithIdentifier:@"parentView"];

 4     _parentView = parentViewController.view;

 5     [self.view addSubview:_parentView];

 6     

 7     CGRect  viewRect = CGRectMake(20, 20, 100, 100);

 8     UIView* subView = [[UIView alloc] initWithFrame:viewRect];

 9 [subView setBackgroundColor:[UIColor yellowColor]];

10     subView.autoresizingMask = UIViewAutoresizingFlexibleLeftMargin|UIViewAutoresizingFlexibleWidth |

11     UIViewAutoresizingFlexibleRightMargin|UIViewAutoresizingFlexibleTopMargin|UIViewAutoresizingFlexibleHeight|                                   UIViewAutoresizingFlexibleBottomMargin;

12     [_parentView addSubview:subView];

13 }

14 

15 - (IBAction)downbutton:(id)sender {   //按钮相应操作

16     CGRect rect = CGRectMake(0, 0, 200, 200);

17     [_parentView setBounds:rect];  

18 }

                      

图 25 设置autoresizingMask值的变化图

3、ViewController

3.1 简介

在mvc设计模式中，controller对象提供特定的逻辑，负责连接应用程序的data和view，而且将data展示给用户。在ios应用程序中，view controller是一个特殊类型的controller对象，可以使用它来展示和管理一系列view，同时能够应用它从一个屏幕转到另一个屏幕。

每种UIView都可以指定一个UIViewController类或子类对其进行管理，当然也不是每种UIView都需要UIViewController类，其中将需要UIViewController的UIView称作content view（内容视图），因为这些content view是应用程序的主要容器。

在storyboard中将UIView和UIViewController合称为scene，并且在storyboard中不能独立存在UIView对象或组件，而是需要将UIView组件放置在UIViewController内（可放置多个），但是在xib文件中却是可以独立存在的。也就是说在content view中可以放置普通的UIView和容器类型的UIView，这样将放置在content view的UIView称为子view，而将content view称作父view。在content view中的子view是于图像的层次结构进行组织的，即上层的view可能会阻挡下层view的视线。如图 31所示的view层次结构，其中RootView需要放置在UIViewController中。

图 31s

View controller类型：

• custom：这是一种用于表示屏幕显示内容的控制器对象。
• container：这是一种特殊的view controller对象，它负责管理其它view controller对象，并定义view之间的导航关系。比navigation, tab bar和split view controllers
• modal：这既是custom view controller，又是container view controller，

图 32

4、参考文献

[1] View Programming Guide for IOS

[2] 《Beginning iPhone Development with Swift Exploring the iOS SDK-Apress(2014)》Chapter6

[3] http://blog.csdn.net/chengyingzhilian/article/details/7894276

[4] http://www.gowhich.com/blog/543

[5] http://blog.csdn.net/martin_liang/article/details/40739845

[6] 示例程序：https://github.com/Shawn-WangDapeng/ViewContentModeDemo