从零开始学习VFL (二)

示例1

 
     //绘制两个view,在屏幕下方。
    UIView *redView = [UIView new] ;
    redView.backgroundColor = [UIColor redColor];
    redView.translatesAutoresizingMaskIntoConstraints = NO ;
    [self.view addSubview:redView];
    
    UIView *greenView = [UIView new];
    greenView.translatesAutoresizingMaskIntoConstraints = NO ;
    greenView.backgroundColor = [UIColor greenColor];
    [self.view addSubview:greenView];
    
    //研究下options的作用
    
    //水平方向的布局（宽度相等）
    NSArray *layoutConstraints1 = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-[R(G)]-20-[G(R)]-|" options:0 metrics:nil views:@{@"R":redView,@"G":greenView}];
    
    //竖直方向的布局
    NSArray *layoutConstraints2 = [NSLayoutConstraint constraintsWithVisualFormat:@"V:[R(40)]-10-|" options:0 metrics:nil views:@{@"R":redView,@"G":greenView}];
    NSArray *layoutConstraints3 = [NSLayoutConstraint constraintsWithVisualFormat:@"V:[G(40)]-10@1000-|" options:0 metrics:nil views:@{@"R":redView,@"G":greenView}];
  
    //iOS8+
    [NSLayoutConstraint activateConstraints:layoutConstraints1];
    [NSLayoutConstraint activateConstraints:layoutConstraints2];
    [NSLayoutConstraint activateConstraints:layoutConstraints3];

示例1.png

示例2 比例布局

vfl满足不了等比例里布局，因此需要额外用NSLayoutConstraint的方法实现。

/**
 *  创建约束对象,一个对象就代表一个约束 
 *
 *  @param view1     要约束的控件
 *  @param attr1      约束的类型
 *  @param relation  大小关系
 *  @param view2     参照的控件
 *  @param attr2     约束的类型
 *  @param multiplier 约束的比例
 *  @param c         约束值的常量 obj1.property1 =（obj2.property2 * multiplier）+ constant
 *
 *  @return <#return value description#>
 */ 
 
+(instancetype)constraintWithItem:(id)view1
                        attribute:(NSLayoutAttribute)attr1
                        relatedBy:(NSLayoutRelation)relation
                           toItem:(nullable id)view2
                        attribute:(NSLayoutAttribute)attr2
                       multiplier:(CGFloat)multiplier constant:(CGFloat)c 
                       

代码示例

 
 - (void)viewDidLoad {
    [super viewDidLoad];
    
    self.view.backgroundColor = [UIColor whiteColor];
    
    //设置起始点在导航条左下角,满足屏幕旋转后视图紧贴导航条
    self.edgesForExtendedLayout = UIRectEdgeNone;
    
    UIView *redView = [UIView new] ;
    redView.backgroundColor = [UIColor redColor];
    redView.translatesAutoresizingMaskIntoConstraints = NO;
    [self.view addSubview:redView];
    
    //与父视图左右对齐
    NSArray* hConstraints = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-0-[R]-0-|" options:0 metrics:nil views:@{@"R": redView}];
    [NSLayoutConstraint activateConstraints:hConstraints];
    
    //与父视图上对齐
    NSArray* vConstraints = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-[R]" options:0 metrics:nil views:@{@"R": redView}];
    [NSLayoutConstraint activateConstraints:vConstraints];
    
    //设置比例
    NSLayoutConstraint* heightConstraint = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeHeight multiplier:0.3f constant:0.0f];
    heightConstraint.active = YES;

示例3 更改比例约束

需要注意的是: 添加比例有不同的方法
如在self.view上的约束

• [self.view addConstraints:self.layoutArrayH]; 或 [self.view addConstraint:layout];

• [NSLayoutConstraint activateConstraints:self.layoutArrayH] 或 [NSLayoutConstraint activateConstraints:@[layout]] 或 layout.active = YES;

删除约束的时候选择对应的方法即可

[NSLayoutConstraint deactivateConstraints:_layoutArrayH];

[NSLayoutConstraint activateConstraints:layoutArrayH];

 
@interface UpdateViewController ()

@property(nonatomic, weak)UIView *blueView;

@property(nonatomic, strong) NSArray *layoutArrayH;

@end
 
- (void)viewDidLoad {
    [super viewDidLoad];



    UIView *blueView = [UIView new];
    blueView.backgroundColor = [UIColor blueColor];
    blueView.translatesAutoresizingMaskIntoConstraints = NO;
    [self.view addSubview:blueView];
    self.blueView = blueView ;
    
    
    NSArray *layoutArrayV = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-80-[B(140)]" options:0 metrics:nil views:@{@"B":blueView}];
    [NSLayoutConstraint activateConstraints:layoutArrayV];
    
    self.layoutArrayH = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-10-[B(300)]" options:0 metrics:nil views:@{@"B":blueView}];
    [NSLayoutConstraint activateConstraints:self.layoutArrayH];


}



- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{
    
    if (_layoutArrayH) {
        
        [NSLayoutConstraint deactivateConstraints:_layoutArrayH];
        
        NSArray *layoutArrayH = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-10-[B(100)]" options:0 metrics:nil views:@{@"B":_blueView}];
        [NSLayoutConstraint activateConstraints:layoutArrayH];
         
         //添加约束动画 
        [UIView animateWithDuration:1.f animations:^{
            
            [self.view layoutIfNeeded];
            
        }];
    }
    
}