SDAutoLayout 使用简介

都说 SDAutoLout 比 Masonry 好用.到底是哪方便优于它呢?下面我们来看看网上的一个例子,来分析用法.
请看下面这个图:

图上所示 现在我要讲的就是这种形式的cell的布局

UIImageView *view0 = [UIImageView new];//创建头像
UILabel *view1 = [UILabel new];//用户名
UILabel *view2 = [UILabel new];//内容
UILabel *view3 = [UILabel new];//创建时间
UIImageView *view4 = [UIImageView new];//创建图片
_view0 = view0;
_view1 = view1;
_view2 = view2;
_view3 = view3;
//把控件添加到contentView上
[self.contentView addSubview:view0];
[self.contentView addSubview:view1];
[self.contentView addSubview:view2];
[self.contentView addSubview:view3];
[self.contentView addSubview:view4];

在contentView进行布局

//头像
_view0.sd_layout
.widthIs(60)  //设置它的宽度
.heightIs(60)  //设置它的高度
.topSpaceToView(self.contentView, 10)  //距上10
.leftSpaceToView(self.contentView, 10);  //距左边10
//用户名
_view1.sd_layout
.topEqualToView(_view0)  //和头像平行
.leftSpaceToView(_view0, 10)  //与头像相距10
.rightSpaceToView(self.contentView, 10)  //距离右边10
.heightRatioToView(_view0, 0.4);  // 与view0的高度之比为0.4

//内容
_view2.sd_layout
.topSpaceToView(_view1, 10)  //距离view1的距离为10
.rightSpaceToView(self.contentView, 10)  //距离右边边距10
.leftEqualToView(_view1)  //与view1左对齐
.autoHeightRatio(0);  // 0 表示自适应高度

//创建时间
 _view3.sd_layout
 .topSpaceToView(_view4, 10)  //距view4 上10
 .rightSpaceToView(self.contentView, 10)  //距右边距10
 .widthIs(300)  //宽度300
 .autoHeightRatio(0);  //自适应高度

 //创建图片
 _view4.sd_layout
 .widthIs(100)  //宽度为100

看完上面布局代码后,是不是觉得很简单啊!

下面介绍下更具体的用法:

tableview和cell高度自适应：

普通（简化）版【推荐使用】：tableview 高度自适应设置只需要2步

1. >> 设置cell高度自适应：
// cell布局设置好之后调用此方法就可以实现高度自适应（注意：如果用高度自适应则不要再以cell的底边为参照去布局其子view）
[cell setupAutoHeightWithBottomView:_view4 bottomMargin:10];

2. >> 获取自动计算出的cell高度

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
    id model = self.modelsArray[indexPath.row];
    // 获取cell高度
    return [self.tableView cellHeightForIndexPath:indexPath model:model keyPath:@"model" cellClass:[DemoVC9Cell class]  contentViewWidth:cellContentViewWith];
}

升级版（适应于cell条数少于100的tableview）：tableview 高度自适应设置只需要2步

1. >> 设置cell高度自适应：
// cell布局设置好之后调用此方法就可以实现高度自适应（注意：如果用高度自适应则不要再以cell的底边为参照去布局其子view）
[cell setupAutoHeightWithBottomView:_view4 bottomMargin:10];

2. >> 获取自动计算出的cell高度 

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
// 获取cell高度
return [self cellHeightForIndexPath:indexPath cellContentViewWidth:[UIScreen mainScreen].bounds.size.width];
}

普通view的自动布局：

用法示例

/* 用法一 */
    _view.sd_layout
    .leftSpaceToView(self.view, 10)
    .topSpaceToView(self.view, 80)
    .heightIs(130)
    .widthRatioToView(self.view, 0.4);

/* 用法二 （一行代码搞定，其实用法一也是一行代码） */
_view.sd_layout.leftSpaceToView(self.view, 10).topSpaceToView(self.view,80).heightIs(130).widthRatioToView(self.view, 0.4);


>> UILabel文字自适应：
// autoHeightRatio() 传0则根据文字自动计算高度（传大于0的值则根据此数值设置高度和宽度的比值）
_label.sd_layout.autoHeightRatio(0);

*******************************************************************************

    注意:先把需要自动布局的view加入父view然后在进行自动布局，例： 

    UIView *view0 = [UIView new];
    UIView *view1 = [UIView new];
    [self.view addSubview:view0];
    [self.view addSubview:view1];

    view0.sd_layout
    .leftSpaceToView(self.view, 10)
    .topSpaceToView(self.view, 80)
    .heightIs(100)
    .widthRatioToView(self.view, 0.4);

    view1.sd_layout
    .leftSpaceToView(view0, 10)
    .topEqualToView(view0)
    .heightRatioToView(view0, 1)
    .rightSpaceToView(self.view, 10);
*******************************************************************************

自动布局用法简析

1.1 > leftSpaceToView(self.view, 10)

方法名中带有“SpaceToView”的方法表示到某个参照view的间距，需要传递2个参数：（UIView）参照view 和 （CGFloat）间距数值

1.2 > widthRatioToView(self.view, 1)

方法名中带有“RatioToView”的方法表示view的宽度或者高度等属性相对于参照view的对应属性值的比例，需要传递2个参数：（UIView）参照view 和 （CGFloat）倍数

1.3 > topEqualToView(view)

方法名中带有“EqualToView”的方法表示view的某一属性等于参照view的对应的属性值，需要传递1个参数：（UIView）参照view

1.4 > widthIs(100)

方法名中带有“Is”的方法表示view的某一属性值等于参数数值，需要传递1个参数：（CGFloat）数值

注意事项:

• 如果需要用“断言”调试程序请打开此宏(位于UIView+SDAutoLayout.h)
  //#define SDDebugWithAssert

• 设置高度时不起作用或闪退

  -(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
  {
  return [self.tableView cellHeightForIndexPath:indexPath model:self.modelsArray[indexPath.row] keyPath:@"model" cellClass:[DemoVC5CellTableViewCell class] contentViewWidth:[self cellContentViewWith]];
  }
  

  按照上述方法设置后，cell未按照正确方式排版或自适应，可能原因：使用KVC模式，keyPath中的key值必须跟cell中model的属性名称一致，包括大小写，否则会闪退。

• 一个cell在多出用到，但又有些区别
  此种方式可参考SDAutoLayout的demo中模仿微信的功能，其中的显示更多按钮可供参考，本人尝试后发现其中的button是否显示貌似必须有个数据在model中进行判断，且判断完成后要重新设置其相关的视图约束，否则显示混乱。

github地址：

https://github.com/gsdios/SDAutoLayout