0

我正在使用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 的个人资料图像上使用。标签顶部的用户名。以浅橙色标记的内容标签将是多行。在此下方，我附加了 ImageView。当我滚动表格视图时，单元格的高度是不可预测的（布局会自动更改）。将帮助我纠正约束以实现此输出。首次启动时，多行单元格将位于 One line 中。一旦我变得不可见，它就会再次可见，它采用完整的标签内容

4

1 回答 1

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)
        }
    }
}

就是这样！现在只需FanFeedTableViewCell在您的中使用它UITableView并将文本和图像设置在cellForRowAtIndexPath.

不要忘记使用表格视图执行此操作以启用动态单元格高度：

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

这是它的外观：

在此处输入图像描述

于 2015-10-22T12:17:16.837 回答