iOS 如何使用facebook开源的YogaKit(二)

上一篇文章主要是围绕一个UIView来讲的，那我在UIView添加一个UIView或其它控件那会有什么效果了。

    UIView *view = [[UIView alloc] initWithFrame:CGRectZero];
    view.backgroundColor = [UIColor redColor];
    [view configureLayoutWithBlock:^(YGLayout * layout) {
        layout.isEnabled = YES;
        layout.marginTop = YGPointValue(64);
        layout.padding = YGPointValue(self.view.frame.size.width/2);
    }];
    [self.view addSubview:view];
    
    
    UIView *bottomView = [[UIView alloc] initWithFrame:CGRectZero];
    bottomView.backgroundColor = [UIColor yellowColor];
    [bottomView configureLayoutWithBlock:^(YGLayout * layout) {
        layout.isEnabled = YES;
        layout.marginTop = YGPointValue(0);
        layout.padding = YGPointValue(8);
    }];
    [view addSubview:bottomView];
    
    [view.yoga applyLayoutPreservingOrigin:NO];

效果：

image.png

bottomView 的Top设置是0按正常的思维来说应该是在view的最上面，但结果却是在中间位置。
那在view再添加一个UIButton会出现什么结果了。

    UIView *view = [[UIView alloc] initWithFrame:CGRectZero];
    view.backgroundColor = [UIColor redColor];
    [view configureLayoutWithBlock:^(YGLayout * layout) {
        layout.isEnabled = YES;
        layout.marginTop = YGPointValue(64);
        layout.padding = YGPointValue(self.view.frame.size.width/2);
    }];
    [self.view addSubview:view];
    
    
    UIView *bottomView = [[UIView alloc] initWithFrame:CGRectZero];
    bottomView.backgroundColor = [UIColor yellowColor];
    [bottomView configureLayoutWithBlock:^(YGLayout * layout) {
        layout.isEnabled = YES;
        layout.marginTop = YGPointValue(0);
        layout.padding = YGPointValue(8);
    }];
    [view addSubview:bottomView];
    
    UIButton *but = [UIButton buttonWithType:UIButtonTypeCustom];
    but.backgroundColor = [UIColor grayColor];
    [but addTarget:self action:@selector(selectorBut) forControlEvents:UIControlEventTouchUpInside];
    [but configureLayoutWithBlock:^(YGLayout * layout) {
        layout.isEnabled = YES;
        layout.marginTop = YGPointValue(0);
        layout.padding = YGPointValue(50);
    }];
    [view addSubview:but];
    
    [view.yoga applyLayoutPreservingOrigin:NO];

效果：

image.png

图中显示UIButton的Top是和bottomView的bottom在一起的，这个和刚才的就有点不同了，刚才在中间位置，这里有区别要谨记一下。

在开发中我们经常会用到UILabel在后面会跟着其它的控件,在使用时随着文本的长度变化后面的控件也跟着伸进。

代码：

UIView *view = [[UIView alloc] initWithFrame:CGRectZero];
    view.backgroundColor = [UIColor redColor];
    [view configureLayoutWithBlock:^(YGLayout * layout) {
        layout.isEnabled = YES;
        layout.marginTop = YGPointValue(64);
        layout.width = YGPointValue(self.view.frame.size.width);
        layout.height = YGPointValue(self.view.frame.size.width);
        layout.justifyContent = YGJustifyFlexStart;
    }];
    [self.view addSubview:view];
    
    //测试容器
    UIView *templateView = [[UIView alloc] initWithFrame:CGRectZero];
    templateView.backgroundColor = [UIColor cyanColor];
    [templateView configureLayoutWithBlock:^(YGLayout * layout) {
        layout.isEnabled = YES;
        layout.flexDirection = YGFlexDirectionRow;
        layout.width = YGPointValue(self.view.frame.size.width - 50);
    }];
    [view addSubview:templateView];
    
    UILabel *variableLbl = [[UILabel alloc] initWithFrame:CGRectZero];
    variableLbl.backgroundColor = [UIColor greenColor];
    variableLbl.text = @"这是";
    [variableLbl configureLayoutWithBlock:^(YGLayout * layout) {
        layout.isEnabled = YES;
        layout.flexGrow = 0;
    }];
    [templateView addSubview:variableLbl];
    
    UIView *tagView = [[UIView alloc] initWithFrame:CGRectZero];
    tagView.backgroundColor = [UIColor magentaColor];
    [tagView configureLayoutWithBlock:^(YGLayout * layout) {
        layout.isEnabled = YES;
        layout.flexGrow = 2.0;
    }];
    [templateView addSubview:tagView];

    UIImageView *tagImageView = [[UIImageView alloc] initWithFrame:CGRectZero];
    tagImageView.backgroundColor = [UIColor yellowColor];
    tagImageView.image = [UIImage imageNamed:@"add"];
    [tagImageView configureLayoutWithBlock:^(YGLayout * layout) {
        layout.isEnabled = YES;
        layout.flexGrow = 0;
        layout.width = YGPointValue(15);
    }];
    [tagView addSubview:tagImageView];
    
    [view.yoga applyLayoutPreservingOrigin:NO];

image.png image.png

还有在实际开发中的等分控件

- (UIView *)baseClassView {
    if (!_baseClassView) {
        _baseClassView = [[UIView alloc] initWithFrame:CGRectZero];
        _baseClassView.backgroundColor = [UIColor redColor];
        [_baseClassView configureLayoutWithBlock:^(YGLayout * layout) {
            layout.isEnabled = YES;
            layout.marginTop = YGPointValue(64);
            layout.width = YGPointValue(self.view.frame.size.width);
            layout.height = YGPointValue(self.view.frame.size.width);
            layout.justifyContent = YGJustifyFlexStart;
        }];
        [self.view addSubview:_baseClassView];
    }
    return _baseClassView;
}

//均分view
- (void)divideView {
    UIView *view1 = [[UIView alloc] initWithFrame:CGRectZero];
    view1.backgroundColor = [UIColor grayColor];
    [view1 configureLayoutWithBlock:^(YGLayout * layout) {
        layout.isEnabled = YES;
        layout.flexGrow = 1.0;
    }];
    [self.baseClassView addSubview:view1];
    
    UIView *view2 = [[UIView alloc] initWithFrame:CGRectZero];
    view2.backgroundColor = [UIColor cyanColor];
    [view2 configureLayoutWithBlock:^(YGLayout * layout) {
        layout.isEnabled = YES;
        layout.flexGrow = 1.0;
    }];
    [self.baseClassView addSubview:view2];
    
    UIView *view3 = [[UIView alloc] initWithFrame:CGRectZero];
    view3.backgroundColor = [UIColor brownColor];
    [view3 configureLayoutWithBlock:^(YGLayout * layout) {
        layout.isEnabled = YES;
        layout.flexGrow = 1.0;
    }];
    [self.baseClassView addSubview:view3];
    
    [self.baseClassView.yoga applyLayoutPreservingOrigin:NO];
}

image.png

这里是不是超级简单，不用计算，只要设置flexGrow就可以了。