iOS - UIView

前言

    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 支持。
时间： 2024-10-07 10:48:37

iOS - UIView的相关文章

iOS UIView动画详解(Objective-C)

    我在之前的一篇博客中<iOS UIView动画详解(Swift)>讲解了使用Swift来实现UIView类下面提供的多种动画效果,如位置动画.旋转动画.缩放动画.颜色动画.透明度动画等等.为了这个题目的完整性,今天我使用Objective-C来完全重写以上的所有的动画.项目案例已经上传至:https://github.com/chenyufeng1991/iOS-UIView-Animation  中的Animation-OC文件夹下,另一个目录下则是Swift实现的动画. (1)位置

iOS UIView常见属性方法小结_IOS

下面通过实例代码给大家详细介绍了iOS UIView常见属性方法,具体代码如下所示: UIView : UIResponder /** 通过一个frame来初始化一个UI控件 */ - (id)initWithFrame:(CGRect)frame; // YES:能够跟用户进行交互 @property(nonatomic,getter=isUserInteractionEnabled) BOOL userInteractionEnabled; // default is YES // 控件的一

iOS - UIView 动画

1.UIView 动画 核心动画 和 UIView 动画 的区别: 核心动画一切都是假象,并不会真实的改变图层的属性值,如果以后做动画的时候,不需要与用户交互,通常用核心动画(转场). UIView 动画必须通过修改属性的真实值,才有动画效果. 1.1 block 方式 设置控件位置.尺寸.透明度等的代码,放在 animateWithDuration: block 中,将自动以动画的方式改变. // 开始动画,动画持续时间 2 秒 [UIView animateWithDuration:1.0

iOS UIView contentMode

Content Modes contentMode是UIView的属性,这个属性的值决定了,当视图的几何形状变化时如何复用它的内容.当视图第一次展示前,它会将自己的内容渲染成一张底层的bitmap. 然后视图的几何变化都不会使bitmap重新生成.而视图contentMode属性的值决定了bitmap是否缩放.位置在哪儿(固定在左边.右边.上面.下面.居中).默认情况下,contentMode的值是UIViewContentModeScaleToFill. contentMode啥时候起作用呢?

IOS代码笔记UIView的placeholder的效果_IOS

本文实例为大家分享了IOS占位符效果,供大家参考,具体内容如下 一.效果图   二.工程图   三.代码RootViewController.h #import <UIKit/UIKit.h> @interface RootViewController : UIViewController <UITextViewDelegate> { UITextView *psTextView; UILabel *pslabel; } @end RootViewController.m #imp

iOS为UIView设置阴影效果_IOS

UIView的阴影设置主要通过UIView的layer的相关属性来设置 阴影的颜色 imgView.layer.shadowColor = [UIColor blackColor].CGColor; 阴影的透明度 imgView.layer.shadowOpacity = 0.8f; 阴影的圆角 imgView.layer.shadowRadius = 4.f; 阴影偏移量 imgView.layer.shadowOffset = CGSizeMake(4,4); imgView.layer.s

ios-IOS多个UIView添加点击

问题描述 IOS多个UIView添加点击 刚刚接触IOS开发,遇到以下问题想不通,希望高手给予指导.我给sendView. payVIew.receiverView. commentView设置点击事件,为什么 UITapGestureRecognizer * singleRecognizer = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(viewClick:)]; singleRecognizer.n

iOS 实现多代理的方法及实例代码_IOS

iOS实现多代理 什么是多代理 用过环信SDK的同学应该对多代理不陌生了,请看下面代码: @method @brief 注册一个监听对象到监听列表中 @discussion 把监听对象添加到监听列表中准备接收相应的事件 @param delegate 需要注册的监听对象 @param queue 通知监听对象时的线程 @result */ - (void)addDelegate:(id<EMChatManagerDelegate>)delegate delegateQueue:(dispatc

iOS基础动画教程分享_IOS

iOS的动画多种多样,动画做的好的应用会更加吸引人,用起来也会更加炫目,本文介绍iOS几种基础动画,单个讲解便于理解,但真正使用时,结合起来用会看起来更加帅,这就看具体的应用场景和大家的想象力啦. 所有的基础动画都给予UIView一个基础的方法:animateWithDuration.这个方法可以包含一个代码块,里面设置要改变的东西,在执行的时候iOS会自动以动画的形式展现出来,代码如下: [UIView animateWithDuration:1 animations:^{ // 要执行的动作