变更记录

序号 录入时间 录入人 备注
1 2015-04-08 Alfred Jiang -
2 2015-08-18 Alfred Jiang 更新OC示例
3 2015-12-08 Alfred Jiang 添加 Masonry 相关
4 2015-12-23 Alfred Jiang -
4 2015-03-08 Alfred Jiang 添加 Masonry 备注相关

方案名称

Auto Layout - 手动添加 Auto Layout 约束(Masonry)

关键字

Auto Layout \ 约束 \ Constraint \ 自动布局 \ 页面布局 \ Masonry

需求场景

  1. 部分页面或控件的代码载入需要实现代码添加约束

参考链接

  1. Github - Masonry
  2. CSDN - Auto Layout 进阶
  3. 简书 - 追求Masonry
  4. Autolayout的第一次亲密接触
  5. 有趣的Autolayout示例-Masonry实现

详细内容

#####1. 系统提供的代码添加约束方法

  1. 首先设置 View 的 translatesAutoresizingMaskIntoConstraints 的属性为 NO ;
  2. 然后将子视图 addSubview 到父视图中,否则在添加约束时会产生编译器警告;
  3. 添加约束条件.

Objective-C 示例

1
2
3
4
5
6
7
8
9
10
- (void)addView:(UIView *)aSubView toView:(UIView *)aPView
{
    aSubView.translatesAutoresizingMaskIntoConstraints = NO;
    [aPView addSubview:aSubView];
    [aPView addConstraint:[NSLayoutConstraint constraintWithItem:aSubView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:aPView attribute:NSLayoutAttributeTop multiplier:1.0 constant:0]];
    [aPView addConstraint:[NSLayoutConstraint constraintWithItem:aSubView attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:aPView attribute:NSLayoutAttributeLeft multiplier:1.0 constant:0]];
    [aPView addConstraint:[NSLayoutConstraint constraintWithItem:aSubView attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:aPView attribute:NSLayoutAttributeRight multiplier:1.0 constant:0]];
    [aPView addConstraint:[NSLayoutConstraint constraintWithItem:aSubView attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:aPView attribute:NSLayoutAttributeBottom multiplier:1.0 constant:0]];
    [aPView layoutSubviews];
}

Swift 示例

1
2
3
4
5
6
7
8
9
10
11
12
let bidButton = UIButton();

bidButton.setTranslatesAutoresizingMaskIntoConstraints(false)

self.viewBid.addSubview(bidButton);

self.viewBid.addConstraints([
    NSLayoutConstraint(item: bidButton, attribute: NSLayoutAttribute.Top, relatedBy: NSLayoutRelation.Equal, toItem: self.viewBid, attribute: NSLayoutAttribute.Top, multiplier: 1.0, constant: 0),
    NSLayoutConstraint(item: bidButton, attribute: NSLayoutAttribute.Left, relatedBy: NSLayoutRelation.Equal, toItem: self.viewBid, attribute: NSLayoutAttribute.Left, multiplier: 1.0, constant: 0),
    NSLayoutConstraint(item: bidButton, attribute: NSLayoutAttribute.Right, relatedBy: NSLayoutRelation.Equal, toItem: self.viewBid, attribute: NSLayoutAttribute.Right, multiplier: 1.0, constant: 0),
    NSLayoutConstraint(item: bidButton, attribute: NSLayoutAttribute.Bottom, relatedBy: NSLayoutRelation.Equal, toItem: self.viewBid, attribute: NSLayoutAttribute.Bottom, multiplier: 1.0, constant: 0)
    ])

#####2. 使用 Masonry 实现代码添加约束方法

1
2
3
4
5
6
7
8
9
- (void)addView:(UIView *)aSubView toView:(UIView *)aPView
{
    [aPView addSubview:aSubView];

    UIEdgeInsets edge = UIEdgeInsetsMake(0, 0, 0, 0);
    [view mas_makeConstraints:^(MASConstraintMaker *make) {
        make.edges.equalTo(view.superview).insets(edge);
    }];
}

更多示例请参考 Github - Masonry 以及备注内容

效果图

（无）

备注

Masonry 相关优秀博文推荐：