Layout--iOS

// 系统的约束代码

@implementation ViewController

- (void)viewDidLoad {

    [super viewDidLoad];

    UIView *superView = self.view;

    UIView *viewDemo = [[UIView alloc] init];

    viewDemo.translatesAutoresizingMaskIntoConstraints = NO;

    viewDemo.backgroundColor = [UIColor orangeColor];

    [superView addSubview:viewDemo];

    UIEdgeInsets padding = UIEdgeInsetsMake(10, 10, 10, 10);

    [superView addConstraints:@[

　　　　　　　　　　　// viewDemo顶部距离父视图superView顶部距离为padding.top(即为：10)，

                               [NSLayoutConstraint constraintWithItem:viewDemo attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:superView attribute:NSLayoutAttributeTop multiplier:1 constant:padding.top],

                               [NSLayoutConstraint constraintWithItem:viewDemo attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:superView attribute:NSLayoutAttributeLeft multiplier:1 constant:padding.left],

                               [NSLayoutConstraint constraintWithItem:viewDemo attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:superView attribute:NSLayoutAttributeRight multiplier:1 constant:-padding.right],

                               [NSLayoutConstraint constraintWithItem:viewDemo attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:superView attribute:NSLayoutAttributeBottom multiplier:1 constant:-padding.bottom]

                               ]];

}

// 注：若是把右边约束去掉，改为如下语句

// [NSLayoutConstraint constraintWithItem:viewDemo attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:superView attribute:NSLayoutAttributeWidth multiplier:0.5 constant:0]

// 则viewDemo的宽度变为superView的0.5倍！！

//***************************************************

// VFL语言

　 UIView *viewLeft = [[UIView alloc] init];

    viewLeft.translatesAutoresizingMaskIntoConstraints = NO;

    viewLeft.backgroundColor = [UIColor orangeColor];

    [self.view addSubview:viewLeft];

    UIView *viewRight = [[UIView alloc] init];

    viewRight.translatesAutoresizingMaskIntoConstraints = NO;

    viewRight.backgroundColor = [UIColor redColor];

    [self.view addSubview:viewRight];

    // horizontal：水平方向距左边10，距右边10

    //简单说来，NSDictionaryOfVariableBindings(scrollView)就等于@{@”scrollView”: scrollView}

    NSDictionary *constraintDict = NSDictionaryOfVariableBindings(viewLeft,viewRight);

    NSArray *hConstraintArrayLeft = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-(10)-[viewLeft]-(10)-|" options:0 metrics:nil views:constraintDict];

    // vertical： 垂直方向距顶部30，控件高度100

    NSArray *vConstraintArrayLeft = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-(30)-[viewLeft(100)]" options:0 metrics:nil views:constraintDict];

    // 添加到父视图上

    [self.view addConstraints:hConstraintArrayLeft];

    [self.view addConstraints:vConstraintArrayLeft];

    NSArray *hConstraintArrayRight = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-(10)-[viewRight]-(10)-|" options:0 metrics:nil views:constraintDict];

    // viewRight距viewLeft的垂直距离为50

    NSArray *vConstraintArrayRight = [NSLayoutConstraint constraintsWithVisualFormat:@"V:[viewLeft]-(50)-[viewRight(200)]" options:0 metrics:nil views:constraintDict];

    [self.view addConstraints:hConstraintArrayRight];

    [self.view addConstraints:vConstraintArrayRight];

//***************************************************

// 三方库：Masonry

// 居中

// 快速定义一个weakSelf，用于block里面，防止循环引用

#define WS(weakSelf)  __weak __typeof(&*self)weakSelf = self

    WS(ws);

    UIView *sv = [UIView new];

    sv.backgroundColor = [UIColor orangeColor];

    // 在做autoLayout之前 一定要先将view添加到superView上 否则会报错

    [self.view addSubview:sv];

    [sv mas_makeConstraints:^(MASConstraintMaker *make) {

        // 居中

        make.center.equalTo(ws.view);

        // 设置size

        make.size.mas_equalTo(CGSizeMake(300, 300));

    }];

3. [初级] 让两个高度为150的view垂直居中且等宽且等间隔排列 间隔为10(自动计算其宽度)

代码效果

这里我们在两个子view之间互相设置的约束 可以看到他们的宽度在约束下自动的被计算出来了

4. [中级] 在UIScrollView顺序排列一些view并自动计算contentSize

头部效果

尾部效果

从scrollView的scrollIndicator可以看出 scrollView的内部已如我们所想排列好了

这里的关键就在于container这个view起到了一个中间层的作用 能够自动的计算uiscrollView的contentSize

5. [高级] 横向或者纵向等间隙的排列一组view

很遗憾 autoLayout并没有直接提供等间隙排列的方法(Masonry的官方demo中也没有对应的案例) 但是参考案例3 我们可以通过一个小技巧来实现这个目的 为此我写了一个Category

简单的来测试一下

代码效果

perfect! 简洁明了的达到了我们所要的效果

这里所用的技巧就是 使用空白的占位view来填充我们目标view的旁边 这点通过图上的空白标注可以看出来

引自：http://www.cocoachina.com/ios/20141219/10702.html

若有侵权，请告知