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

最新推荐文章于 2020-07-26 23:16:31 发布

always_Kyathe

最新推荐文章于 2020-07-26 23:16:31 发布

阅读量564

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/always_Kyathe/article/details/83419906

本文介绍了如何使用SDAutoLayout在iOS中创建一个具有边距的自适应高度的UITableViewCell。通过定义背景视图和多个UILabel，重点解决了在设置约束时遇到的cell高度自适应问题。通过为背景视图添加.autoHeightRatio(0)约束，并为各组件设置合适的间距，实现了所需的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

想要实现

这种样式的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];
}