前言

未来大前端是一个趋势，对于布局方面盒子布局FlexBox也是趋势，我们iOS开发中，怎么使用盒子布局呢？

1. iOS 原生布局

1.1 iOS布局介绍在iOS开发中常用的是下面2种

Frame

frame布局是设置视图的坐标，依赖于父视图，属于相对布局

Auto Layout

Auto Layout布局是苹果出的一种布局方式，原理是通过Cassowary算法进行计算Cassowary是上世纪90年代诞生的一种用于解决用户界面布局问题的算法，它通过将布局问题抽象成线性等式或不等式约束来进行求解，而我们要了解的Auto Layout就是对Cassowary算法的一种实现。通过视图控件之间的关系进行布局，但是本身语法很长，我们通常会使用三方的框架进行实现比如Masonry等

1.2 Auto Layout 原理

我们使用storyboard进行演示，我们确定一个视图的布局

图片

我们上面的蓝色视图就可以依赖下面黄色视图进行布局，设置等宽等高

图片
左对齐

图片底部距离黄色的头部距离

图片当我们旋转屏幕的时候，根据它们的依赖关系也是一样

图片

这就是自动布局，依赖我们的确定的视图，根据依赖关系进行布局。使用Frame表示

UIView *view1 = [[UIView alloc]initWithFrame:CGRectMake(20, 350, 100, 60)];
view1.backgroundColor = [UIColor orangeColor];
[self.view addSubview:view1];
UIView *view2 = [[UIView alloc]init];
view2.backgroundColor = [UIColor greenColor];
 CGRect frame = CGRectMake(0, 0, 0, 0);
 frame.size = view1.frame.size;
frame.origin.x = view1.frame.origin.x;
frame.origin.y = view1.frame.origin.y - view1.frame.size.height  -40;
view2.frame = frame;
[self.view addSubview:view2];

（滑动显示更多）但是我们旋转屏幕的时候，不是我们想要的结果，这就是绝对布局的一些不好的地方

图片

2. YogaKit

2.1 FlexBox 简单介绍FlexBox 是一种盒子布局方式，在前端和页面应用比较广泛，布局的方式主要是row，column， stack3个方向进行布局，控件类似在一个盒子里面，弹性布局。FlexBox 把每个视图，都看作一个矩形盒子，拥有内外边距，沿着主轴方向排列，并且，同级的视图之间没有依赖。采用flex布局的元素，称为Flex容器，简称’容器‘，它所有元素自动成为容器成员，称为Flex项目。弹性布局和方向没有关系，它是一维布局。关于Flexbox的介绍可以我我Flutter学习中关于盒子布局文章。Flutter学习-09- Flutter学习之组件布局2.2 YogaKitYogaKit 是facebook开源的一个关于盒子布局的框架，适用于整个大前端，这里我们主要介绍下iOS中yogakit的使用，查看GitHub上YogaKit我们新建一个项目pod 'YogaKit'我们看下携程的首页，菜单布局

图片我们分析下怎么样布局，布局的方式有很多，我们整体分为4个板块，从上向下布局。前2个布局样式我们可以水平布局，也可以竖直布局，第三个某块分为2个部分，右边的可以水平布局，也可以水平后竖直布局，最后一个水平布局

图片同时我们可以发现组件之间有间距，itemButton之间也有间距。这里要区分下padding 和margin的区别。padding类似我们iOS中的UIEdgeInsets,约束自己的内部边距，margin则相当于距外部的边距

图片

红色的是margin，白色区域相当于padding我们这里设置

#define paddingNo   3
#define marginNo    .5f
#define columnNo    3
#define btnHeight   62
#define btnWidth    ((UI_SCREEN_WIDTH - paddingNo*2 - columnNo*marginNo*2) / columnNo)

2.3 使用

UIView的拓展

图片继续查看YGLayout，YGLayout的isEnabled默认是no，要手动开启，同时要在主线程布局UI。

图片

2.3.1 第一模块和第二模块我们把按钮创建抽出来

- (UIButton *)createBtnWithTitle:(NSString *)title BackgroundColor:(UIColor *)color ImageIndex:(int)index {
  UIButton *commonBtn = [[UIButton alloc] init];
[commonBtn setBackgroundImage:[UIImage imageNamed:[NSString stringWithFormat:@"btnImg_%d", index]] forState:UIControlStateNormal];
 commonBtn.backgroundColor = color;
[commonBtn setTitle:title forState:UIControlStateNormal];
[commonBtn setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
commonBtn.titleLabel.font = [UIFont systemFontOfSize:15];
commonBtn.contentHorizontalAlignment = UIControlContentHorizontalAlignmentLeft;
[commonBtn setTitleEdgeInsets:UIEdgeInsetsMake(index==13?-btnHeight:0, 10, 0, 0)];
[commonBtn addTarget:self action:@selector(commonBtnAction:) forControlEvents:UIControlEventTouchUpInside];
return commonBtn;
}
- (void)commonBtnAction:(UIButton *)sender {
sender.selected = !sender.selected;
UIViewAnimationTransition tra = sender.selected?UIViewAnimationTransitionFlipFromLeft:UIViewAnimationTransitionFlipFromRight;
[UIView animateWithDuration:.35 animations:^{
 [UIView setAnimationTransition:tra forView:sender cache:YES];
}];
}

（滑动显示更多）实现模块一的效果