I am trying to create the view porgrammatically as show in image below. However the whole thing scatter once I embed the three horizontal stack view in the vertical stack view . I have set the spacing and alignment but for some reason it’s not showing the views properly when i run it in playgroung; the spacing gets messy. How do I resolve this issue ? Please ignore the pencil image. Its just there as a placeholder
import UIKit
import SnapKit
import Foundation
import PlaygroundSupport
extension UIStackView {
func removeAllSubviews() {
arrangedSubviews.forEach { $0.removeFromSuperview() }
}
convenience init(frame: CGRect = .zero,
alignment: UIStackView.Alignment = .fill,
axis: NSLayoutConstraint.Axis = .vertical,
distribution: UIStackView.Distribution = .equalSpacing,
spacing: CGFloat = 0.0) {
self.init(frame: frame)
self.alignment = alignment
self.axis = axis
self.distribution = distribution
self.spacing = spacing
}
}
class UserCell: UIView {
private lazy var reputationLabel: UILabel = {
let label = UILabel()
label.translatesAutoresizingMaskIntoConstraints = false
label.font = UIFont.systemFont(ofSize: 15, weight: .bold)
label.text = "Reputation"
return label
}()
private lazy var increasePerformaceLabel: UILabel = {
let label = UILabel()
label.translatesAutoresizingMaskIntoConstraints = false
label.font = UIFont.systemFont(ofSize: 10, weight: .semibold)
label.text = "Increase Performance"
return label
}()
private lazy var increasePerformaceImage : UIImageView = {
let imageView = UIImageView()
imageView.translatesAutoresizingMaskIntoConstraints = false
imageView.image = UIImage(systemName: "pencil.circle.fill")
return imageView
}()
private lazy var reviewsImage : UIImageView = {
let imageView = UIImageView()
imageView.translatesAutoresizingMaskIntoConstraints = false
imageView.image = UIImage(systemName: "pencil.circle.fill")
return imageView
}()
private lazy var reviewsLabel: UILabel = {
let label = UILabel()
label.translatesAutoresizingMaskIntoConstraints = false
label.font = UIFont.systemFont(ofSize: 13, weight: .bold)
label.text = "Reviews"
return label
}()
private lazy var dateLabel: UILabel = {
let label = UILabel()
label.translatesAutoresizingMaskIntoConstraints = false
label.font = UIFont.systemFont(ofSize: 13, weight: .bold)
label.text = "All Time as of 2020-10-10"
return label
}()
private lazy var scoreLabel: UILabel = {
let label = UILabel()
label.translatesAutoresizingMaskIntoConstraints = false
label.font = UIFont.systemFont(ofSize: 15, weight: .semibold)
label.textColor = .darkGray
label.text = "325"
return label
}()
private lazy var ratingsLabel: UILabel = {
let label = UILabel()
label.translatesAutoresizingMaskIntoConstraints = false
label.font = UIFont.systemFont(ofSize: 12, weight: .semibold)
label.textColor = .darkGray
label.text = "Ratings"
return label
}()
private lazy var ratingsNumberLabel: UILabel = {
let label = UILabel()
label.translatesAutoresizingMaskIntoConstraints = false
label.font = UIFont.systemFont(ofSize: 12, weight: .semibold)
label.textColor = .darkGray
label.text = "4.5"
return label
}()
private lazy var ratingStarImage : UIImageView = {
let imageView = UIImageView()
imageView.translatesAutoresizingMaskIntoConstraints = false
imageView.image = UIImage(systemName: "pencil.circle.fill")
return imageView
}()
override init(frame: CGRect) {
super.init(frame: frame)
addComponents()
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
private func addComponents() {
let reputationStackView = UIStackView(frame: .zero, alignment: .top, axis: .horizontal, distribution: .equalCentering, spacing:25)
let reviewStackView = UIStackView(frame: .zero, alignment: .top, axis: .horizontal, distribution: .equalCentering, spacing: 25)
let ratingStackView = UIStackView(frame: .zero, alignment: .top, axis: .horizontal, distribution: .equalSpacing, spacing: 20)
let dateStackView = UIStackView(frame: .zero, alignment: .top, axis: .horizontal, distribution: .equalSpacing, spacing: 20)
let verticalStackView = UIStackView(frame: .zero, alignment: .top, axis: .vertical, distribution: .fill, spacing: 9)
reputationStackView.addArrangedSubview(reputationLabel)
reputationStackView.addArrangedSubview(increasePerformaceLabel)
reputationStackView.addArrangedSubview(increasePerformaceImage)
reviewStackView.addArrangedSubview(reviewsImage)
reviewStackView.addArrangedSubview(reviewsLabel)
reviewStackView.addArrangedSubview(scoreLabel)
dateStackView.addArrangedSubview(dateLabel)
ratingStackView.addArrangedSubview(ratingsLabel)
ratingStackView.addArrangedSubview(ratingsNumberLabel)
ratingStackView.addArrangedSubview(ratingStarImage)
verticalStackView.addArrangedSubview(reputationStackView)
verticalStackView.addArrangedSubview(reviewStackView)
verticalStackView.addArrangedSubview(dateStackView)
verticalStackView.addArrangedSubview(ratingStackView)
addSubview(verticalStackView)
increasePerformaceImage.snp.makeConstraints { (make) in
make.width.height.equalTo(20)
}
reviewsImage.snp.makeConstraints { (make) in
make.width.height.equalTo(20)
}
ratingStarImage.snp.makeConstraints { (make) in
make.width.height.equalTo(20)
}
verticalStackView.snp.makeConstraints { (make) in
make.edges.equalToSuperview()
}
}
}
let userCell = UserCell(frame: CGRect(x: 0, y: 0, width: 400, height: 100))
PlaygroundPage.current.liveView = userCell
