Self sizing cells with three UILabels not working - ios

This is the UITableViewCell I have:
The three UILabels have trailing, top, bottom and leading constraints.
This is the hugging priority and compression resistance priority for the UILabel Name:
This is the hugging priority and compression resistance priority for the UILabel Location:
This is the hugging priority and compression resistance priority for the UILabel Type:
On the viewDidLoad from my UITableViewController I'm doing something like this:
self.tableView.estimatedRowHeight = 80
self.tableView.rowHeight = UITableViewAutomaticDimension
self.tableView.reloadData()
But when I run the app, the UITableViewCells don't self sizing:
What am I doing wrong or what do I need to do to make the UITableViewCells make them self sizing?
Edit
I set to 0 the numberOfLines for each UILabel, now the location UILabel doesn't appear

It is most likely that your Text turned out larger in runtime causing the total height in your cell View to turn out greater than the row height itself.
First equate all the hugging priority and then try changing the spacing distance between the Labels with the relation 'Greater than or Equal' and then set the constant to something small like zero. If you still get a constraint error, increase your tableView row height.
Alternative method:
Add all 3 UILabels into another UIView with spacing zero between them, do not set a height constraint for this UIView and just set it in the centerY of the cellView and spaced from the ImageView
Tip: Only change constraint priorities if your UI is what you want even after the constraints are broken, unless of course you know what you're doing

For ur case no need to vertical hugging priority,just give
label.numberOfLines = 0
that works fine.

The question says you want to resize the label, but based on your code it seems like you want to do it by resizing the tableview rows. If that's the case, the correct place to set row height in a tableView is:
override func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat {
return 80
}
Where "return 80" means you want table rows to be of height 80. Please let me know if I didn't understand your question right.

The label doesn't work because the storyboard is not very useful.
Set the var:
var imageView: UIImageView ={
let image = UIImageView()
image.translatesAutoresizingMaskIntoConstraints = false
return image
}()
var textView: UITextView ={
let text = UITextView()
text.translatesAutoresizingMaskIntoConstraints = false
return text
}()
And you continue with other label.
You have to set constraints like this example:
self.addSubview(imageView)
self.addSubview(textView)
imageView.bottomAnchor.constraintEqualToAnchor(self.bottomAnchor, constant: -10).active=true
imageView.leftAnchor.constraintEqualToAnchor(self.leftAnchor, constant:-10).active=true
imageView.widthAnchor.constraintEqualToConstant(70).active=true
imageView.heightAnchor.constraintEqualToConstant(70).active=true
label.topAnchor.constraintEqualToAnchor(self.topAnchor, constant: -5).active=true
label.leftAnchor.constraintEqualToAnchor(imageView.rightAnchor, constant: 3).active=true
label.widthAnchor.constraintEqualToAnchor(self.widthAnchor, constant -70).active=true
label.heightAnchor.constraintEqualToConstant(30).active=true
label2.topAnchor.constraintEqualToAnchor(label.bottomAnchor, constant: 5).active=true
label2.leftAnchor.constraintEqualToAnchor(imageView.rightAnchor, constant: 3).active=true
label2.widthAnchor.constraintEqualToAnchor(self.widthAnchor, constant -70).active=true
label2.heightAnchor.constraintEqualToConstant(30).active=true
And with this way also for the third label.

Related

change hight of the tableView cell does not work

hello guys now I have UITableViewCell should have dynamic height , this cell have 3 labels , I have added them in to stack and I added all requirements
to let tableViewCell be dynamic height
1- The code used for automatic cell height
notifications.rowHeight = UITableView.automaticDimension
notifications.estimatedRowHeight = 150
2- I have set constraints leading and trailing and bottom and top space to the superView.
3- The number of lines for each label is equal zero
this is cell before run
enter link description here
this cell after run https://ibb.co/5YCMpfK
The constraints of your tableViewCell must be like:
Properties of stackView:
Axis: Vertical
Alignment: Fill
Distribution: Fill Proportionally
Spacing: 5 (as per your requirement)
Number of lines of all 3 labels = 0
Check if your stack view doesn't have height constraint.
Check if your labels do not have any height constraint.
Give your stackview top and bottom constraints a specific value and make them greater than equal to topContraint >= 5 bottomconstraint >=5.
Change the property of stack view to Fill proportionally and give spacing according to your needs.

UILabel breaks early inside UIStackView

Given the view hierarchy:
UIStackView
--UILabel
--UISwitch
The label breaks too early, even if it can be fit to a single line.
Setting numberOfLines = 1 forces the label to be laid out correctly.
How to make UILabel perform line break only when needed?
Code:
private lazy var title: UILabel = {
let v = UILabel()
v.numberOfLines = 0
return v
}()
private lazy var toggle = UISwitch()
private lazy var stack = UIStackView(axis: .horizontal,
distribution: .equalSpacing,
alignment: .center,
views: [title,
toggle])
func setupConstraints() {
stack.snp.makeConstraints { (make) in
make.edges.equalTo(contentView.layoutMarginsGuide)
}
}
Result:
Setting numberOfLines = 1 gets me what I'd like to achieve, but the label looses its multi-line functionality:
How to force the desired behavior without losing support for multi-line labels?
When there is a lot of horizontal space, the label gets laid out correctly no matter of the numberOfLines property:
Set your UISwitch's content hugging and resistance priority to 1000.
And stack view distribution and alignment to fill.
Extra Note - If you want label and switch to be top aligned, then set alignment to top.
In your stack view you can give a constraint to your label and switch...
1) give your label leading, top , trailing and bottom constraint. Don't give Width constraint. In trailing constraint take second item Switch.
2) give your switch trailing, top, bottom and Fix width.
Hope it Will work.
Add label inside another stack view.
UIStackView
--UIStackView
--UILabel
--UISwitch

How to set UITextView's height dynamically in UITableViewCell based on string size?

I understand that this question has been asked here, but it didn't solve my problem as the link in the accepted answer is down and the minimal example didn't help.
Here is a picture of my custom UITableViewCell & all its constraints:
Each post contains these UI elements. The only element that could make each cell's height different is messageView, because its height depends on the string being displayed. Question is, how do I dynamically set each cell's height? Here's what I have now (Does NOT work, messageView is not shown at all):
func cellForRowAt(indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(...) as! PostCell
let message = ...
cell.messageView.text = message
return cell
}
func heightForRowAt(indexPath: IndexPath) -> CGFloat {
var cellMinimumHeight: CGFloat = 120
if let cell = tableView.cellForRow(at: indexPath) as? PostCell {
let size = cell.messageView.sizeThatFits(cell.messageView.frame.size)
cellMinimumHeight += size.height
}
return cellMinimumHeight
}
in heightForRowAt function, the if is not being executed, therefore, all cells' heights are cellMinimumHeight = 120.
How could I make each cell's height = 120 + messageView's height?
---------------------------------EDIT 1---------------------------------
Made a mistake in the picture, messageView's height is not set
When using Auto-Layout for dynamically sizing cells, you don't really need to implement sizeThatFits(...). If the constraints are setup correctly, then you only need to disable the scrolling of the UITextView.
From code:
yourTextView.scrollEnabled = false
From IB:
Select your Text View and open Attributes inspector, then
In Attributes Inspector select your UITextView(messageView) and Uncheck "Scrolling Enabled".
And then change your UITextView(messageView)'s content compression resistence priority as follows:
Horizontal = 750
Vertical = 1000
I hope this will help you.
Just disable UITextview scroll...
But here is no use of UITextview, you can use label also.
In HeightForRow tableview delegate method remove that stuff and use
return UITableViewAutomaticDimension
You have used constrain to make cell hight dynamic
form apple documentation
To define the cell’s height, you need an unbroken chain of constraints
and views (with defined heights) to fill the area between the content
view’s top edge and its bottom edge.
So for your case you need
cell's height = 120 + messageView's height?
So start from Profile Image to measure unbroken chain of constraints from Top to Bottom
Profile Image top = 10 + ImageHeight = 60 ----> 70
MessageView top = 10 + set minimum height to message say 20 one line if every cell should have message even if one word and set this height Greater than or equal to 20 make sure that you set Scroll enable = false
so message Height minimum = 10 top + 20 + 10 bottom ---> 40
Menu Stack view Height ---> 30
So all Total = 70 + 40 + 30 = 140 this default hight no cell will be less than this
Also you must set the table view’s rowHeight property to UITableViewAutomaticDimension. You must also assign a value to the estimatedRowHeight property
tableView.estimatedRowHeight = 130.0
tableView.rowHeight = UITableViewAutomaticDimension
Here is apple documentation Here

Animate a layout constraint by changing its priority value

I have a label containing quite a lot of text. There's a toggle for collapsing and expanding the height of the label (here it's named "lire la suite") so it truncates the end of the text.
I have meticulously set the vertical content hugging priority and compression resistance so the intrinsic size has higher priority over the compression resistance.
The height constraint (the optional constraint directly at the right of the label) is set with a constant of 71, just the height for 4 lines. It never changes.
Then this same constraint has a priority switching between 747 and 749 so the following happens:
height constraint priority = 749:
compression resistance < constraint priority < hugging priority
Compression resistance collapses under the constraint priority, its height is 71 or less if its intrinsic size (hugging priority) is smaller.
height constraint priority = 747:
constraint priority < compression resistance < hugging priority
The greater compression resistance forces the height to follow its intrinsic size.
This works perfectly. My issue is that I can't figure out how to animate this constraint, since every solution animates the constant property and not the priority.
I would like to know if there's a solution or a workaround.
By experimenting with it, it seems that you cannot animate constraints using priorities, and you are stuck either with activating/deactivating constraints, or changing their constants.
I've had a similar task a couple of days ago. An easy but a bit naive approach is to drop the constraint and use only intrinsic content size - you can set the label.numberOfLines = 4 when it should be collapsed (thus the size won't expand over 4 lines), and label.numberOfLines = 0 when expanded. This is very easy and clean, however, I am not sure how that goes with animation.
A second approach is to use only the constraint and animate the constant. You have a height for 4 lines already, all you need is the height of the expanded label. You can use following extension on UILabel to calculate the height:
extension UILabel {
func heightNeeded() -> CGFloat {
self.layoutIfNeeded()
let myText = self.text! as NSString
let boundingRectangle = CGSize(width: self.bounds.width, height: CGFloat.greatestFiniteMagnitude)
let labelSize = myText.boundingRect(with: boundingRectangle,
options: .usesLineFragmentOrigin,
attributes: [NSAttributedStringKey.font: self.font],
context: nil)
return labelSize.height
}
}
Then all you need to animate is the:
labelHeightConstraint.constant = label.heightNeeded()
Don't forget on how to animate that constant using autolayout, see for example my following answer to another SO question.

ios autolayout dynamic UILabel height

Say I have three UILabels whose positions are like below:
[Label1] [Label2]
[Label3]
Label1 and Label2 are in the same row and Label3 is below them. All the labels will have a fixed width and will contain dynamic text, so their height will vary.
How do I make the Label3 10 points below the label which has a higher height using AutoLayout?
For example, if Label1's height is 100 points, Label2's height is 120 points (their Y positions are the same), then Label3 should be 10 points below Label2, but if Label1 is 120 points high and Label2 is 100 points high, then Label3 should be 10 points below Label1.
You simply make constraints between both Label3->Label1 and Label3->Label2. Use inequality constraints. There will be only one way to satisfy both!
You will also need a top constraint for Label3; its constant should be very small and its priority should be very low. This will give the two inequality constraints something to "aim at".
Here is an example. This as achieved entirely without code - the buttons have code to add text to the labels, of course, but the constraints are configured entirely in Interface Builder; the labels are resizing, and the bottom label is moving down, automatically. (You can construct the same layout in code if you want to, naturally.)
I suggest you to wrap top two labels to UIView and setup constraints so these labels fit all space inside that view. Then you simple add vertical spacing constraint to bottom label3 with constant = 10. In that case top view will have size of larger label and will satisfy your conditions
I thought this would be an interesting exercise so I create a little test project. The gist of the code is below. You can just copy/paste it in the standard Single View iOS template.
(Note that I use SnapKit for programmatic Auto Layout because it is so much simpler than the UIKit API. I find it even much simpler than doing things in Xcode.)
The result is exactly the same as Matt's great screencast.
// ViewController.swift
import UIKit
import SnapKit
class ViewController: UIViewController
{
override func viewDidLoad() {
super.viewDidLoad()
let leftLabel = UILabel()
leftLabel.addGestureRecognizer(UITapGestureRecognizer(target: self, action: "addText:"))
leftLabel.userInteractionEnabled = true
view.addSubview(leftLabel)
leftLabel.numberOfLines = 0
leftLabel.text = "All the world's a stage, and all the men and women merely players: they have their exits and their entrances; and one man in his time plays many parts, his acts being seven ages."
leftLabel.snp_makeConstraints { (make) -> Void in
make.top.equalTo(40)
make.left.equalTo(self.view)
make.right.equalTo(self.view.snp_centerX)
}
let rightLabel = UILabel()
rightLabel.addGestureRecognizer(UITapGestureRecognizer(target: self, action: "addText:"))
rightLabel.userInteractionEnabled = true
view.addSubview(rightLabel)
rightLabel.numberOfLines = 0
rightLabel.text = "There is a tide in the affairs of men, Which taken at the flood, leads on to fortune. Omitted, all the voyage of their life is bound in shallows and in miseries. On such a full sea are we now afloat. And we must take the current when it serves, or lose our ventures."
rightLabel.snp_makeConstraints { (make) -> Void in
make.top.equalTo(40)
make.right.equalTo(self.view)
make.left.equalTo(self.view.snp_centerX)
}
let bottomView = UIView()
view.addSubview(bottomView)
bottomView.backgroundColor = UIColor.redColor()
bottomView.snp_makeConstraints { (make) -> Void in
make.height.equalTo(20)
make.left.right.equalTo(self.view)
make.top.greaterThanOrEqualTo(leftLabel.snp_bottom)
make.top.greaterThanOrEqualTo(rightLabel.snp_bottom)
}
}
#objc func addText(recognizer: UIGestureRecognizer) {
if let label = recognizer.view as? UILabel {
label.text = label.text! + " I like cheese."
}
}
}
Updated the code to add some additional text to the labels when tapped.
First of all remove height constraints and set all 3 labels vertical Content Compression Resistance Priority to 1000. This is the most important part.
Then add vertical space from Label3 to Label 1, and set instead of Equal, Greater Than or Equal with priority say 500. Add same space constraint to Label2.
Last add constraint from Label3 to Top = 0, but set priority to 1.

Resources