UI 第1讲 UIView

本讲内容：

• UI 概述
• UIWindow
• UIView

一、UI概述

1、UI（User Interface）：用户界面，用户能看到的各种各样的页面元素。

2、iOS App = 各种各样的UI控件 + 业务逻辑和算法。

3、UI控件

     iOS从最初的iOS 2.0到iOS 7.0，经历了一些变化

     在UI外观上，iOS 7发生了重大变革。以线条为主，倾向于扁平化，更着重于体现应用程序的内容。

     iOS7 7之前的UI外观则以虚拟化为主，注重立体、阴影的搭配。无形中降低了应用程序内容的地位。

二、UIWindow

1、什么是window

     window是窗口，每个App都借助window将内容展现给用户看。

     在iOS中，使用UIWindow类来表示窗口， 通常一个应用程序只创建一个UIWindow对象。

     window的主要作用是呈现内容给用户，我们不会对window做太多操作。

2、如何创建window？

     在创建window的时候，需要指定window的大小。

   通常window的大小（frame）与屏幕（UIScreen）大小一致。

     代码如下 :

          

   self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];

• 创建项目流程：

1、command + shift + N —> iOS 下的 Application —> Empty Application。点击 Next。

2、输入 Product Name，点击 Next。

3、选择项目保存路径，点击 Create。

3、前期创建UI工程以及相应的处理步骤

1. 创建工程，选择Empty Application
   

  2.创建工程后首先关闭ARC（以后 UI 阶段的工程都会关闭香料，如不需要关闭，会特地说明）

 3. 在AppDelegate.m文件里，重写dealloc 方法（释放_window）,并对创建的window对象添加autorelease

4、定义宏动态获取屏幕的高度宽度

三、UIView

1、什么是View？

     1.view（视图）：代表屏幕上的一个矩形区域。iOS中用UIView来表示视图

     2. 不同的控件代表不同的view。

     3.iOS中所有能看到的内容都是view或其子类。

2、如何创建view

 创建视图的步骤如下：
 1、开辟空间并初始化视图（初始化时。给出视图位置和大小）
 2、对视图做一些设置（比如：背景颜色）
 3、将视图添加到 window 上进行显示
 4、释放视图对象

主要代码：

// 创建 UIView 对象，初始化

 UIView  *aView = [[UIView alloc] initWithFrame:(CGRectMake(100, 100, 200, 200))];

// 设置背景颜色   
 aView.backgroundColor = [UIColor blackColor];   
    
 // 显示视图 添加到window上   
 [self.window addSubview:aView]; // 给window添加一个子视图       

 // 释放视图    [aView release];

注意：1、 子视图跟着父视图变化而变化

     2、 所有能看的见是 UI 控件 全是 UIView 的子类

           3、 如果子视图没有在父视图的视图范围内会造成没有点击事件（触摸事件）所有一定要添加到范围内

           4、 UIView 默认的背景颜色 是透明的

3、iOS坐标系：

     iOS提供了用于布局的平面坐标系。左上角为坐标系的原点。

     水平向右：为x的正方向。屏幕最左到最右可划分320等份。

     垂直向下：为y的正方向。屏幕最上到最下可划分480等份（3.5寸屏幕）。

      坐标系不是以像素作为划分依据，而是以“点”作为依据。

4、frame

frame是view的重要属性，使我们做试图布局的关键 ，他决定了视图的大小和位置。

     1.frame是一个结构体，包括2部分内容：origin和size。

     2.origin也是一个结构体，包含2部分内容：x和y。

     3.size同样是一个结构体，包含2部分内容：width和height。

     4.frame的origin和size是相对于父视图来说的。

CGRectMake( )函数可以帮我们快速构造一个CGRect变量。

代码如下：

   UIView *bView = [[UIView alloc] initWithFrame:(CGRectMake(0, 0, 50, 50))];
   // UIView默认的背景颜色 是透明的
   bView.backgroundColor = [UIColor yellowColor];
   [aView addSubview:bView];
   [bView release];

5、center

    1.center（中心点）也是view的重要属性。

     2.center是个结构体，包含2个部分：x和y。

     3.center与frame有着密切的联系。

     4. center.x = frame.origin.x + frame.size.width/2;

         center.y = frame.origin.y + frame.size.height/2;

代码：

 // 改变视图的中心点 就相当于改变元素的位置
    aView.center = CGPointMake(200, 200);

6、bounds

     1.bounds（边界）也是view的重要属性，用于定义自己的边界。它同frame一样是一个CGRect结构体变量。

     2.当一个view设置bounds时，会把自己当成一个容器，定义自己的边界大小 以及 左上角的初始坐标。

     3.当子视图添加到此视图时，会根据bounds指定的原点（0，0）计算frame，而非左上角。

代码：

  // 构建一个Frame结构体
    CGRectMake(200, 200, 200, 200);

    UIView  *aView = [[UIView alloc] initWithFrame:(CGRectMake(100, 100, 200, 200))];

    // 打印Frame结构体函数
    NSLog(@"%@", NSStringFromCGRect(aView.bounds));

打印结果：2015-08-21 14:36:41.426 LessonUIView[2828:363731] {{0, 0}, {200, 200}}

 aView.bounds = CGRectMake(-50, -50, 200, 200);
    NSLog(@"%@", NSStringFromCGRect(aView.bounds));

打印结果： 2015-08-21 14:36:41.427 LessonUIView[2828:363731] {{50, 50}, {200, 200}}

•   改变父视图的bounds 改变的是啥？

      1 、不管你咋改 父视图本身的位置是不会发生改变的

        2 、更改的是子视图的坐标系（原点 0 ， 0 点）
        3 、把 bounds 从 0 ， 0 更改成 10 ， 10 相当于原来的 0 ， 0 点，改成 10 ， 10 点
        我这个子视图 必须要根据 父视图的 0 ， 0 点开始计算

        那么就需要 寻找现在的 0 ， 0 点 从而改变位置

7、bounds、frame、center之间的区别与联系

• frame与bounds

• frame与center

• center与bounds

8、添加视图

     1.UIView的addSubview方法可以添加子视图，对于同一个视图的所有子图来讲，后添加的子视图会把已添加的子视图盖在下面。

// 显示视图 添加到window上
    [self.window addSubview:aView]; // 给window添加一个子视图

    2.UIView的其他添加视图的方法：

9、管理视图层次

      UIView 除了提供添加视图的⽅方法,还提供了管理视图层次的⽅方法。

10、视图重要属性

     UIView 作为其他 UI 控件的 BaseClass ,提供了很多属性。

11、view的重点属性代码：

// （1） 设置透明属性 范围 0 - 1(1是不透明) 默认是不透明
     （子视图的透明度 随着 父视图的变化而变化）
    bView.alpha = 0.5;
    aView.alpha = 0.5;

//（2） 设置视图是否隐藏
    如果父视图隐藏 那么 子视图一样隐藏 （hidden是一个BOOL类型的属性，YES是隐藏，NO是不隐藏）
    bView.hidden = YES;
    aView.hidden = YES;

//（3） 取出所有子视图
    NSArray *subViews = aView.subviews;

//（4） 把子视图 插到 相应的角标位置
    [aView insertSubview:cView atIndex:10];
    [aView insertSubview:bView atIndex:10];

//（5）把视图添加到子视图上面
    [aView insertSubview:bView aboveSubview:cView];
//（6） 把视图添加到子视图的下面
    [aView insertSubview:bView belowSubview:cView];


//（7） 把指定的视图 放到最前面
    [aView bringSubviewToFront:bView];
//（8） 把指定的视图 放在最后面
    [aView sendSubviewToBack:bView];

//（9） 按角标交换两个视图的位置
    [aView exchangeSubviewAtIndex:0 withSubviewAtIndex:1];

//（10）删除父视图上的子视图
    [bView removeFromSuperview];

//（11） 给视图加一个标签
     注意：1、标签的值不能重复
          2、不能为0
    aView.tag = 12000;

    // 在父视图的子视图上面寻找 有无对应标签
     // 这个方法 是由 父视图调用

    UIView *aViewTemp = [self.window viewWithTag:12000];
     aViewTemp.backgroundColor = [UIColor greenColor];

（12）改变父视图颜色
    UIView *cSuperView = [cView superview];
    cSuperView.backgroundColor = [UIColor purpleColor];

• 视图的承继关系