ios ——SDAutolayout自动布局下的cell自定义

想要实现

这种样式的cell ，即与边界有一定距离， 然后又需要cell的高度可以根据标题自适应，所以选择了sdautolayout自动布局框架。

生成一个继承自UITableViewCell的类，首先定义一个白色的背景bgview，然后依次定义四个label，粮给UIimageview

定义组件的约束时，首先定义 bgview ，就遇到了问题 ，因为高度是根据cell内部的label而自适应的，所以卡在了高度的设置上，首先选择的是只写了上左下边界距离，不设置heightis ( )；调试的时候发现tableview的显示一直有问题，最后为bgview的约束补上了.autoHeightRatio ( 0 ) ;  之后，发现显示正确了。

定义组件的位置时最后一个组件是时间文本dateText，设置好了四个约束，然后设置dateText与整个bgview的距离， 所以加上了  [bgView setupAutoHeightWithBottomView:dateText   bottomMargin:5];

还要设置整个bgview与cell的距离，所以加上 [self setupAutoHeightWithBottomView:bgView bottomMargin:5];  

cell部分的代码如下。

- (void)createUI {
    self.backgroundColor = [UIColor clearColor];
    
    // 背景
    bgView = [[UIView alloc] init];
    bgView.backgroundColor = [UIColor whiteColor];
    [bgView.layer setCornerRadius:4.0];
    [self.contentView addSubview:bgView];
    
    // 标题
    titleLabel = [[UILabel alloc] init];
    titleLabel.numberOfLines = 0;
    titleLabel.textColor = kUIColorFromRGB(0xD09055);
    titleLabel.font = [UIFont systemFontOfSize:18];
    [bgView addSubview:titleLabel];
    
    // 创建人图标
    UIImageView *authorImg = [[UIImageView alloc] init];
    authorImg.image = [UIImage imageNamed:@"ic_survey_detail_author"];
    [bgView addSubview:authorImg];
    
    // 创建人标题
    UILabel *authorTitle = [[UILabel alloc] init];
    authorTitle.text = @"创建人";
    authorTitle.textAlignment = NSTextAlignmentLeft;
    authorTitle.textColor = darkTextColor;
    authorTitle.font = [UIFont systemFontOfSize:14];
    [bgView addSubview:authorTitle];
    
    // 创建人标题
    authorText = [[UILabel alloc] init];
    authorText.textAlignment = NSTextAlignmentLeft;
    authorText.textColor = darkTextColor;
    authorText.font = [UIFont systemFontOfSize:14];
    [bgView addSubview:authorText];
    
    // 创建时间图标
    UIImageView *dateImg = [[UIImageView alloc] init];
    dateImg.image = [UIImage imageNamed:@"ic_survey_detail_date"];
    [bgView addSubview:dateImg];
    
    // 创建时间标题
    UILabel *dateTitle = [[UILabel alloc] init];
    dateTitle.text = @"创建时间";
    dateTitle.textAlignment = NSTextAlignmentRight;
    dateTitle.textColor = darkTextColor;
    dateTitle.font = [UIFont systemFontOfSize:14];
    [bgView addSubview:dateTitle];
    
    // 创建时间标题
    dateText = [[UILabel alloc] init];
    dateText.textColor = darkTextColor;
    dateText.textAlignment = NSTextAlignmentLeft;
    dateText.font = [UIFont systemFontOfSize:14];
    [bgView addSubview:dateText];

    bgView.sd_layout
    .leftSpaceToView(self.contentView, 10)
    .rightSpaceToView(self.contentView, 10)
    .topSpaceToView(self.contentView, 5)
    .autoHeightRatio(0);
    
    titleLabel.sd_layout
    .leftSpaceToView(bgView, 10)
    .rightSpaceToView(bgView, 10)
    .topSpaceToView(bgView, 5)
    .autoHeightRatio(0);
    
    authorImg.sd_layout
    .leftSpaceToView(bgView, 10)
    .topSpaceToView(titleLabel, 10)
    .widthIs(14)
    .heightIs(14);
    
    authorTitle.sd_layout
    .leftSpaceToView(authorImg, 8)
    .widthIs(SCREENWIDTH/2 - 40)
    .topSpaceToView(titleLabel, 10)
    .heightIs(14);
    
    authorText.sd_layout
    .leftSpaceToView(bgView, 12)
    .topSpaceToView(authorTitle, 5)
    .widthIs(SCREENWIDTH/2 - 20)
    .heightIs(14);
    
    dateTitle.sd_layout
    .rightSpaceToView(bgView, 10)
    .topSpaceToView(titleLabel, 10)
    .widthIs(67)
    .heightIs(14);
    
    dateImg.sd_layout
    .topSpaceToView(titleLabel, 10)
    .rightSpaceToView(dateTitle, 0)
    .widthIs(14)
    .heightIs(14);
    
    dateText.sd_layout
    .leftEqualToView(dateImg)
    .widthIs(80)
    .topSpaceToView(dateTitle, 5)
    .heightIs(14);
    
    [bgView setupAutoHeightWithBottomView:dateText bottomMargin:5];
    [self setupAutoHeightWithBottomView:bgView bottomMargin:5];
}