砌體UITableview單元格：多行標籤的Autolayout錯誤

Question

我正在使用 SnapKit學習iOS8中的自動佈局。在對單元格子視圖應用約束時，我遇到了很多錯誤。下面是用作cell.contentview的子視圖的代碼。

class FanFeedDynamicCellView: UIView{ 
var fanProfileImageView:UIImageView? 
var fanNameLabel:UILabel? 
var contentLabel:UILabel? 
var thumbnailImageView:UIImageView? 
var spacierView_FanProfile:UIView? 

override init(frame: CGRect) { 
    super.init(frame : frame) 
    setupViewProperties() 
} 


convenience init() { 
    self.init(frame:CGRect.zero) 
} 

required init(coder aDecoder: NSCoder) { 
    fatalError("This class does not support NSCoding") 
} 


func setupViewProperties() 
{ 

    //1 add fanProfileImageView 
    fanProfileImageView = UIImageView() 
    fanProfileImageView!.image = UIImage(named: "avatar") 
    // setBorder(fanProfileImageView!) 
    self.addSubview(fanProfileImageView!) 

    //2 add Fan Name Label 
    fanNameLabel = UILabel() 
    fanNameLabel!.lineBreakMode = .ByTruncatingTail 
    fanNameLabel!.numberOfLines = 1 
    fanNameLabel!.textAlignment = .Left 
    fanNameLabel!.textColor = UIColor.blackColor() 
    fanNameLabel!.backgroundColor = UIColor(red: 0, green: 0, blue: 1, alpha: 0.1) // light blue 
    self.addSubview(fanNameLabel!) 

    //3 add ContentLabel 
    contentLabel = UILabel() 
    contentLabel!.lineBreakMode = .ByTruncatingTail 
    contentLabel!.numberOfLines = 0 
    contentLabel!.textAlignment = .Left 
    contentLabel!.textColor = UIColor.darkGrayColor() 
    contentLabel!.backgroundColor = UIColor(red: 1, green: 0, blue: 0, alpha: 0.1) // light red 
    self.addSubview(contentLabel!) 

    //4 add Thumbnail View 
    thumbnailImageView = UIImageView() 
    // setBorder(thumbnailImageView!) 
    thumbnailImageView!.contentMode = .ScaleAspectFit 
    thumbnailImageView!.image = UIImage(named: "avatar") 
    self.addSubview(thumbnailImageView!) 


    updateFonts() 
    //Constraints for subviews 
    //setupConstraintsForProperties() 
} 


func updateFonts() 
{ 
    fanNameLabel!.font = UIFont.preferredFontForTextStyle(UIFontTextStyleHeadline) 
    contentLabel!.font = UIFont.preferredFontForTextStyle(UIFontTextStyleCaption2) 
} 


override func updateConstraints() 
{ 
    let padding:UIEdgeInsets = UIEdgeInsetsMake(10, 10, 10, 10) 


    fanProfileImageView!.snp_makeConstraints { (make) -> Void in 
     make.top.equalTo(self.snp_top).offset(padding.top) 
     make.left.equalTo(self.snp_left).offset(padding.left) 
     make.width.height.equalTo(60.0) 
     make.bottom.lessThanOrEqualTo(thumbnailImageView!.snp_top).offset(-padding.bottom) 
    } 

    fanNameLabel!.snp_makeConstraints { (make) -> Void in 
     make.top.equalTo(self.snp_top).offset(padding.top) 
     make.left.equalTo(fanProfileImageView!.snp_right).offset(padding.right) 
     make.right.equalTo(self.snp_right).offset(-padding.right) 
     // make.bottom.lessThanOrEqualTo(contentLabel!.snp_top).offset(-padding.top) 
     make.height.equalTo(20) 
    } 

    contentLabel!.snp_makeConstraints { (make) -> Void in 
     make.top.equalTo(fanNameLabel!.snp_bottom).offset(padding.top) 
     make.left.equalTo(fanProfileImageView!.snp_right).offset(padding.left) 
     make.right.equalTo(self.snp_right).offset(-padding.right) 
     // make.bottom.lessThanOrEqualTo(thumbnailImageView!.snp_top).offset(-padding.bottom) 
     // make.height.greaterThanOrEqualTo(20) 
    } 

    thumbnailImageView!.snp_makeConstraints { (make) -> Void in 
     make.top.greaterThanOrEqualTo(contentLabel!.snp_bottom).offset(padding.top) 
     // make.left.equalTo(padding.left) 
     make.bottom.lessThanOrEqualTo(-padding.bottom) 
     make.height.greaterThanOrEqualTo(20)    
     make.centerX.equalTo(self.snp_centerX) } 
    super.updateConstraints() 
} 



func setBorder(cView:UIView) -> UIView 
{ 
    let cLayer : CALayer = cView.layer 
    cLayer.borderColor = UIColor.redColor().CGColor 
    cLayer.borderWidth = 0.5 
    return cView 
} 

override func layoutSubviews() { 
    super.layoutSubviews() 
    fanNameLabel!.contentHuggingPriorityForAxis(.Vertical) 
    fanNameLabel!.contentCompressionResistancePriorityForAxis(.Vertical) 

    contentLabel!.contentHuggingPriorityForAxis(.Vertical) 
    contentLabel!.contentCompressionResistancePriorityForAxis(.Vertical) 

} 

輸出將與附圖相同。這裏我們使用LeftSide中的配置文件Image。標籤頂部的用戶名稱。標記爲淺橙色的內容標籤將爲多行。低於這個我連接ImageView。當我滾動tableview單元格的高度是不可預知的（佈局自動更改）。將幫助我糾正約束條件以實現此輸出。對於第一次啓動，多行單元格將在一行中。一旦我去看不見的再次可見它採用全標籤內容

Answer 1

您添加更多的約束比你的。你也不需要使用contentHuggingPriority和contentCompressionResistance來達到你想要的。

這是如何使其工作：

FanFeedDynamicCellView

class FanFeedDynamicCellView: UIView { 
    let fanProfileImageView = UIImageView() 
    let fanNameLabel = UILabel() 
    let contentLabel = UILabel() 
    let thumbnailImageView = UIImageView() 

    override init(frame: CGRect) { 
     super.init(frame: frame) 

     setupViews() 
     setupConstraints() 
    } 

    required init?(coder aDecoder: NSCoder) { 
     fatalError("init(coder:) has not been implemented") 
    } 

    func setupViews() { 
     fanProfileImageView.image = UIImage(named: "avatar") 
     addSubview(fanProfileImageView) 

     fanNameLabel.lineBreakMode = .ByTruncatingTail 
     fanNameLabel.font = UIFont.preferredFontForTextStyle(UIFontTextStyleHeadline) 
     fanNameLabel.numberOfLines = 1 
     fanNameLabel.textAlignment = .Left 
     fanNameLabel.textColor = UIColor.blackColor() 
     fanNameLabel.backgroundColor = UIColor(red: 0, green: 0, blue: 1, alpha: 0.1) // light blue 
     addSubview(fanNameLabel) 

     contentLabel.lineBreakMode = .ByTruncatingTail 
     contentLabel.font = UIFont.preferredFontForTextStyle(UIFontTextStyleCaption2) 
     contentLabel.numberOfLines = 0 
     contentLabel.textAlignment = .Left 
     contentLabel.textColor = UIColor.darkGrayColor() 
     contentLabel.backgroundColor = UIColor(red: 1, green: 0, blue: 0, alpha: 0.1) // light red 
     addSubview(contentLabel) 

     thumbnailImageView.contentMode = .ScaleAspectFit 
     thumbnailImageView.image = UIImage(named: "thumbnail.jpg") 
     thumbnailImageView.backgroundColor = UIColor(red: 0, green: 1, blue: 0, alpha: 0.2) // light green 
     addSubview(thumbnailImageView) 
    } 

    func setupConstraints() { 
     let padding:UIEdgeInsets = UIEdgeInsetsMake(10, 10, 10, 10) 

     fanProfileImageView.snp_makeConstraints { (make) -> Void in 
      make.top.equalTo(padding.top) 
      make.left.equalTo(padding.left) 
      make.width.height.equalTo(60) 
      make.bottom.lessThanOrEqualTo(-padding.bottom) 
     } 

     fanNameLabel.snp_makeConstraints { (make) -> Void in 
      make.top.equalTo(fanProfileImageView) 
      make.left.equalTo(fanProfileImageView.snp_right).offset(padding.right) 
      make.right.equalTo(-padding.right) 
     } 

     contentLabel.snp_makeConstraints { (make) -> Void in 
      make.top.equalTo(fanNameLabel.snp_bottom).offset(padding.top) 
      make.left.right.equalTo(fanNameLabel) 
     } 

     thumbnailImageView.snp_makeConstraints { (make) -> Void in 
      make.top.greaterThanOrEqualTo(contentLabel.snp_bottom).offset(padding.top) 
      make.top.greaterThanOrEqualTo(fanProfileImageView.snp_bottom).offset(padding.top) 
      make.left.equalTo(fanProfileImageView) 
      make.right.equalTo(fanNameLabel) 
      make.bottom.equalTo(-padding.bottom) 
     } 
    } 
} 

我不知道爲什麼你創建了一個UIView子類，而不是一個UITableViewCell子類，但我一直認爲並將此視圖添加到自定義UITableViewCell子類

FanFeedTableViewCell

這不僅增加了FanFeedDynamicCellView其contentView：

class FanFeedTableViewCell: UITableViewCell { 
    let fanFeedView = FanFeedDynamicCellView() 

    override init(style: UITableViewCellStyle, reuseIdentifier: String?) { 
     super.init(style: .Subtitle, reuseIdentifier: reuseIdentifier) 
     setupView() 
    } 

    required init?(coder aDecoder: NSCoder) { 
     fatalError("init(coder:) has not been implemented") 
    } 

    func setupView() { 
     contentView.addSubview(fanFeedView) 

     fanFeedView.snp_makeConstraints { (make) -> Void in 
      make.edges.equalTo(contentView) 
     } 
    } 
} 

就是這樣！現在只需在您的UITableView中使用此FanFeedTableViewCell並將文本和圖像設置爲cellForRowAtIndexPath。

不要忘記你的表視圖這樣做是爲了使動態的單元格高度：

tableView.rowHeight = UITableViewAutomaticDimension 
tableView.estimatedRowHeight = 100 // or whatever your estimated row height is. This does not have to be precise 

這是它的外觀：