This is the layout I want to achieve
Label1 UIView Label2 <- horizontally stack view
Label1 UIView Label2
Label1 UIView Label2
Label1 UIView Label2
Label1 UIView Label2
Every horizontally stack view contains a label and view and another label. After that the horizontal stack view is added to a vertical one.
So all of that layout is a vertical stack view.
I want to achieve this inside a UITableViewCell
. Here is my code:
let verticalStackView: UIStackView = {
let hsv = UIStackView()
hsv.axis = .vertical
hsv.alignment = .fill
hsv.distribution = .fill
hsv.spacing = 10
hsv.translatesAutoresizingMaskIntoConstraints = false
return hsv
}()
override func awakeFromNib() {
super.awakeFromNib()
for i in 1..<10 {
let dayLbl: UILabel = {
let l = UILabel()
l.text = "Day " + String(i)
l.font = UIFont.preferredFont(forTextStyle: .caption1)
l.translatesAutoresizingMaskIntoConstraints = false
return l;
}()
let progressBar: ProgressBar = {
let pb = ProgressBar(frame: CGRect(x: 0, y: 0, width: 200, height: 12))
pb.translatesAutoresizingMaskIntoConstraints = false
return pb;
}()
let gradeLbl: UILabel = {
let l = UILabel()
l.text = String(i)
l.font = UIFont.preferredFont(forTextStyle: .headline)
l.translatesAutoresizingMaskIntoConstraints = false
return l;
}()
let horizontalStackView: UIStackView = {
let hsv = UIStackView()
hsv.axis = .horizontal
hsv.alignment = .fill
hsv.distribution = .fill
hsv.spacing = 5
hsv.translatesAutoresizingMaskIntoConstraints = false
return hsv
}()
horizontalStackView.addSubview(dayLbl)
horizontalStackView.addSubview(progressBar)
horizontalStackView.addSubview(gradeLbl)
NSLayoutConstraint.activate([
horizontalStackView.heightAnchor.constraint(equalToConstant: 12)
])
verticalStackView.addSubview(horizontalStackView)
}
contentView.addSubview(verticalStackView)
NSLayoutConstraint.activate([
verticalStackView.topAnchor.constraint(equalTo: vcTitle.bottomAnchor, constant: 30),
verticalStackView.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: 20),
verticalStackView.trailingAnchor.constraint(equalTo: contentView.trailingAnchor, constant: 20),
verticalStackView.bottomAnchor.constraint(equalTo: contentView.bottomAnchor, constant: 30),
])
}
This is what I get:
It was supposed to appear under the "Productivity Chart" title, but it appears on the cell content view x:0 y: 0 location. And there is only one line and everything looks crowded there.
Any idea what I am doing wrong ?
This is how one line should look:
Day 1 ----------------- 7
(where ----- is the view).
edit:
After replacing addSubView
with addArrangedSubview
:
edit 2:
The right part truncated is fixed too. I changed:
verticalStackView.trailingAnchor.constraint(equalTo: contentView.trailingAnchor, constant: 20)
to
contentView.trailingAnchor.constraint(equalTo: verticalStackView.trailingAnchor, constant: 20)
When you are adding new subviews to a UIStackView, you should use addArrangedSubview method.
The stack view ensures that the arrangedSubviews array is always a subset of its subviews array. This method automatically adds the provided view as a subview of the stack view, if it is not already. If the view is already a subview, this operation does not alter the subview ordering.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.