前言

    NS_CLASS_AVAILABLE_IOS(2_0) @interface UIView : UIResponder <NSCoding, UIAppearance, UIAppearanceContainer, UIDynamicItem, UITraitEnvironment, UICoordinateSpace, UIFocusEnvironment>
    
    @available(iOS 2.0, *)       public class UIView : UIResponder, NSCoding, UIAppearance, UIAppearanceContainer, UIDynamicItem, UITraitEnvironment, UICoordinateSpace, UIFocusEnvironment

• 苹果将控件的共同属性都抽取到父类 UIView 中，所有的控件最终都继承自 UIView。UIView 最纯洁、最干净的控件，拥有尺寸、位置、背景色等基本属性。

• view：翻译过来是页面的意思，iOS 有层的概念。

1、View 的创建

• UIView 创建出来默认是透明的，在 iOS6 的时候是白色的。

• Objective-C

      // 实例化 view 对象，并设置 view 大小
      UIView *view = [[UIView alloc] initWithFrame:CGRectMake(10, 20, 200, 100)]; 
  
      // 将 view 加到 window 上显示出来
      [self.view addSubview:view];

• Swift

      // 实例化 view 对象，并设置 view 大小
      let view:UIView = UIView(frame: CGRectMake(10, 20, 200, 100))
  
      // 将 view 加到 window 上显示出来
      self.view.addSubview(view)

2、View 的设置

• Objective-C

      // 设置 frame
      /*
          frame：控件矩形框在父控件中的位置和尺寸，以父控件的左上角为坐标原点
      */
      view.frame = CGRectMake(10, 20, 200, 100);
  
      // 设置 bounds
      /*
          bounds：控件矩形框的位置和尺寸，以自己左上角为坐标原点，所以 bounds 的 x、y 一般为 0
      */
      view.bounds = CGRectMake(0, 0, 200, 100);
  
      // 设置中心位置
      /*
          控件中点的位置，以父控件的左上角为坐标原点
      */
      view.center = self.view.center; 
  
      // 设置背景颜色
      view.backgroundColor = [UIColor greenColor];
  
      // 设置背景颜色半透明
      view.backgroundColor = [[UIColor blackColor] colorWithAlphaComponent:0.5];
  
      // 设置视图透明度
      /*
          范围：0.0 ~ 1.0 ，0.0 透明，1.0 不透明（默认）
          视图上的文字等内容的透明度也同时被改变
      */
      view.alpha = 1.0;
  
      // 设置 tag 值
      /*
          用于区分不同的 view ，所有继承 view 的类对象都可以设置 tag 值
      */
      view.tag = 100;
  
      // 设置用户交互属性
      /*
          YES：打开用户交互属性，NO：关闭用户交互属性
      */
      view.userInteractionEnabled = YES;  
  
      // 设置圆脚边框
      /*
          cornerRadius：圆角半径
          masksToBounds：子图层是否剪切图层边界，默认为 NO
      */
      view.layer.cornerRadius = 20;
      view.layer.masksToBounds = YES;
  
      // 设置边框
      /*
          borderWidth：边框粗细
          borderColor：边框颜色
      */
      view.layer.borderWidth = 5;
      view.layer.borderColor = [[UIColor blueColor] CGColor];    
  
      // 不允许子视图的范围超过父视图的范围
      /*
          不允许 view 的子视图的范围超过 view 的范围，在父视图上设置
      */
      view.clipsToBounds = NO;
  
      // 获得自己的所有子控件对象
      /*
          数组元素的顺序决定着子控件的显示层级顺序（下标越大的，越显示在上面）
      */
      NSArray *subviews = self.view.subviews;
  
      // 获得自己的父控件对象
      UIView *superview = self.view.superview;
  
      // 从父视图中移除
      [view removeFromSuperview];
  
      // 根据一个 tag 标识找出对应的控件
      UIView *view = [self.view viewWithTag:100];

• Swift

      // 设置 frame
      /*
          控件矩形框在父控件中的位置和尺寸，以父控件的左上角为坐标原点
      */
      view.frame = CGRectMake(10, 20, 200, 100)
  
      // 设置 bounds
      /*
          控件矩形框的位置和尺寸，以自己左上角为坐标原点，所以 bounds 的 x、y 一般为 0
      */
      view.bounds = CGRectMake(0, 0, 200, 100)
  
      // 设置中心位置
      /*
          控件中点的位置，以父控件的左上角为坐标原点
      */
      view.center = self.view.center
  
      // 设置背景颜色
      view.backgroundColor = UIColor.greenColor()
  
      // 设置背景颜色半透明
      view.backgroundColor = UIColor.blackColor().colorWithAlphaComponent(0.5)
  
      // 设置视图透明度
      /*
          范围：0.0 ~ 1.0 ，0.0 透明，1.0 不透明（默认）
          视图上的文字等内容的透明度也同时被改变
      */
      view.alpha = 1.0
  
      // 设置 tag 值
      /*
          用于区分不同的 view ，所有继承 view 的类对象都可以设置 tag 值
      */
      view.tag = 100
  
      // 设置用户交互属性
      /*
          true：打开用户交互属性，false：关闭用户交互属性
      */
      view.userInteractionEnabled = true
  
      // 设置圆脚边框
      /*
          cornerRadius：圆角半径
          masksToBounds：子图层是否剪切图层边界，默认为 false
      */
      view.layer.cornerRadius = 20
      view.layer.masksToBounds = true
  
      // 设置边框
      /*
          borderWidth：边框粗细
          borderColor：边框颜色
      */
      view.layer.borderWidth = 5
      view.layer.borderColor = UIColor.blueColor().CGColor
  
      // 子视图的范围不允许超过父视图的范围
      /*
          不允许 view 的子视图的范围超过 view 的范围，在父视图上设置
      */
      view.clipsToBounds = true
  
      // 获得自己的所有子控件对象
      /*
          数组元素的顺序决定着子控件的显示层级顺序（下标越大的，越显示在上面）
      */
      let subviews:Array = self.view.subviews
  
      // 获得自己的父控件对象
      let superview:UIView? = self.view.superview
  
      // 从父视图中移除
      view.removeFromSuperview()
  
      // 根据一个 tag 标识找出对应的控件
      let view:UIView? = self.view.viewWithTag(100)

3、View 的层次设置

• 在 iOS 中后添加的 View 在上层。

• Objective-C

      // 放到最上层
      /*
          将 view1 放到最上层，层次关系 view2.view3.view1
      */
      [self.view bringSubviewToFront:view1]; 
  
      // 放倒最下面
      /*
          将 view3 放倒最下面，层次关系 view3.view1.view2
      */
      [self.view sendSubviewToBack:view3]; 
  
      // 位置进行交换
      /*
          将 view1 和 view3 位置进行交换，层次关系 view3.view2.view1
      */
      [self.view exchangeSubviewAtIndex:0 withSubviewAtIndex:2];
  
      // 放在上面
      /*
          将 view1 放在 view3 上面，层次关系 view2.view3.view1
      */
      [self.view insertSubview:view1 aboveSubview:view3]; 
  
      // 放在下面
      /*
          将 view3 放在 view2 下面，层次关系 view1.view3.view2
      */
      [self.view insertSubview:view3 belowSubview:view2];  
  
      // 放在 n 位置
      /*
          将 view1 放在1的位置，层次关系 view2.view1.view3
      */
      [self.view insertSubview:view1 atIndex:1];

• Swift

      // 放到最上层
      /*
          将 view1 放到最上层，层次关系 view2.view3.view1
      */
      self.view.bringSubviewToFront(view1)
  
      // 放倒最下面
      /*
          将 view3 放倒最下面，层次关系 view3.view1.view2
      */
      self.view.sendSubviewToBack(view3)
  
      // 位置进行交换
      /*
          将 view1 和 view3 位置进行交换，层次关系 view3.view2.view1
      */
      self.view.exchangeSubviewAtIndex(0, withSubviewAtIndex: 2) 
  
      // 放在上面
      /*
          将 view1 放在 view3 上面，层次关系 view2.view3.view1
      */
      self.view.insertSubview(view1, aboveSubview: view3)
  
      // 放在下面
      /*
          将 view3 放在 view2 下面，层次关系 view1.view3.view2
      */
      self.view.insertSubview(view3, belowSubview: view2)
  
      // 放在 n 位置
      /*
          将 view1 放在1的位置，层次关系 view2.view1.view3
      */
      self.view.insertSubview(view1, atIndex: 1)

4、View 的旋转与缩放设置

• Objective-C

  • 单一形变

        // 控件的形变属性
        @property(nonatomic) CGAffineTransform transform;
    
        // 旋转
        /*
            (CGFloat angle) 旋转 45 度，需要输入的参数为弧度，45/180 * M_PI，1 度 ＝ PI/180 弧度
        */
        self.testView.transform = CGAffineTransformMakeRotation(0.25 * M_PI);
    
        [self.testView.layer setAffineTransform: CGAffineTransformMakeRotation(0.25 * M_PI)];
    
        // 缩放
        /*
            (CGFloat sx, CGFloat sy) (1, 2) 宽度和高度的放大倍数
        */
        self.testView.transform = CGAffineTransformMakeScale(1, 2);
    
        [self.testView.layer setAffineTransform: CGAffineTransformMakeScale(1, 2)];
    
        // 平移
        /*
            (CGFloat tx, CGFloat ty) (100, 100) 水平和垂直方向的移动距离
        */
        self.testView.transform = CGAffineTransformMakeTranslation(100, 100);
    
        [self.testView.layer setAffineTransform: CGAffineTransformMakeTranslation(100, 100)];

  • 叠加形变

        // 旋转 + 缩放
        CGAffineTransform rotationTransform = CGAffineTransformMakeRotation(0.25 * M_PI);
        self.testView.transform = CGAffineTransformScale(rotationTransform, 2, 2);
    
        // 旋转 + 平移
        CGAffineTransform rotationTransform = CGAffineTransformMakeRotation(0.25 * M_PI);
        self.testView.transform = CGAffineTransformTranslate(rotationTransform, 200, 100);
    
        // 缩放 + 平移
        CGAffineTransform scaleTransform = CGAffineTransformMakeScale(2, 2);
        self.testView.transform = CGAffineTransformTranslate(scaleTransform, 100, 100);
    
        // 旋转 + 缩放 + 平移
        CGAffineTransform rotationTransform = CGAffineTransformMakeRotation(0.25 * M_PI);
        CGAffineTransform rotationScaleTransform = CGAffineTransformScale(rotationTransform, 2, 2);
        self.testView.transform = CGAffineTransformTranslate(rotationScaleTransform, 200, 100);

  • 累加形变

        // 连续旋转
        self.testView.transform = CGAffineTransformRotate(self.testView.transform, 0.25 * M_PI);
    
        // 连续缩放
        self.testView.transform = CGAffineTransformScale(self.testView.transform, 2, 2);
    
        // 连续平移
        self.testView.transform = CGAffineTransformTranslate(self.testView.transform, 100, 100);

  • 还原形变

        // 还原所有形变
        self.testView.transform = CGAffineTransformIdentity;
    
        [self.testView.layer setAffineTransform: CGAffineTransformIdentity];

• Swift

  • 单一形变

        // 控件的形变属性
        public var transform: CGAffineTransform 
    
        // 旋转
        /*
            (angle: CGFloat) 旋转 45 度，需要输入的参数为弧度，45/180 * M_PI，1 度 ＝ PI/180 弧度
        */
        self.testView.transform = CGAffineTransformMakeRotation(0.25 * CGFloat(M_PI))
    
        self.testView.layer.setAffineTransform(CGAffineTransformMakeRotation(0.25 * CGFloat(M_PI)))
    
        // 缩放
        /*
            (sx: CGFloat, _ sy: CGFloat) (1, 2) 宽度和高度的放大倍数
        */
        self.testView.transform = CGAffineTransformMakeScale(1, 2)
    
        self.testView.layer.setAffineTransform(CGAffineTransformMakeScale(1, 2))
    
        // 平移
        /*
            (tx: CGFloat, _ ty: CGFloat) 水平和垂直方向的移动距离
        */
        self.testView.transform = CGAffineTransformMakeTranslation(100, 100)
    
        self.testView.layer.setAffineTransform(CGAffineTransformMakeTranslation(100, 100))

  • 叠加形变

        // 旋转 + 缩放
        let rotationTransform:CGAffineTransform = CGAffineTransformMakeRotation(0.25 * CGFloat(M_PI))
        self.testView.transform = CGAffineTransformScale(rotationTransform, 2, 2)
    
        // 旋转 + 平移
        let rotationTransform:CGAffineTransform = CGAffineTransformMakeRotation(0.25 * CGFloat(M_PI))
        self.testView.transform = CGAffineTransformTranslate(rotationTransform, 200, 100)
    
        // 缩放 + 平移
        let scaleTransform:CGAffineTransform = CGAffineTransformMakeScale(2, 2)
        self.testView.transform = CGAffineTransformTranslate(scaleTransform, 100, 100)
    
        // 旋转 + 缩放 + 平移
        let rotationTransform:CGAffineTransform = CGAffineTransformMakeRotation(0.25 * CGFloat(M_PI))
        let rotationScaleTransform:CGAffineTransform = CGAffineTransformScale(rotationTransform, 2, 2)
        self.testView.transform = CGAffineTransformTranslate(rotationScaleTransform, 200, 100)

  • 累加形变

        // 连续旋转
        self.testView.transform = CGAffineTransformRotate(self.testView.transform, 0.25 * CGFloat(M_PI))
    
        // 连续缩放
        self.testView.transform = CGAffineTransformScale(self.testView.transform, 2, 2)
    
        // 连续平移
        self.testView.transform = CGAffineTransformTranslate(self.testView.transform, 100, 100)

  • 还原形变

        // 还原所有形变
        self.testView.transform = CGAffineTransformIdentity
    
        self.testView.layer.setAffineTransform(CGAffineTransformIdentity)

5、View 的跟随模式设置

• Objective-C

      // 父视图设置
      /*
          父视图允许子视图跟随
          default is YES
      */
      fatherView.autoresizesSubviews = YES;
  
      // 子视图设置
      /*
          UIViewAutoresizingNone                 = 0,         // 不跟随
          UIViewAutoresizingFlexibleLeftMargin   = 1 << 0,    // 左边距 随父视图变化
          UIViewAutoresizingFlexibleRightMargin  = 1 << 2,    // 右边距 随父视图变化
          UIViewAutoresizingFlexibleTopMargin    = 1 << 3,    // 上边距 随父视图变化
          UIViewAutoresizingFlexibleBottomMargin = 1 << 5     // 下边距 随父视图变化
  
          UIViewAutoresizingFlexibleWidth        = 1 << 1,    // 宽度 随父视图变化
          UIViewAutoresizingFlexibleHeight       = 1 << 4,    // 高度 随父视图变化
      */
      sonView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;          

• Swift

      // 父视图设置
      /*
          父视图允许子视图跟随
          default is true
      */
      fatherView.autoresizesSubviews = true
  
      // 子视图设置
      /*
          None                    // 不跟随
          FlexibleLeftMargin      // 左边距 随父视图变化
          FlexibleRightMargin     // 右边距 随父视图变化
          FlexibleTopMargin       // 上边距 随父视图变化
          FlexibleBottomMargin    // 下边距 随父视图变化
  
          FlexibleWidth           // 宽度 随父视图变化
          FlexibleHeight          // 高度 随父视图变化
      */
      sonView.autoresizingMask = [.FlexibleWidth, .FlexibleHeight]

6、View 的动画设置

6.1 block 方式

• 设置控件位置、尺寸、透明度等的代码，放在 animateWithDuration: block 中，将自动以动画的方式改变。

• Objective-C

      // 移动时间 2 秒
      [UIView animateWithDuration:2 animations:^{
  
          // 改变控件的位置和尺寸，改变后的位置或大小
          view.frame = CGRectMake([UIScreen mainScreen].bounds.size.width - 60, 20, 50, 50);
  
      } completion:^(BOOL finished) {
  
          // 上一个设置完成后
  
          [UIView animateWithDuration:2 animations:^{
  
              // 改变控件的位置和尺寸，改变后的位置或大小
              view.frame = CGRectMake(10, [UIScreen mainScreen].bounds.size.height - 110, 100, 100);
          }];
      }];

• Swift

      // 移动时间 2 秒
      UIView.animateWithDuration(2, animations: {
  
          // 改变控件的位置和尺寸，改变后的位置或大小
          view.frame = CGRectMake(UIScreen.mainScreen().bounds.size.width - 60, 20, 50, 50)
  
      }) { (finished:Bool) in
  
          // 上一个设置完成后
  
          UIView.animateWithDuration(2, animations: {
  
              // 改变控件的位置和尺寸，改变后的位置或大小
              view.frame = CGRectMake(10, UIScreen.mainScreen().bounds.size.height - 110, 100, 100)
          })
      }

6.2 动画块方式

• 设置控件位置、尺寸、透明度等的代码，放在 beginAnimations: 和 commitAnimations 之间，将自动以动画的方式改变。

• Objective-C

  
      // 开始一个动画块
      [UIView beginAnimations:nil context:nil];
  
      // 动画设置
  
          // 设置动画时间
          /*
              default = 0.2
          */
          [UIView setAnimationDuration:2.0];
  
          // 设置延时
          /*
              设置指定的时间后开始执行动画，default = 0.0
          */
          [UIView setAnimationDelay:1.0];
  
          // 设置动画开始执行时间
          /*
              default = now ([NSDate date])
          */
          [UIView setAnimationStartDate:[NSDate dateWithTimeIntervalSinceNow:10]];
  
          // 设置动画执行节奏
          /*
              UIViewAnimationCurveEaseInOut,         // slow at beginning and end  开始喝结束慢速，默认
              UIViewAnimationCurveEaseIn,            // slow at beginning          开始慢速
              UIViewAnimationCurveEaseOut,           // slow at end                结束慢速
              UIViewAnimationCurveLinear             //                            匀速
          */
          [UIView setAnimationCurve:UIViewAnimationCurveEaseOut];
  
          // 设置重复次数
          /*
              default = 0.0.  May be fractional
          */
          [UIView setAnimationRepeatCount:CGFLOAT_MAX];
  
          // 设置是否自动返回
          /*
              default = NO. used if repeat count is non-zero
          */
          [UIView setAnimationRepeatAutoreverses:YES];
  
          // 设置是否从当前状态开始动画
          /*
              default = NO
          */
          [UIView setAnimationBeginsFromCurrentState:YES];
  
          // 设置代理
          /*
              default = nil
          */
          [UIView setAnimationDelegate:self];
  
          // 设置动画开始时执行的代理方法，自定义方法
          /*
              default = NULL
          */
          [UIView setAnimationWillStartSelector:@selector(startAnimations)];
  
          // 设置动画结束时执行的代理方法，自定义方法
          /*
              default = NULL
           */
          [UIView setAnimationDidStopSelector:@selector(stopAnimations)];
  
      // 动画之行后效果
  
          // 设置透明度，改变后的透明度
          view.alpha = 0.0;
  
          // 改变控件的位置和尺寸，改变后的位置或大小
          view.center = CGPointMake(250, 250);
          view.frame = CGRectMake(100, 180, 50, 50);
  
      // 结束一个动画块
      [UIView commitAnimations];

• Swift

      // 开始一个动画块
      UIView.beginAnimations(nil, context: nil)
  
      // 动画设置
  
          // 设置动画时间
          /*
              default = 0.2
          */
          UIView.setAnimationDuration(2.0)
  
          // 设置延时
          /*
              设置指定的时间后开始执行动画，default = 0.0
          */
          UIView.setAnimationDelay(1.0)
  
          // 设置动画开始执行时间
          /*
              default = now ([NSDate date])
          */
          UIView.setAnimationStartDate(NSDate(timeIntervalSinceNow: 10))
  
          // 设置动画执行节奏
          /*
              EaseInOut,         // slow at beginning and end  开始喝结束慢速，默认
              EaseIn,            // slow at beginning          开始慢速
              EaseOut,           // slow at end                结束慢速
              Linear             //                            匀速
          */
          UIView.setAnimationCurve(.EaseOut)
  
          // 设置重复次数
          /*
              default = 0.0.  May be fractional
          */
          UIView.setAnimationRepeatCount(9999999)
  
          // 设置是否自动返回
          /*
              default = NO. used if repeat count is non-zero
          */
          UIView.setAnimationRepeatAutoreverses(true)
  
          // 设置是否从当前状态开始动画
          /*
              default = NO
          */
          UIView.setAnimationBeginsFromCurrentState(true)
  
          // 设置代理
          /*
              default = nil
          */
          UIView.setAnimationDelegate(self)
  
          // 设置动画开始时执行的代理方法，自定义方法
          /*
              default = NULL
          */
          UIView.setAnimationWillStartSelector(#selector(UiView.startAnimations))
  
          // 设置动画结束时执行的代理方法，自定义方法
          /*
              default = NULL
          */
          UIView.setAnimationDidStopSelector(#selector(UiView.stopAnimations))
  
      // 动画之行后效果
  
          // 设置透明度，改变后的透明度
          view.alpha = 0.0
  
          // 改变控件的位置和尺寸，改变后的位置或大小
          view.center = CGPointMake(250, 250)
          view.frame = CGRectMake(100, 180, 50, 50)
  
      // 结束一个动画块
      UIView.commitAnimations()

7、frame 与 NSValue 的相互转换

• Objective-C

      // Frame 转 NSValue
      NSValue *freamValue = [NSValue valueWithCGRect:frame];
  
      // NSValue 转 Frame
      frame = [freamValue CGRectValue];

• Swift

      // Frame 转 NSValue
      let freamValue:NSValue = NSValue(CGRect: frame)
  
      // NSValue 转 Frame
      frame = freamValue.CGRectValue()

8、view 的封装（自定义控件）

• 如果一个 view 内部的子控件比较多，一般会考虑自定义一个 view，把它内部子控件的创建屏蔽起来，不让外界关心。外界可以传入对应的模型数据给 view，view 拿到模型数据后给内部的子控件设置对应的数据。

• 一个控件有 2 种创建方式：
  • 通过纯代码创建
    • 初始化时一定会调用 initWithFrame: 方法。想做一些初始化操作，应该在这个方法中执行。
    • 系统中 init 方法执行时会自动调用 initWithFrame: 方法。
  • 通过 xib\storyboard 创建
    • 初始化时不会调用 initWithFrame: 方法，只会调用 initWithCoder: 方法。
    • 初始化完毕后会调用 awakeFromNib 方法。想做一些初始化操作，应该在这个方法中执行。
  • 有时候希望在控件初始化时做一些初始化操作，比如添加子控件、设置基本属性，这时需要根据控件的创建方式，来选择在 initWithFrame:、initWithCoder:、awakeFromNib 的哪个方法中操作。

8.1 纯代码自定义控件

• 1> 在 initWithFrame: 方法中添加子控件，提供便利构造方法（类方法）。
  • 或者不使用 initWithFrame: 方法，而是使用子控件的懒加载方式，添加子控件。
• 2> 在 layoutSubviews 方法中设置子控件的 frame（一定要调用 super 的 layoutSubviews）。
  • 控件的尺寸发生改变时会自动调用 layoutSubviews 方法，设置子控件的布局。

• 3> 增加模型属性，在模型属性 setter 方法中设置数据到子控件上。

• Objective-C

  • ShopView.h

        #import <UIKit/UIKit.h>
    
        /// 数据模型
        @class ShopModel;
    
        @interface ShopView : UIView
    
        /// 商品模型
        @property (nonatomic, strong) ShopModel *shop;
    
        /// 便利的构造方法
        + (instancetype)shopView;
    
        @end

  • ShopView.m

    • 在 initWithFrame: 方法中添加子控件

          #import "ShopView.h"
          #import "ShopModel.h"
      
          @interface ShopView()
      
          /// 图片控件
          @property (nonatomic, strong) UIImageView *iconView;
      
          /// 名字控件
          @property (nonatomic, strong) UILabel *nameLabel;
      
          @end
      
          @implementation ShopView
      
          /// 便利的构造方法
          + (instancetype)shopView {
              return [[self alloc] init];
          }
      
          /**
           * 控件初始化方法
           * init 方法内部会自动调用 initWithFrame: 方法
           */
          - (instancetype)initWithFrame:(CGRect)frame {
      
              if (self = [super initWithFrame:frame]) {
                  self.backgroundColor = [UIColor orangeColor];
      
                  // 添加图片
                  UIImageView *iconView = [[UIImageView alloc] init];
                  iconView.backgroundColor = [UIColor blueColor];
                  [self addSubview:iconView];
                  self.iconView = iconView;
      
                  // 添加文字
                  UILabel *nameLabel = [[UILabel alloc] init];
                  nameLabel.font = [UIFont systemFontOfSize:11];
                  nameLabel.textAlignment = NSTextAlignmentCenter;
                  nameLabel.backgroundColor = [UIColor redColor];
                  [self addSubview:nameLabel];
                  self.nameLabel = nameLabel;
              }
              return self;
          }
      
          /**
           * 布局子控件
           * 这个方法专门用来布局子控件，一般在这里设置子控件的 frame
           * 当控件本身的尺寸发生改变的时候，系统会自动调用这个方法
           */
          - (void)layoutSubviews{
      
              // 一定要调用 super 的 layoutSubviews
              [super layoutSubviews];
      
              CGFloat shopW = self.frame.size.width;
              CGFloat shopH = self.frame.size.height;
              self.iconView.frame = CGRectMake(0, 0, shopW, shopW);
              self.nameLabel.frame = CGRectMake(0, shopW, shopW, shopH - shopW);
          }
      
          /// 数据模型 setter 方法
          - (void)setShop:(ShopModel *)shop {
      
              _shop = shop;
      
              self.nameLabel.text = shop.name;
              self.iconView.image = [UIImage imageNamed:shop.icon];
          }
      
          @end

    • 使用子控件的懒加载方法添加子控件

          #import "ShopView.h"
          #import "ShopModel.h"
      
          @interface ShopView()
      
          /// 图片控件
          @property (nonatomic, strong) UIImageView *iconView;
      
          /// 名字控件
          @property (nonatomic, strong) UILabel *nameLabel;
      
          @end
      
          @implementation ShopView
      
          /// 便利的构造方法
          + (instancetype)shopView {
              return [[self alloc] init];
          }
      
          /// 子控件懒加载方法（getter 方法）
          - (UIImageView *)iconView {
      
              if (_iconView == nil) {
                  UIImageView *iconView = [[UIImageView alloc] init];
                  iconView.backgroundColor = [UIColor blueColor];
                  [self addSubview:iconView];
                  _iconView = iconView;
              }
              return _iconView;
          }
      
          /// 子控件懒加载方法（getter 方法）
          - (UILabel *)nameLabel {
      
              if (_nameLabel == nil) {
                  UILabel *nameLabel = [[UILabel alloc] init];
                  nameLabel.font = [UIFont systemFontOfSize:11];
                  nameLabel.textAlignment = NSTextAlignmentCenter;
                  nameLabel.backgroundColor = [UIColor redColor];
                  [self addSubview:nameLabel];
                  _nameLabel = nameLabel;
              }
              return _nameLabel;
          }
      
          /**
           * 布局子控件
           * 这个方法专门用来布局子控件，一般在这里设置子控件的 frame
           * 当控件本身的尺寸发生改变的时候，系统会自动调用这个方法
           */
          - (void)layoutSubviews{
      
              // 一定要调用 super 的 layoutSubviews
              [super layoutSubviews];
      
              CGFloat shopW = self.frame.size.width;
              CGFloat shopH = self.frame.size.height;
              self.iconView.frame = CGRectMake(0, 0, shopW, shopW);
              self.nameLabel.frame = CGRectMake(0, shopW, shopW, shopH - shopW);
          }
      
          /// 数据模型 setter 方法
          - (void)setShop:(ShopModel *)shop {
      
              _shop = shop;
      
              self.nameLabel.text = shop.name;
              self.iconView.image = [UIImage imageNamed:shop.icon];
          }
      
          @end

8.2 XIB 自定义控件

• 新建自定义控件类。

  

• 新建 xib 文件（文件名建议和自定义控件类的类名一致）。

  

• 修改 xib 中控件绑定的类名。

  

• 在类扩展中增加子控件的属性，关联 xib 中的子控件。封装 xib 的加载过程，增加模型属性，在模型属性 setter 方法中设置数据到子控件上。

• Objective-C

  • ShopView.h

        #import <UIKit/UIKit.h>
    
        @class ShopModel;
    
        @interface ShopView : UIView
    
        /** 模型数据 */
        @property (nonatomic, strong) ShopModel *shop;
    
        + (instancetype)shopView;
        + (instancetype)shopViewWithShopModel:(ShopModel *)shop;
        @end

  • ShopView.m

        #import "ShopView.h"
        #import "ShopModel.h"
    
        @interface ShopView()
    
        /** 图标 */
        @property (weak, nonatomic) IBOutlet UIImageView *iconView;
    
        /** 名字 */
        @property (weak, nonatomic) IBOutlet UILabel *nameLabel;
    
        @end
    
        @implementation ShopView
    
        + (instancetype)shopView {
            return [self shopViewWithShop:nil];
        }
    
        + (instancetype)shopViewWithShop:(ShopModel *)shop {
    
            // 加载 xib 自定义控件
            ShopView *shopView = [[[NSBundle mainBundle] loadNibNamed:NSStringFromClass(self) 
                                                                owner:nil 
                                                              options:nil] lastObject];
            shopView.shop = shop;
    
            return shopView;
        }
    
        /// 数据模型 setter 方法
        - (void)setShop:(ShopModel *)shop {
    
            _shop = shop;
    
            // 设置子控件的数据
            self.iconView.image = [UIImage imageNamed:shop.icon];
            self.nameLabel.text = shop.name;
        }
    
        @end

9、九宫格计算思路

• Objective-C

      // 设置列数
      int cols = 3;
  
      // 设置每一个单元格的尺寸
      CGFloat shopW = 50;
      CGFloat shopH = 70;
  
      // 设置每一列和每一行之间的间距
      /*
          self.shopsView.frame.size.width 为父视图的宽度
      */
      CGFloat colMargin = (self.shopsView.frame.size.width - cols * shopW) / (cols - 1);
      CGFloat rowMargin = 10;
  
      // 计算单元格的索引
      /*
          计算将要添加的单元格的索引
      */
      NSUInteger index = self.shopsView.subviews.count;
  
      // 计算单元格的 x 坐标值
      NSUInteger col = index % cols;
      CGFloat shopX = col * (shopW + colMargin);
  
      // 计算单元格的 y 坐标值
      NSUInteger row = index / cols;
      CGFloat shopY = row * (shopH + rowMargin);
  
      // 创建一个单元格视图控件
      UIView *shopView = [[UIView alloc] init];
  
      // 设置单元格的 frame
      shopView.frame = CGRectMake(shopX, shopY, shopW, shopH);
  
      // 设置单元格视图控件的内容
      shopView.shop = self.shops[index];
  
      // 将单元格添加到父视图上
      [self.shopsView addSubview:shopView];

10、UI 控件 weak 引用

• 我们知道，从 Storyboard 往编译器拖出来的 UI 控件的属性是 weak 的，那么，如果有一些 UI 控件我们要用代码的方式来创建，那么它应该用 weak 还是 strong 呢？为什么？

      @property (weak, nonatomic) IBOutlet UIButton *myButton;

  • 这是一道有意思的问题。简单来说，这道题并没有标准答案，但是答案背后的解释却非常有价值，能够看出一个人对于引用计数，对于 view 的生命周期的理解是否到位。

  • 我们就能看到一些理解非常不到位的解释，例如说：Storyboard 拖线使用 weak 是为了规避出现循环引用的问题。

  • 这个理解是错误的，Storyboard 拖出来的控件即使是 strong 的，也不会有循环引用问题。UI 控件用默认用 weak，根源还是苹果希望只有这些 UI 控件的父 View 来强引用它们，而 ViewController 只需要强引用 ViewController.view 成员，则可以间接持有所有的 UI 控件。这样有一个好处是：在以前，当系统收到 Memory Warning 时，会触发 ViewController 的 viewDidUnload 方法，这样的弱引用方式，可以让整个 view 整体都得到释放，也更方便重建时整体重新构造。但是首先 viewDidUnload 方法在 iOS 6 开始就被废弃掉了，苹果用了更简单有效地方式来解决内存警告时的视图资源释放。总之就是，除非你特殊地操作 view 成员，ViewController.view 的生命期和 ViewController 是一样的了。

  • 所以在这种情况下，其实 UI 控件是不是 weak 其实关系并不大。当 UI 控件是 weak 时，它的引用计数是 1，持有它的是它的 superview，当 UI 控件是 strong 时，它的引用计数是 2，持有它的有两个地方，一个是它的 superview，另一个是这个 strong 的指针。UI 控件并不会持有别的对象，所以，不管是手写代码还是 Storyboard，UI 控件是 strong 都不会有循环引用的。

  • 那么回到我们的最初的问题，自己写的 view 成员，应该用 weak 还是 strong？我个人觉得应该用 strong，因为用 weak 并没有什么特别的优势，其实 weak 变量会有额外的系统维护开销的，如果你没有使用它的特别的理由，那么用 strong 的话应该更好。另外如果你要做 Lazy 加载，那么你也只能选择用 strong。当然，如果你非要用 weak，其实也没什么问题，只需要注意在赋值前，先把这个对象用 addSubView 加到父 view 上，否则可能刚刚创建完，它就被释放了。

11、简述对 UIView、UIWindow 和 CALayer 的理解

• UIView 对象定义了屏幕上的一个矩形区域，用于构建用户界面和响应用户触屏事件。一个 UIView 的实例可以包含和管理若干个子 UIView。UIView 的直接父类为 UIResponder 类，可以响应用户事件。

• UIWindow 对象是所有 UIView 的根，管理和协调应用程序的显示。UIWindow 类是 UIView 的子类，可以看作是特殊的 UIView。一般应用程序只有一个 UIWindow 对象，即使有多个 UIWindow 对象，也只有一个 UIWindow 可以接受到用户的触屏事件。

• UIViewController 对象负责管理所有 UIView 的层次结构，并处理用户的触摸事件。

• UIScreen 可以获取设备屏幕的大小。

• CALayer 直接从 NSObject 继承，因为缺少了 UIResponder 类，所以 CALayer 不能响应任何用户事件。QuartzCore 是 iOS 中提供图像绘制的基础库，并且 CALayer 是定义该框架中。CALayer 定义了 position、size、transform、animations 等基本属性。UIView 是基于 CALayer 的高层封装。UIView 相比 CALayer 最大区别是 UIView 可以响应用户事件，而 CALayer 不可以。UIView 侧重于对显示内容的管理，CALayer 侧重于对内容的绘制。UIView 和 CALayer 是相互依赖的关系。UIView 依赖与 calayer 提供的内容，CALayer 依赖 UIView 提供的容器来显示绘制的内容。归根到底 CALayer 是这一切的基础，如果没有 CALayer，UIView 自身也不会存在，UIView 是一个特殊的 CALayer 实现，添加了响应事件的能力。UIView 来自 CALayer，高于 CALayer，是 CALayer 高层实现与封装。UIView 的所有特性来源于 CALayer 支持。