iOS SDAutoLayout布局体验（1）

之前使用过Masonry后对布局有了新的体验，设置控件的位置不单单是x,y，width和height的设置。在Masonry中比如UILabel,UIButton等UI控件采用Masonry是可以不用设置width和height的，Masonry中已实现自适应。使用Masonary在有些布局中着实带来了布局的新视觉。

一直听说SDAutoLayout，不过一只没有机会真正研究和使用，借此没有任务的机会来体验一把。

SDAutoLayout的简介和资料

项目git地址：

SDAutoLayout（一行代码搞定自动布局！）

github地址 https://github.com/gsdios/SDAutoLayout

SDAutoLayout的作者还提供了一些视频资料：

基础版视频教程：http://www.letv.com/ptv/vplay/24038772.html

进阶版视频教程：http://www.letv.com/ptv/vplay/24381390.html

原理简介视频教程：http://www.iqiyi.com/w_19rt0tec4p.html

下面开始SDAutoLayout的体验之旅：

开始前准备

下载SDAutoLayout，导入头文件

#import "SDAutoLayout.h"

1、在控制器中添加一个view0

UIView *view0 = [UIView new];
view0.backgroundColor = [UIColor redColor];
[self.view addSubview:view0];

//开始布局
view0.sd_layout
.leftSpaceToView(self.view,20)
.topSpaceToView(self.view,80)
.heightIs(130)
.widthRatioToView(self.view,_widthRatio);

leftSpaceToView(view,number)

/* 左边到其参照view之间的间距，参数为“(View 或者 view数组, CGFloat)” /

** number这里相当于到其左边view的间隔,

heightIs

/* 高度值，参数为“(CGFloat)” /

**以Is结尾的属性表示要传一个具体值设置宽或高，比如widthIs等

widthRatioToView(view,number)

/* 宽度是参照view宽度的多少倍，参数为“(View, CGFloat)” /

**以RatioToView结尾表示宽或高等是view的number倍

效果图：



2、view0中添加一个view1

UIView *view1 = [UIView new];
view5.backgroundColor = [UIColor yellowColor];
[view0 addSubview:view1];
view1.sd_layout
.centerYEqualToView(view0)
.rightSpaceToView(view0, 10)
.widthRatioToView(view0, 0.5)
.heightIs(20);

centerYEqualToView(view)

/* centerY与参照view相同，参数为“(View)” /

** 表示为设置当前视图的centerY与view的centerY相同

效果图：



3、动态改变view0的布局

//初始化视图比例
_widthRatio = 0.4;
//初始化计时器
_timer = [NSTimer scheduledTimerWithTimeInterval:0.8 target:self selector:@selector(animation) userInfo:nil repeats:YES];

- (void)animation{
if (_widthRatio >= 0.4) {
_widthRatio = 0.1;
} else {
_widthRatio = 0.4;
}
// 开启动画
[UIView animateWithDuration:0.8 animations:^{
self.view0.sd_layout
.widthRatioToView(self.view, _widthRatio);
[self.view0 updateLayout]; // 调用此方法开启view0动画效果
[self.view5 updateLayout]; // 调用此方法开启view5动画效果
}];
}

- (void)viewDidDisappear:(BOOL)animated{
[_timer invalidate];
_timer = nil;
}

updateLayout

/* 更新布局（主动刷新布局，如果你需要设置完布局代码就获得view的frame请调用此方法） /

就是改变布局后，调用该方法会重现进行frame的计算

效果图：



4、在view1中加入两个子view(testLabel和testView)

，然后设置view1高度根据子view内容自适应

UIView *view1 = [UIView new];
view1.backgroundColor = [UIColor grayColor];
self.view1 = view1;
[self.view addSubview:view1];

UILabel *subview1 = [UILabel new]; // 初始化子view1
subview1.text = @"这个紫色的label会根据这些文字内容高度自适应；而这个灰色的父view会根据紫色的label和橙色的view具体情况实现高度自适应。\nGot it! OH YAEH!";
subview1.backgroundColor = [UIColor purpleColor];

UIView *subview2 = [UIView new];    // 初始化子view2
subview2.backgroundColor = [UIColor orangeColor];

// 将子view添加进父view
[self.view1 sd_addSubviews:@[subview1, subview2]];

/*测试1*/
subview1.sd_layout
.leftSpaceToView(self.view1, 10)
.rightSpaceToView(self.view1, 10)
.topSpaceToView(self.view1, 10)
.autoHeightRatio(0); // 设置文本内容自适应，如果这里的参数为大于0的数值则会以此数值作为view的高宽比设置view的高度

subview2.sd_layout
.topSpaceToView(subview1, 10)
.widthRatioToView(subview1, 1)
.heightIs(30)
.leftEqualToView(subview1);

//     /*测试2*/
//    subview2.sd_layout
//    .leftSpaceToView(self.view1, 10)
//    .rightSpaceToView(self.view1, 10)
//    .topSpaceToView(self.view1, 10)
//    .heightIs(30);
//
//    subview1.sd_layout
//    .topSpaceToView(subview2, 10)
//    .widthRatioToView(subview2, 1)
//    .leftEqualToView(subview2)
//    .autoHeightRatio(0);

// view1使用高度根据子view内容自适应，所以不需要设置高度，而是设置“[self.view1 setupAutoHeightWithBottomView:testView bottomMargin:10];”实现高度根据内容自适应
self.view1.sd_layout
.leftSpaceToView(self.view, 10)
.topSpaceToView(self.view, 80)
.rightSpaceToView(self.view, 10);

//设置根据底部视图计算view1的高度
[self.view1 setupAutoHeightWithBottomView:subview1 bottomMargin:10];

本人尝试交换subview1和subview2的位置也同样适用，如测试2所示

效果图：



整理一个博客在谷歌上总是崩溃，重复整理了好几遍，我也是醉了。