I have a title label as defined below:
private lazy var titleLabel: UILabel = {
let label = UILabel()
label.numberOfLines = 2
label.setContentCompressionResistancePriority(.init(rawValue: 999), for: .vertical)
return label
}()
private lazy var descriptionLabel: UILabel = {
let label = UILabel()
label.numberOfLines = 0
label.lineBreakMode = .byTruncatingTail
return label
}()
titleLabel can grow and force to shrink the descriptionLabel.
The cell is height is fixed to 120 or 78. When the cell height is 78, the descriptionLabel height is 0
Both are added to a UIStackview
private lazy var labelStackView: UIStackView = {
let stackView = UIStackView()
stackView.addArrangedSubview(titleLabel)
stackView.addArrangedSubview(descriptionLabel)
stackView.axis = .vertical
stackView.distribution = .fill
return stackView
}()
The stackView is added inside the containerView with padding to the top, left, right & bottom. The containerView is pinned to the edges of the contentView.
The distribution on the stackView is set to fill to allow descriptionLabel to shrink. This set up causes the constraint to break.
Issue
titleLabel - Height is ambiguous for UILabel
descriptionLabel - Height and vertical position are ambiguous for UILabel
Is there a way to achieve this without breaking the constraint?
I tried setting content resistance priority for both labels as follows:
titleLabel -> label.setContentCompressionResistancePriority(.init(rawValue: 999), for: .vertical)
descriptionLabel -> label.setContentCompressionResistancePriority(.init(rawValue: 998), for: .vertical)
I still had no luck.
By setting a content hugging priority on the descriptionLabel, I was able to fix the layout ambiguity.
private lazy var descriptionLabel: UILabel = {
let label = UILabel()
label.numberOfLines = 0
label.lineBreakMode = .byTruncatingTail
label.setContentHuggingPriority(.high, for: .vertical)
return label
}()
Related
I have a label containing strings of variable size. The label is embedded in a vertical stack of a fixed width.
var productName: UILabel = {
let lbl = UILabel()
lbl.translatesAutoresizingMaskIntoConstraints = false
lbl.numberOfLines = 0
lbl.sizeToFit()
lbl.textColor = .black
lbl.font = UIFont(name: "HelveticaNeue", size: 13)
lbl.textAlignment = .center
return lbl
}()
var Vstack: UIStackView = {
let stack = UIStackView()
stack.axis = .vertical
stack.alignment = .center
return stack
}()
I need the height of this label after inserting text into it because it dictates the size of a tableViewCell it is in. As the string it contains is variable and the label itself is "sizeToFit", I have been unable to calculate its height with the first things that came to mind:
productName.frame.height
productName.frame.size.height
productName.layer.frame.height
Is there any way to get the height of a label after inserting text into it?
You can use intrinsicContentSize which returns the CGSize of the label text the UILabel element,
You can read more about it in this article: intrinsicContentSize
I have a UIStackView however, the first view of the subViews is a UILabel and it is not sizing it accordingly.
My code is as per below;
private let stackView: UIStackView = {
let view = UIStackView()
view.translatesAutoresizingMaskIntoConstraints = false
view.axis = .horizontal
view.distribution = .fillProportionally
view.alignment = .trailing
view.spacing = 8
return view
}()
and I, of course, add my subViews within init as below;
stackView.addArrangedSubview(currentBidLabel)
stackView.addArrangedSubview(seperator)
stackView.addArrangedSubview(adCreatedAtLabel)
stackView.addArrangedSubview(moreButton)
My current result is as per the illustration below;
The result I'm looking for is the following;
Red = Dynamic Label Width (same as Blue)
Green = Fixed Width
Blue = Fill Remaining Space
Cyan = Fixed Width
You should set the desired ContentHuggingPriority for each label. The following setup will be matched to your needs
redLabel.setContentHuggingPriority(. required, for: .horizontal)
greenLabel.setContentHuggingPriority(.required, for: .horizontal)
blueLabel.setContentHuggingPriority(.defaultLow, for: .horizontal)
cyanLabel.setContentHuggingPriority(.required, for: .horizontal)
defaultLow means to fill the rest.
required means fit first.
And other values should be between these two.
I have uilabel with number of lines 0 and set programatic constrains for 4 edges pin to superview. when I run I see the label is not showing multilines, but after I orient the device for first time then it is started showing the multi lines, any help?
private let headerLabel: UILabel = {
let label = UILabel()
label.translatesAutoresizingMaskIntoConstraints = false
label.numberOfLines = 0
return label
}()
let leading = headerLabel.leadingAnchor.constraint(equalTo: contentView.leadingAnchor)
let top = headerLabel.topAnchor.constraint(equalTo: contentView.topAnchor)
let trailing = headerLabel.trailingAnchor.constraint(equalTo: contentView.trailingAnchor)
let bottom = headerLabel.bottomAnchor.constraint(equalTo: contentView.bottomAnchor)
NSLayoutConstraint.activate([leading, top, trailing, bottom])
Pin the label to be horizontally and vertically in the middle of the superview.
Add leading trailing top-bottom constraints to be greater than equal to 10
set number of lines to 0
You may even make the label scroll when the text is big enough.
I am just giving 50 topAnchor more. So, you can see label below status bar.
private let lbl: UILabel = {
let label = UILabel()
label.translatesAutoresizingMaskIntoConstraints = false
label.numberOfLines = 0
return label
}()
override func viewDidLoad() {
super.viewDidLoad()
lbl.text = "The quick brown fox jumps over the lazy dog. "
view.addSubview(lbl)
let leading = lbl.leadingAnchor.constraint(equalTo: view.leadingAnchor)
let top = lbl.topAnchor.constraint(equalTo: view.topAnchor, constant: 50)
let trailing = lbl.trailingAnchor.constraint(equalTo: view.trailingAnchor)
let bottom = lbl.trailingAnchor.constraint(equalTo: view.trailingAnchor)
let constraintArray = [leading,top,trailing,bottom]
for item in constraintArray {
item.isActive = true
}
}
I' struggling with some basic UIStackView distribution and alignment stuff.
I have an UICollectionViewCell which has a horizontal UIStackView at the contentView subview. This UIStackView has a vertical UIStackView for the three labels itself, and of course the UIImageView.
This is the code snippet for the screenshot below:
func createSubViews() {
// contains the UIStackview with the 3 labels and the UIImageView
containerStackView = UIStackView()
containerStackView.axis = .horizontal
containerStackView.distribution = .fill
containerStackView.alignment = .top
contentView.addSubview(containerStackView)
// the UIStackView for the labels
verticalStackView = UIStackView()
verticalStackView.axis = .vertical
verticalStackView.distribution = .fill
verticalStackView.spacing = 10.0
containerStackView.addArrangedSubview(verticalStackView)
categoryLabel = UILabel()
categoryLabel.font = UIFont.preferredFont(forTextStyle: .caption1)
categoryLabel.textColor = UIColor.lightGray
verticalStackView.addArrangedSubview(categoryLabel)
titleLabel = UILabel()
titleLabel.numberOfLines = 3
titleLabel.lineBreakMode = .byWordWrapping
verticalStackView.addArrangedSubview(titleLabel)
timeLabel = UILabel()
timeLabel.font = UIFont.preferredFont(forTextStyle: .caption1)
timeLabel.textColor = UIColor.lightGray
verticalStackView.addArrangedSubview(timeLabel)
// UIImageView
imageView = UIImageView()
imageView.contentMode = .scaleAspectFill
imageView.clipsToBounds = true
imageView.layer.cornerRadius = 5
layer.masksToBounds = true
containerStackView.addArrangedSubview(imageView)
}
What I want to achive is, that the "time label" ("3 days ago") is always placed at the bottom of each UICollectionViewCell (aligned with the bottom of the UIImageView), regardless of the different title label lines.
I've played with various UIStackView distributions, constraining the "time label" and with the hugging priority of the "title label".
But anyhow I can't get it right. Any hints?
UPDATE
Since you're setting titleLabel.numberOfLines = 3, one way to do this is simply to append three newlines to the title text. That will force titleLabel to always consume its full height of three lines, forcing timeLabel to the bottom.
That is, when you set titleLabel.text, do it like this:
titleLabel.text = theTitle + "\n\n\n"
ORIGINAL
If you let one of the labels stretch vertically, the stretched label's text will be centered vertically within the stretched label's bounds, which is not what you want. So we can't let the labels stretch vertically. Therefore we need to introduce a padding view that can stretch but is otherwise invisible.
If the padding view gets squeezed down to zero height, the stack view will still put spacing before and after it, leading to double-spacing between titleLabel and timeLabel, which you also don't want.
So we'll need to implement all the spacing using padding views. Change verticalStackView.spacing to 0.
Add a generic UIView named padding1 to verticalStackView after categoryLabel, before titleLabel. Constrain its height to equal 10.
Add a generic UIView named padding2 to verticalStackView after titleLabel, before timeLabel. Constrain its height to greater than or equal to 10 so that it can stretch.
Set the vertical hugging priorities of categoryLabel, titleLabel, and timeLabel to required, so that they will not stretch vertically.
Constrain the height of verticalStackView to the height of containerStackView so that it will stretch one or more of its arranged subviews if needed to fill the vertical space available. The only arranged subview that can stretch is padding2, so it will stretch, keeping the title text near the top and the time text at the bottom.
Also, constrain your containerStackView to the bounds of contentView and set containerStackView.translatesAutoresizingMaskIntoConstraints = false.
Result:
Here's my playground:
import UIKit
import PlaygroundSupport
class MyCell: UICollectionViewCell {
var containerStackView: UIStackView!
var verticalStackView: UIStackView!
var categoryLabel: UILabel!
var titleLabel: UILabel!
var timeLabel: UILabel!
var imageView: UIImageView!
func createSubViews() {
// contains the UIStackview with the 3 labels and the UIImageView
containerStackView = UIStackView()
containerStackView.axis = .horizontal
containerStackView.distribution = .fill
containerStackView.alignment = .top
contentView.addSubview(containerStackView)
// the UIStackView for the labels
verticalStackView = UIStackView()
verticalStackView.axis = .vertical
verticalStackView.distribution = .fill
verticalStackView.spacing = 0
containerStackView.addArrangedSubview(verticalStackView)
categoryLabel = UILabel()
categoryLabel.font = UIFont.preferredFont(forTextStyle: .caption1)
categoryLabel.textColor = UIColor.lightGray
verticalStackView.addArrangedSubview(categoryLabel)
let padding1 = UIView()
verticalStackView.addArrangedSubview(padding1)
titleLabel = UILabel()
titleLabel.numberOfLines = 3
titleLabel.lineBreakMode = .byWordWrapping
verticalStackView.addArrangedSubview(titleLabel)
let padding2 = UIView()
verticalStackView.addArrangedSubview(padding2)
timeLabel = UILabel()
timeLabel.font = UIFont.preferredFont(forTextStyle: .caption1)
timeLabel.textColor = UIColor.lightGray
verticalStackView.addArrangedSubview(timeLabel)
// UIImageView
imageView = UIImageView()
imageView.contentMode = .scaleAspectFill
imageView.clipsToBounds = true
imageView.layer.cornerRadius = 5
layer.masksToBounds = true
containerStackView.addArrangedSubview(imageView)
categoryLabel.setContentHuggingPriority(.required, for: .vertical)
titleLabel.setContentHuggingPriority(.required, for: .vertical)
timeLabel.setContentHuggingPriority(.required, for: .vertical)
imageView.setContentHuggingPriority(.defaultHigh, for: .horizontal)
containerStackView.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
contentView.leadingAnchor.constraint(equalTo: containerStackView.leadingAnchor),
contentView.trailingAnchor.constraint(equalTo: containerStackView.trailingAnchor),
contentView.topAnchor.constraint(equalTo: containerStackView.topAnchor),
contentView.bottomAnchor.constraint(equalTo: containerStackView.bottomAnchor),
verticalStackView.heightAnchor.constraint(equalTo: containerStackView.heightAnchor),
padding1.heightAnchor.constraint(equalToConstant: 10),
padding2.heightAnchor.constraint(greaterThanOrEqualToConstant: 10),
])
}
}
let cell = MyCell(frame: CGRect(x: 0, y: 0, width: 320, height: 110))
cell.backgroundColor = .white
cell.createSubViews()
cell.categoryLabel.text = "MY CUSTOM LABEL"
cell.titleLabel.text = "This is my title"
cell.timeLabel.text = "3 days ago"
cell.imageView.image = UIGraphicsImageRenderer(size: CGSize(width: 110, height:110)).image { (context) in
UIColor.blue.set()
UIRectFill(.infinite)
}
PlaygroundPage.current.liveView = cell
The problem is the vertical stack view. You apparently want to say: the middle label's top should hug the MyCustomLabel bottom, but the 3 Days Ago bottom should hug the overall bottom. That is not something you can say to a stack view.
And even if that is not what you want to say, you would still need to make the vertical stack view take on the full height of the cell, and how are you going to do that? In the code you showed, you don't do that at all; in fact, your stack view has zero size based on that code, which will lead to all sorts of issues.
I would suggest, therefore, that you just get rid of all the stack views and just configure the layout directly. Your layout is an easy one to configure using autolayout constraints.
I am taking an UIImageView on the left of the horizontal stack view and a label with number of lines set to 0. The issue is that both the UIImageView and the label are filling equal space even though I have set the stack view distribution property to fill. I don't want my image view to expand. Changing content hugging isn't helping.
Problem is: When telling the stack view to fill the content area it try to do it as best as possible. When setting the distribution type to fill it do not know how to fill. You have to provide this information by setting a width constraint via autolayout for the image. The label will fill the remaining area then.
Another way of doing this would be to add an invisible spacer object at the right side of the image + label stack.
private func spacer() -> UIView {
let stretchingView = UIView()
stretchingView.setContentHuggingPriority(.defaultHigh, for: .horizontal)
stretchingView.backgroundColor = UIColor.clear
stretchingView.translatesAutoresizingMaskIntoConstraints = false
return stretchingView
}
private func labelWithImage() -> UIView {
let image = UIImage(systemName: "map")
let imageView = UIImageView(image: image)
let label = UILabel()
label.text = "3 Miles Away"
label.font = UIFont.systemFont(ofSize: 17, weight: .regular)
label.textColor = UIColor.gray
let stackView = UIStackView(arrangedSubviews: [imageView, label, spacer()])
stackView.alignment = .leading
stackView.axis = .horizontal
return stackView
}