1. 程式人生 > >ios ——SDAutolayout自動佈局下的cell自定義

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];
}