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

2018-02-08 10:26:35来源:https://www.jianshu.com/p/684e99dad419作者:阿汤8阿义人点击

分享


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








最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台