FlexBox - YogaKit

作者: 观星 | 来源:发表于2019-10-17 15:02 被阅读0次

FlexBox - YogaKit

FlexBox是一套通用的布局协议，YogaKit实现了这个协议，iOS端可以使用YogaKit来实现FlexBox布局。FlexBox和UIStackView以及Android的LineLayout有相通的地方，优势在于FlexBox是跨平台的，功能上也更强一点。

YogaKit依据你的设置计算出相关的view的frame,直接设置frame,所以和AutoLayout可以混合使用，对同一个view进行设置，以AutoLayout的设置为准。

YogaKit是从从上往下进行计算的，使用过程中需要保证flex container的frame有值，这样它的flex item才会计算出frame，否则都是CGRectZero。

flex direction

布局延伸的方向，确定了主轴和副轴，添加的元素沿着主轴的方向进行排列。

Row

水平方向从左往右进行延伸，主轴为水平方向，副轴为竖直方向
Row Reverse

水平方向从左往右进行延伸，主轴为水平方向，副轴为竖直方向
Column

竖直方向从上往下进行延伸，主轴为竖直方向，副轴为水平方向
Column Reverse

竖直方向从下往上进行延伸，主轴为竖直方向，副轴为水平方向

justify & align-items

justify 进一步明确了元素在主轴方向如何排列，align-items 进一步明确了元素在副轴方向如何排列

flex start
center
end
space between
space around
space evenly
stretch

flex-wrap (适用于父类容器上)

设置或检索伸缩盒对象的子元素超出父容器时是否换行

padding & margin

iOS 上 padding 对应的是 content inserts，但是 iOS 大部分控件都没有padding,相信很多人都写过一个继承自 UILabel的控件来提供设置 content inserts 的控件，有了YogaKit，那个类以后用不上了。

padding 指的是自身内边距，margin 指的是外边距，@"H:|-20-[redView]-20-|"，这条VFL里的20就是margin。

display

是否显示这个元素，如果为none,则不显示，也不参与计算

markDirty

标记元素需要重新计算位置，只对叶子节点生效。

// 获取验证码 -> 重发
- (void)codeButtonClicked:(UIButton *)button {
    [button setTitle:@"重发" forState:UIControlStateNormal];
    button.superview.yoga.marginTop = YGPointValue(0);
    [button.yoga markDirty];
    [button.superview.yoga applyLayoutPreservingOrigin:YES];
}

flexGrow

flexGrow决定剩余空间怎么分配，含义类似于layout_weight.如果flex item的flexGrow为0，该flex item不会占用剩余的空间。如果多个flex item的flexGrow不为0，则按flexGrow的值按比例进行划分。

flexShrink

flexShrink决定空间不足，怎么缩放

align-items、align-self、align-content、

align-item

属性需要施加在 flex 容器上，它规定的是 flex 容器中所有 item 在副轴中的对齐方式
```
// flex item在副轴拉伸填满剩余空间
layout.alignItems = YGAlignStretch;
```
align-self

属性则施加在 flex 容器中的 item 上，允许单个项目有与其他项目不一样的对齐方式，它覆盖了外部容器规定的 align-items 属性，同样也只规定在交叉轴上的对齐方式
align-content

对比 align-items 和 align-self 直接移动 item 自身在交叉轴上的基线，align-content 移动的是容器自身的 flex line，并仅对多行的项目起作用

常见问题

Pod

使用pod 'YogaKit'安装的时候，这个库包含了一个swift文件，对于纯OC的项目，这会报错。

可以改成
```
pod 'IGListKit','2.1.0'
pod 'Yoga','1.14.0'
```
然后将YogaKit的代码(删除掉swfit文件后)copy到项目中，这部分不使用cocopods进行管理，这样改动比较小
AutoLayout

YogaKit布局设置的是view的frame，所以如果对视图添加约束，视图最终的大小以约束设置为准。

涉及到其他的视图时，参与计算的是YogaKit自己计算出来的view.frame,而不是约束设置的值。

实践

标签流式布局

- (void)tagLayout {
    NSArray *tags = @[@"投资理财",@"超高收益",@"七日年化收益",@"支付宝",@"微信",@"云闪付",@"花呗"];
    
    UIView *tagBgView = [[UIView alloc] init];
    
    tagBgView.backgroundColor = [UIColor lightGrayColor];
    [tagBgView configureLayoutWithBlock:^(YGLayout * _Nonnull layout) {
        layout.isEnabled = YES;
        layout.flexDirection = YGFlexDirectionRow;
        layout.marginTop = YGPointValue(100);
        layout.paddingBottom = YGPointValue(10);
        layout.width = YGPointValue([UIScreen mainScreen].bounds.size.width); 
        // 不设置高度，让高度自适应
        layout.flexWrap = YGWrapWrap;
    }];
    
    [self.view addSubview:tagBgView];
    
    for (NSString *obj in tags) {
        UILabel *label = [[UILabel alloc] init];
        
        label.text = obj;
        label.backgroundColor = [UIColor orangeColor];
        [label configureLayoutWithBlock:^(YGLayout * _Nonnull layout) {
            layout.isEnabled =YES;
            layout.marginLeft = YGPointValue(10);
            layout.marginTop = YGPointValue(10);
        }];
        
        [tagBgView addSubview:label];
    }
        
    self.view.yoga.isEnabled = YES;
    [self.view.yoga applyLayoutPreservingOrigin:NO];
}

更新布局

很多时候，我们的视图大小是依据视图内容来决定的,比如按钮的宽依据title进行调整，title变了，宽也要变，暂时只找到用markDirty实现的方法。

FlexBox是一套通用的布局协议，YogaKit实现了这个协议，iOS端可以使用YogaKit来实现FlexBox布局。FlexBox和UIStackView以及Android的LineLayout有相通的地方，优势在于FlexBox是跨平台的，功能上也更强一点。

YogaKit依据你的设置计算出相关的view的frame,直接设置frame,所以和AutoLayout可以混合使用，对同一个view进行设置，以AutoLayout的设置为准。

YogaKit是从从上往下进行计算的，使用过程中需要保证flex container的frame有值，这样它的flex item才会计算出frame，否则都是CGRectZero。

flex direction

布局延伸的方向，确定了主轴和副轴，添加的元素沿着主轴的方向进行排列。

Row

水平方向从左往右进行延伸，主轴为水平方向，副轴为竖直方向
Row Reverse

水平方向从左往右进行延伸，主轴为水平方向，副轴为竖直方向
Column

竖直方向从上往下进行延伸，主轴为竖直方向，副轴为水平方向
Column Reverse

竖直方向从下往上进行延伸，主轴为竖直方向，副轴为水平方向

justify & align-items

justify 进一步明确了元素在主轴方向如何排列，align-items 进一步明确了元素在副轴方向如何排列

flex start
center
end
space between
space around
space evenly
stretch

flex-wrap (适用于父类容器上)

设置或检索伸缩盒对象的子元素超出父容器时是否换行

padding & margin

iOS 上 padding 对应的是 content inserts，但是 iOS 大部分控件都没有padding,相信很多人都写过一个继承自 UILabel的控件来提供设置 content inserts 的控件，有了YogaKit，那个类以后用不上了。

padding 指的是自身内边距，margin 指的是外边距，@"H:|-20-[redView]-20-|"，这条VFL里的20就是margin。

display

是否显示这个元素，如果为none,则不显示，也不参与计算

markDirty

标记元素需要重新计算位置，只对叶子节点生效。

// 获取验证码 -> 重发
- (void)codeButtonClicked:(UIButton *)button {
    [button setTitle:@"重发" forState:UIControlStateNormal];
    button.superview.yoga.marginTop = YGPointValue(0);
    [button.yoga markDirty];
    [button.superview.yoga applyLayoutPreservingOrigin:YES];
}

flexGrow

flexGrow决定剩余空间怎么分配，含义类似于layout_weight.如果flex item的flexGrow为0，该flex item不会占用剩余的空间。如果多个flex item的flexGrow不为0，则按flexGrow的值按比例进行划分。

flexShrink

flexShrink决定空间不足，怎么缩放

align-items、align-self、align-content、

align-item

属性需要施加在 flex 容器上，它规定的是 flex 容器中所有 item 在副轴中的对齐方式
```
// flex item在副轴拉伸填满剩余空间
layout.alignItems = YGAlignStretch;
```
align-self

属性则施加在 flex 容器中的 item 上，允许单个项目有与其他项目不一样的对齐方式，它覆盖了外部容器规定的 align-items 属性，同样也只规定在交叉轴上的对齐方式
align-content

对比 align-items 和 align-self 直接移动 item 自身在交叉轴上的基线，align-content 移动的是容器自身的 flex line，并仅对多行的项目起作用

常见问题

Pod

使用pod 'YogaKit'安装的时候，这个库包含了一个swift文件，对于纯OC的项目，这会报错。

可以改成
```
pod 'IGListKit','2.1.0'
pod 'Yoga','1.14.0'
```
然后将YogaKit的代码(删除掉swfit文件后)copy到项目中，这部分不使用cocopods进行管理，这样改动比较小
AutoLayout

YogaKit布局设置的是view的frame，所以如果对视图添加约束，视图最终的大小以约束设置为准。

涉及到其他的视图时，参与计算的是YogaKit自己计算出来的view.frame,而不是约束设置的值。

实践

标签流式布局

- (void)tagLayout {
    NSArray *tags = @[@"投资理财",@"超高收益",@"七日年化收益",@"支付宝",@"微信",@"云闪付",@"花呗"];
    
    UIView *tagBgView = [[UIView alloc] init];
    
    tagBgView.backgroundColor = [UIColor lightGrayColor];
    [tagBgView configureLayoutWithBlock:^(YGLayout * _Nonnull layout) {
        layout.isEnabled = YES;
        layout.flexDirection = YGFlexDirectionRow;
        layout.marginTop = YGPointValue(100);
        layout.paddingBottom = YGPointValue(10);
        layout.width = YGPointValue([UIScreen mainScreen].bounds.size.width); 
        // 不设置高度，让高度自适应
        layout.flexWrap = YGWrapWrap;
    }];
    
    [self.view addSubview:tagBgView];
    
    for (NSString *obj in tags) {
        UILabel *label = [[UILabel alloc] init];
        
        label.text = obj;
        label.backgroundColor = [UIColor orangeColor];
        [label configureLayoutWithBlock:^(YGLayout * _Nonnull layout) {
            layout.isEnabled =YES;
            layout.marginLeft = YGPointValue(10);
            layout.marginTop = YGPointValue(10);
        }];
        
        [tagBgView addSubview:label];
    }
        
    self.view.yoga.isEnabled = YES;
    [self.view.yoga applyLayoutPreservingOrigin:NO];
}

截图

更新布局

很多时候，我们的视图大小是依据视图内容来决定的,比如按钮的宽依据title进行调整，title变了，宽也要变，暂时只找到用markDirty实现的方法。

网友评论

本文标题：FlexBox - YogaKit

本文链接：https://www.haomeiwen.com/subject/vezmmctx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

FlexBox - YogaKit

FlexBox - YogaKit

flex direction

justify & align-items

padding & margin

display

markDirty

flexGrow

flexShrink

align-items、align-self、align-content、

常见问题

实践

flex direction

justify & align-items

padding & margin

display

markDirty

flexGrow

flexShrink

align-items、align-self、align-content、

常见问题

实践

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读