上一篇文章主要是围绕一个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就可以了。
