Yoga是facebook开源的一个编写视图的跨平台代码，YogaKit是用于iOS开发的。它是基于 Flexbox，它让布局变得更简单。可以用它替代 iOS 的自动布局和 web 的 CSS，也可以将它当成一种通用的布局系统使用。
Yoga 最初源自 Facebook 在 2014 年的一个开源的 css 布局开源库，在 2016 年经过修改，更名为 Yoga。Yoga 支持多个平台，包括 Java、C#、C 和 Swift。
下面就讲一下Yoga在iOS开发中的使用(oc代码)：
使用CocoaPods进行安装：
#这里使用1.5的版本
platform :ios, '8.0'
use_frameworks!
target 'YogaTryout' do
pod 'YogaKit', '~> 1.5'
end
执行命令：
pod install
安装成功提示：
Analyzing dependencies
Downloading dependencies
Installing Yoga (1.5.0)
Installing YogaKit (1.5.0)
Generating Pods project
Integrating client project
[!] Please close any current Xcode sessions and use `YogaTryout.xcworkspace` for this project from now on.
Sending stats
Pod installation complete! There is 1 dependency from the Podfile and 2 total pods installed.
代码中导入#import <YogaKit/UIView+Yoga.h>
先布局一个试试手
UIView *view = [[UIView alloc] initWithFrame:CGRectZero];
view.backgroundColor = [UIColor redColor];
[view configureLayoutWithBlock:^(YGLayout * layout) {
layout.isEnabled = YES;
layout.width = YGPointValue(320);
layout.height = YGPointValue(80);
layout.marginTop = YGPointValue(64);
layout.marginLeft = YGPointValue(0);
}];
[self.view addSubview:view];
[view.yoga applyLayoutPreservingOrigin:NO];
看了这个代码是不是感觉很像Masonry的写法，要的就是这种结果，耐心请往下看。
image.png
我将top和left都给删掉有什么结果了
UIView *view = [[UIView alloc] initWithFrame:CGRectZero];
view.backgroundColor = [UIColor redColor];
[view configureLayoutWithBlock:^(YGLayout * layout) {
layout.isEnabled = YES;
layout.width = YGPointValue(320);
layout.height = YGPointValue(80);
}];
[self.view addSubview:view];
[view.yoga applyLayoutPreservingOrigin:NO];
image.png
正常运行只是默认x,y都在起始点。
再次将代码简化
这样写大家觉得是否可行了？
UIView *view = [[UIView alloc] initWithFrame:CGRectZero];
view.backgroundColor = [UIColor redColor];
[view configureLayoutWithBlock:^(YGLayout * layout) {
layout.isEnabled = YES;
layout.padding = YGPointValue(self.view.frame.size.width/2);
}];
[self.view addSubview:view];
[view.yoga applyLayoutPreservingOrigin:NO];
image.png
答案是肯定的，还是能运行。padding指的是从x,y的零点开始width和height是设置值的2倍。
在开发布局中有时导航栏偶尔会带来苦恼，那我能不能在上一个代码中就添加一个top就可以避开导航栏了？
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];
[view.yoga applyLayoutPreservingOrigin:NO];
image.png
这也是可以的，看到这里了是不是眼中已经出现无数个希望和诗。
