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)

}

输出与附加图像相同。这里我们在左侧的配置文件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子类，但我保持这种方式，只是将此视图添加到自定义{{1} } subclass

<强> FanFeedTableViewCell

这只会将UITableViewCell添加到其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

它的外观如下：

Masonry UITableview Cell：多行标签

1 个答案: