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

使用YogaKit来做一个九宫格，看看用它是实现有多简单。
代码：

//九宫格
- (void)scratchableLatexView {
    NSArray *arr = [NSArray arrayWithObjects:@"1",@"2",@"3",@"4",@"5",@"6",@"7", nil];
    
    UIView *templateView = [[UIView alloc] initWithFrame:CGRectZero];
    templateView.backgroundColor = [UIColor greenColor];
    [templateView configureLayoutWithBlock:^(YGLayout * layout) {
        layout.isEnabled = YES;
        layout.flexDirection = YGFlexDirectionRow;
        layout.height = YGPointValue(40*(arr.count/4));
        layout.width = YGPointValue(UI_SCREEN_WIDTH);
        layout.flexWrap = YGWrapWrap;
    }];
    [self.baseClassView addSubview:templateView];
    
    for (NSString *str in arr) {
        UIView *view = [[UIView alloc] initWithFrame:CGRectZero];
        view.backgroundColor = randomColor;
        [view configureLayoutWithBlock:^(YGLayout * layout) {
            layout.isEnabled = YES;
            layout.width = YGPointValue(UI_SCREEN_WIDTH/4);
            layout.height = YGPointValue(40);
        }];
        [templateView addSubview:view];
        
        UILabel *lbl = [[UILabel alloc] initWithFrame:CGRectZero];
        lbl.text = str;
        lbl.textAlignment = NSTextAlignmentCenter;
        [lbl configureLayoutWithBlock:^(YGLayout * layout) {
            layout.isEnabled = YES;
            layout.flexGrow = 1.0;
            layout.padding = YGPointValue(0);
        }];
        [view addSubview:lbl];
    }
    [self.baseClassView.yoga applyLayoutPreservingOrigin:NO];
}

效果：

image.png

代码中的计算量是不是非常少，都是一些布局的东西。这里代码中最核心代码就是能换行layout.flexWrap = YGWrapWrap，所有的代码都是围绕它而转动的。

下面就是Flexbox对flex-wrap属性的介绍。
1.2 flex-wrap属性

默认情况下 Flex 跟 LinearLayout 一样，都是不带换行排列的，但是 flex-wrap 属性可以支持换行排列。这个也比 LinearLayout屌了许多。它有三个值：nowrap、wrap、wrap-reverse

• nowrap （默认值）：不换行

  
  
  

  nowrap

• wrap：换行，第一行在上方。

  
  
  

  wrap

• wrap-reverse：换行，第一行在下方。

  
  
  

  wrap-reverse