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

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

这也是可以的，看到这里了是不是眼中已经出现无数个希望和诗。