Adding Constraint programmatically swift - ios

Question

Please i need help with the below, i just start learning how to design interface programmatically, after few tutorials i wanted to try something, then i got stucked
I am trying to achieve the below image
but this is what i got
this is my code below
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

I have been able to solve the issue using SnapKit, to achieve the image did something like this
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 )
}