前言

    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、九宫格计算思路

UIView1

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 支持。

iOS - UIView

前言

1、View 的创建

2、View 的设置

3、View 的层次设置

4、View 的旋转与缩放设置

5、View 的跟随模式设置

6、View 的动画设置

6.1 block 方式

6.2 动画块方式

7、frame 与 NSValue 的相互转换

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

8.1 纯代码自定义控件

8.2 XIB 自定义控件

9、九宫格计算思路

10、UI 控件 weak 引用

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

热门文章

最新文章

相关电子书

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

iOS - UIView

前言

1、View 的创建

2、View 的设置

3、View 的层次设置

4、View 的旋转与缩放设置

5、View 的跟随模式设置

6、View 的动画设置

6.1 block 方式

6.2 动画块方式

7、frame 与 NSValue 的相互转换

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

8.1 纯代码自定义控件

8.2 XIB 自定义控件

9、九宫格计算思路

10、UI 控件 weak 引用

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

热门文章

最新文章

相关电子书