美文网首页
iOS 代码自动布局

iOS 代码自动布局

作者: 清风_____ | 来源:发表于2020-06-11 12:04 被阅读0次

    oc

    1.注意 : 布局是设置在两个 view 间的一种约束,所以我们不能只设置一个 view 的约束,这样做没有什么意义,它必须是相对的。

    2.所有的布局都遵循以下的公式
    view1.property = (view.2property * multiplier) + constant
    翻译过来就是 : view1 的某个属性的值 = (view2的某个属性的值 * 系数)+ 常量

    // 参数 1 : 需要添加约束的 view
    // 参数 2 : 需要填加的约束(左边、右边、宽度、高度等)
    // 参数 3 : 约束关系(大于、小于、相等)
    // 参数 4 : 参数 view(约束是相对于哪个 view 而言)
    // 参数 5 : 参照 view 的哪一个参数(左边、右边、宽度、高度等)
    // 参数 6 : 系数
    // 参数 7 : 常量
    /* Create constraints explicitly.  Constraints are of the form "view1.attr1 = view2.attr2 * multiplier + constant"
     If your equation does not have a second view and attribute, use nil and NSLayoutAttributeNotAnAttribute.
     Use of this method is not recommended. Constraints should be created using anchor objects on views and layout guides.
     */
    + (instancetype)constraintWithItem:(id)view1 attribute:(NSLayoutAttribute)attr1 relatedBy:(NSLayoutRelation)relation toItem:(nullable id)view2 attribute:(NSLayoutAttribute)attr2 multiplier:(CGFloat)multiplier constant:(CGFloat)c API_AVAILABLE(macos(10.7), ios(6.0), tvos(9.0));
    
    NSLayoutAttribute 枚举如下
    typedef NS_ENUM(NSInteger, NSLayoutAttribute) {
            NSLayoutAttributeLeft = 1,  // 左边,永远指左边
            NSLayoutAttributeRight,     // 右边,永远指有伴
            NSLayoutAttributeTop,       // 顶部
            NSLayoutAttributeBottom,    // 底部
            NSLayoutAttributeLeading,   // 前面,在某些从右至左为习惯的的确会变成右边
            NSLayoutAttributeTrailing,  // 后面,在某些从右至左为习惯的的确会变成左边
            NSLayoutAttributeWidth,     // 宽度
            NSLayoutAttributeHeight,    // 高度
            NSLayoutAttributeCenterX,   // 中点的 X 值
            NSLayoutAttributeCenterY,   // 中点的 Y 值
            NSLayoutAttributeLastBaseline,  // 基准线:位于视图底部上方放置文字的地方
            NSLayoutAttributeBaseline NS_SWIFT_UNAVAILABLE("Use 'lastBaseline' instead") = NSLayoutAttributeLastBaseline,
            NSLayoutAttributeFirstBaseline NS_ENUM_AVAILABLE_IOS(8_0),
            
            
            NSLayoutAttributeLeftMargin NS_ENUM_AVAILABLE_IOS(8_0),
            NSLayoutAttributeRightMargin NS_ENUM_AVAILABLE_IOS(8_0),
            NSLayoutAttributeTopMargin NS_ENUM_AVAILABLE_IOS(8_0),
            NSLayoutAttributeBottomMargin NS_ENUM_AVAILABLE_IOS(8_0),
            NSLayoutAttributeLeadingMargin NS_ENUM_AVAILABLE_IOS(8_0),
            NSLayoutAttributeTrailingMargin NS_ENUM_AVAILABLE_IOS(8_0),
            NSLayoutAttributeCenterXWithinMargins NS_ENUM_AVAILABLE_IOS(8_0),
            NSLayoutAttributeCenterYWithinMargins NS_ENUM_AVAILABLE_IOS(8_0),
            
            NSLayoutAttributeNotAnAttribute = 0   // 没有属性
        };
    
    NSLayoutRelation枚举如下
    typedef NS_ENUM(NSInteger, NSLayoutRelation) {
            NSLayoutRelationLessThanOrEqual = -1,    // 小于或等于(先使用等于,如果等于不满足再使用小于)
            NSLayoutRelationEqual = 0,               // 等于
            NSLayoutRelationGreaterThanOrEqual = 1,  // 大于或等于(先使用等于,如果等于不满足再使用大于)
        };
    

    假如设置某个 view的约束是大于等于50,那么首先会使用50,当视图被拉伸的时候,50就无法满足,此时就会使用大于50的值

    实例一:设置子视图在父视图中,并且上下左右到父视图的上下左右都距离 50

    self.view.backgroundColor = [UIColor yellowColor];
        
        // 创建视图
        UIView * view = [[UIView alloc] init];
        
        // 设置背景色
        view.backgroundColor = [UIColor greenColor];
        
        // 添加
        [self.view addSubview:view];
        
        // 关闭系统自定义布局
        view.translatesAutoresizingMaskIntoConstraints = NO;
        
        // 设置 子视图左侧距离父视图左侧 50
        NSLayoutConstraint * LC1 = [NSLayoutConstraint constraintWithItem:view attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeft multiplier:1.0 constant:50];
        
        // 设置 子视图顶部距离 父视图顶部 50
        NSLayoutConstraint * LC2 = [NSLayoutConstraint constraintWithItem:view attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:1.0 constant:50];
        
        // 设置 子视图右侧距离 父视图右侧 50
        NSLayoutConstraint * LC3 = [NSLayoutConstraint constraintWithItem:view attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeRight multiplier:1.0 constant:-50];
        
        // 设置 子视图底部距离 父视图底部 50
        NSLayoutConstraint * LC4 = [NSLayoutConstraint constraintWithItem:view attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeBottom multiplier:1.0 constant:-50];
        
        // 将子视图的约束添加到父视图上
        [self.view addConstraints:@[LC1, LC2, LC3, LC4]];
    

    实例二:子视图在父视图中间,且 width 为 300,height 为 200

    // 创建 UIView 对象
    UIView * view = [[UIView alloc] init];
        
    view.backgroundColor = [UIColor blueColor];
        
    view.translatesAutoresizingMaskIntoConstraints = NO;
        
    [self.view addSubview:view];
        
    // 场景二 :子视图在父视图中间,且width 300,height 200
        
    NSLayoutConstraint * centerX = [NSLayoutConstraint constraintWithItem:view attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterX multiplier:1.0 constant:0];
        
    NSLayoutConstraint * centerY = [NSLayoutConstraint constraintWithItem:view attribute:NSLayoutAttributeCenterY relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterY multiplier:1.0 constant:0];
        
    NSLayoutConstraint * height = [NSLayoutConstraint constraintWithItem:view attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationGreaterThanOrEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0 constant:200];
        
    NSLayoutConstraint * width = [NSLayoutConstraint constraintWithItem:view attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationGreaterThanOrEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0 constant:300];
        
    [self.view addConstraints:@[centerX, centerY, height, width]];
    

    场景一


    20170410111216594.png

    场景二


    20170410111558943.png

    swift

            self.view.backgroundColor = UIColor.red
            heartDynamicLineView = DynamicLineView.init()
            self.view.addSubview(heartDynamicLineView)
            layoutViewFunction(yView: self.view, zView: heartDynamicLineView)
            heartDynamicLineView.backgroundColor = UIColor.orange
    
        //代码布局
        func layoutViewFunction(yView:UIView,zView:DynamicLineView) -> Void {
            zView.translatesAutoresizingMaskIntoConstraints = false
            let onThe:NSLayoutConstraint = NSLayoutConstraint.init(item: zView, attribute: NSLayoutConstraint.Attribute.top, relatedBy: NSLayoutConstraint.Relation.equal, toItem: yView, attribute: NSLayoutConstraint.Attribute.top, multiplier: 1.0, constant: 100)
            let Under:NSLayoutConstraint = NSLayoutConstraint.init(item: zView, attribute: NSLayoutConstraint.Attribute.bottom, relatedBy: NSLayoutConstraint.Relation.equal, toItem: yView, attribute: NSLayoutConstraint.Attribute.bottom, multiplier: 1.0, constant: -100)
            let left:NSLayoutConstraint = NSLayoutConstraint.init(item: zView, attribute: NSLayoutConstraint.Attribute.left, relatedBy: NSLayoutConstraint.Relation.equal, toItem: yView, attribute: NSLayoutConstraint.Attribute.left, multiplier: 1.0, constant: 20)
            let right:NSLayoutConstraint = NSLayoutConstraint.init(item: zView, attribute: NSLayoutConstraint.Attribute.right, relatedBy: NSLayoutConstraint.Relation.equal, toItem: yView, attribute: NSLayoutConstraint.Attribute.right, multiplier: 1.0, constant: -20)
            yView.addConstraints([onThe,Under,left,right])
        }
    
    Simulator Screen Shot - iPhone 11 Pro Max - 2020-07-08 at 15.57.10.png

    https://blog.csdn.net/qq_26546411/article/details/69943524

    相关文章

      网友评论

          本文标题:iOS 代码自动布局

          本文链接:https://www.haomeiwen.com/subject/ysxbtktx.html