Question

我需要下面的帮助，我只是开始学习如何以编程方式设计界面，经过一些教程我想尝试一些东西，然后我被卡住了

我正在努力实现以下图片

但这就是我得到的

这是我的代码

class FeedsCell: UICollectionViewCell{

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

let thumNailImageView : UIImageView = {
    let imageView = UIImageView()
    imageView.backgroundColor = UIColor.blue
    return imageView
}()

let sourceName:UILabel = {
  let srcLabel = UILabel()
    srcLabel.backgroundColor = UIColor.purple
    srcLabel.translatesAutoresizingMaskIntoConstraints = false
    return srcLabel
}()

let separatorView: UIView = {
   let view = UIView()
    view.backgroundColor = UIColor.black
    return view
}()

func setupViews(){
    addSubview(thumNailImageView)
    addSubview(separatorView)
    addSubview(sourceName)

    addConstraintsWithFormat(format: "H:|-16-[v0(194)]", views: thumNailImageView)

    addConstraintsWithFormat(format: "V:|-16-[v0]-16-[v1(1)]|", views: thumNailImageView, separatorView)

    addConstraintsWithFormat(format: "H:|[v0]|", views: separatorView)



    //left Constriants
    addConstraint(NSLayoutConstraint(item: sourceName, attribute: .left, relatedBy: .equal, toItem: thumNailImageView, attribute: .right, multiplier: 1, constant: 8))

    //Right constraints
    addConstraint(NSLayoutConstraint(item: sourceName, attribute: .right, relatedBy: .equal, toItem: thumNailImageView, attribute: .right, multiplier: 1, constant: 0))

    addConstraintsWithFormat(format: "H:|-8-[v0]-8-|", views: sourceName)
    addConstraintsWithFormat(format: "V:|-8-[v0(20)]", views: sourceName)

}

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

}


extension UIView{
    func addConstraintsWithFormat(format: String, views: UIView...){

        var viewDictionary = [String: UIView]()
        for(index, view) in views.enumerated(){
            let key = "v\(index)"
            view.translatesAutoresizingMaskIntoConstraints = false
            viewDictionary[key] = view
        }


    addConstraints(NSLayoutConstraint.constraints(withVisualFormat: format, options: NSLayoutFormatOptions(), metrics: nil, views: viewDictionary))
    }
}

Answer 1

我已经能够使用SnapKit解决问题，实现图像做了类似的事情

let screenFrame = UIScreen.main.bounds

    thumNailImageView.snp.makeConstraints { (make) in
        make.width.equalTo(194)
        make.top.equalTo(contentView).offset(20)
        make.left.equalTo(contentView).offset(20)
        make.bottom.equalTo(contentView).offset(-20)
    }

    sourceName.snp.makeConstraints { (make) in
        make.width.equalTo(screenFrame.width/2 - 40 )
        make.height.equalTo(20)
        make.top.equalTo(contentView).offset(20)
        make.left.equalTo(contentView).offset(screenFrame.width/2 + 20 )
    }

    postTitle.snp.makeConstraints { (make) in
        make.width.equalTo(screenFrame.width/2 - 40 )
        make.height.equalTo(30)
        make.top.equalTo(sourceName).offset(30)
        make.left.equalTo(contentView).offset(screenFrame.width/2 + 20 )
    }

    timeStamp.snp.makeConstraints { (make) in
        make.width.equalTo(screenFrame.width/2 - 40 )
        make.height.equalTo(10)
        make.top.equalTo(postTitle).offset(40)
        make.left.equalTo(contentView).offset(screenFrame.width/2 + 20 )
    }

    postContent.snp.makeConstraints { (make) in
        make.width.equalTo(screenFrame.width/2 - 40 )
        make.height.equalTo(60)
        make.top.equalTo(timeStamp).offset(20)
        make.left.equalTo(contentView).offset(screenFrame.width/2 + 20 )
    }

以编程方式快速添加约束

1 个答案: