Using autolayout I can't override my label in code. I've set the labels attributes in IB: Lines = 0, LineBreaks = Word Wrap, but I have my height set to a single line because due to what cell is selected determines what text goes in the label. So sometimes the label will only have one line.
In my viewDidLoad:
myLabel.text = #”blah, blah, blah….”;
[myLabel setLineBreakMode:NSLineBreakByWordWrapping];
myLabel.numberOfLines = 0; //have tried 1 but didn’t help
[myLabel sizeToFit];
This works on another project, but I wasn’t using AutoLayout. AutoLayout seems to override these settings.
I’ve even added
[myLabel setFrame:CGRectMake(20, 135, 280, 80);
but it doesn’t help.
Allow the intrinsic size of the label determine the height. You are correct that you need to set the numberOfLines property to 0. Since you are using AutoLayout, don't call sizeToFit and you need set the preferredMaxLayoutWidth of the label.
That's because your label's properties are set only once (in viewDidLoad), while the constraints from autolayout are applied everytime your view's layoutSubviews is called.
Also, using a line break mode that wraps the text won't work well with your UILabel if it's adjusting fonts, as per Apple's docs.
If this is a UIViewController, move the UILabel override code into - (void)viewDidLayoutSubviews, or if this is in a UIView, move the code to - (void)layoutSubviews.
Don't forget to call [super viewDidLayoutSubviews] or [super layoutSubviews] in those calls.
That being said, if you see yourself needing to override your constraints, either set up the constraints and properties to what you want in the nib file, otherwise use pure code to set up your label.
You need to set preferredMaxLayoutWidth to the maximum width your label can be. You should do this in viewWillLayoutSubviews.
Related
I am getting a weird behaviour of UILabel in ScrollView. I am assigning dynamic text to the UILabel and using sizeToFit, I can log the new size which seems to change correctly after assigning text but I can't see the changed size reflected in both the simulator and the real device. This is the log before assigning and after assigning text
--txt Frame {{15, 325}, {291, 36}}
--txt Frame1 {{15, 296}, {291, 446.5}}
As you can see, the size (height) changes though I don't see the changes on device and simulator. Please help.
try to add this after sizeToFit()
self.view.setNeedsLayout()
self.view.layoutIfNeeded()
override func viewWillLayoutSubviews() {
self.myLabel.layoutIfNeeded()
}
Have you set the numberOfLines property for that label Before use the sizeToFit method.
may be that also cause the problem.
may be the label frame is change but label's numberOfLines property is set to 1 so it display only 1 line.
try to set the number of lines property before using sizeToFit method, like
label.numberOfLines = 0;
[label sizeToFit];
this will set the all the text for any number of line in label.
Hope it will Help you.
After experimenting with different approaches, I ended up manually extending the height of the contentView in IB myself. Its not the most elegant solution but it works for now :(
It seems impossible to get the UILabel to adhere to the constraints in the way that I want it to consistently. The leading and trailing space constraints seem in effect but the label is just truncating the lines instead of expanding to new lines.
I do have the numberOfLines of the UILabel set to 0. I have also tried the suggestion listed here: UILabel not wrapping text correctly sometimes (auto layout) and it didn't seem to work reliably. The last thing I tried was setting the setContentCompressionResistancePriority property to Fitted and Low but it doesn't work for everything in the UITableView at the same time. In fact, depending on if the tableview gets refreshed, it looks like all the wrapping can get undone.
The only thing that I tried that seemed to work well was to set the preferredMaxLayoutWidth of the UILabel to a constant. I was just hoping to use it as a last resort to avoid calculating how wide the label should be at runtime. Surely, there's an out of the box way to get what I want.
The key to getting it to work correctly was to ask the view to reset the layout after the constraints had been applied and all the text had been set. I merely added these lines to my custom UITableViewCell after I had set the data that it needed:
//set data
//set constraints
...
contentView.setNeedsLayout()
contentView.layoutIfNeeded()
}
I realized this was the solution because the view kept reporting their initial frame sizes instead of sizes after being affected by their constraints. For some reason, all the other views looked correct but not the UILabels.
I found the solution in the answer posted here: https://stackoverflow.com/a/13542580/1637033
You can calculate height of of the UILabel runtime as per the content
func heightForLabel(text:String, font:UIFont, width:CGFloat) -> CGFloat
{
let label:UILabel = UILabel(frame: CGRectMake(0, 0, width, CGFloat.max))
label.numberOfLines = 0
label.lineBreakMode = NSLineBreakMode.ByWordWrapping
label.font = font
label.text = text
label.sizeToFit()
return label.frame.height
}
I have an UILabel, created in Universal storyboard, and I have mentioned all required constraints for its position OTHER THAN WIDTH. So it resizes itself as per the text set. Fantastic! Exactly what I want.
Problem starts here : It has background color as green color, but that color is wrapping my text tightly. I thus believe that making it a little wider can help me. But to do that, I need to know which method of my UILabel subclass is invoked. So that I can override and add additional width of 10 points.
BottomLine: Which UILabel method is invoked for resizing the label automatically after I assign it the text?
The way it currently looks :
Unfortunately, we don't have any contentEdgeInsets property we can set on a UILabel (as we do have on a UIButton). If you want auto layout to continue to make the height and width constraints itself, you could make a subclass of UILabel and override the intrinsicContentSize and sizeThatFits to achieve what you want.
So, something like:
- (CGSize) intrinsicContentSize
{
return [self addHorizontalPadding:[super intrinsicContentSize]];
}
- (CGSize)sizeThatFits:(CGSize)size
{
return [self addHorizontalPadding:[super intrinsicContentSize]];
}
- (CGSize)addHorizontalPadding:(CGSize)size
{
return CGSizeMake(size.width + (2*kSomeHorizontalPaddingValue), size.height);
}
Note that this only touches the horizontal padding, but can obviously be modified to add vertical padding as well.
Steffen's answer is the way to go if you want to do that programmatically. I usually have a generic custom label subclass in my projects that adds a (IBInspectable) contentInsets property, amongst other things.
Anyways, just wanted to point out that you can also do this completely in IB by just wrapping your label in another view, give the container view the background color and add constraints for your horizontal padding.
In my awakeFromNib function, I have:
[_descriptionLabel setLineBreakMode:UILineBreakModeWordWrap];
[_descriptionLabel setNumberOfLines:10];
[_descriptionLabel sizeToFit];
and yet my label looks like this:
I know I'm setting these calls on the right label, because without these lines, the text appears vertically centered rather than aligned at the top. How can I make make my UILabel multiline?
I also tried setNumberOfLines:0.
SOLUTION I had set the width incorrectly in the xib file.
Try to set [_descriptionLabel setNumberOfLines:0]; which set the number of lines to auto.
It might be that sizeToFit is changing your label width, try to set it to explicit width, or remove it.
Just make sure that the initial width is set correctly. Then it should expand/shrink the height. But still the label won't be aligned to the top, it will be centered in its previous size after a call of sizeToFit (in case the new height is smaller than before, otherwise the origin will stay the same).
If you're not using AutoLayout, you need to measure text in code:
CGRect frame = _descriptionLabel.frame;
CGSize size = [_descriptionLabel.text sizeWithFont:_descriptionLabel.font constrainedToSize:CGSizeMake(frame.size.width, FLOAT_MAX) lineBreakMode:_descriptionLabel.lineBreakMode];
frame.size.height = MIN(MAX(size.height, frame.size.height), MAX_ALLOWED_HEIGHT);
_descriptionLabel.frame = frame;
Are you sure your awakeFromNib is in the right place. If it's in the view controller, it won't work. If it's in the implementation of a custom label, it should get called and that code should work:
#interface TestLabel : UILabel
#end
#implementation TestLabel
- (void)awakeFromNib
{
[self setLineBreakMode:UILineBreakModeWordWrap];
[self setNumberOfLines:10];
[self sizeToFit];
NSLog(#"Label: %#", NSStringFromCGRect(self.frame));
}
#end
Also, it's easier to set numberOfLines to 0, which means "any number of lines". And you shouldn't need to set UILineBreakModeWordWrap, since that's the default.
If you want to keep the code in the view controller, you can move it to viewDidLoad, which is the best place to do this kind of setup.
I have a UIButton and it can change the title at the runtime. Therefore, I want to increase the UIButton height depend on the title text for display full text by using AutoLayout.
I can increase the UILabel height by set the height constraint to "Greater than or Equal" but it not work with UIButton.
I have used [myButton sizeToFit] but it only increase the UIButon width (not increase height).
My current UIButton properties now is
- constraint height: 30
- leading : 15
- trailing: 15
- top: 5
- fontsize: 12
UPDATE
I created an IBOutlet for constraint height of UIButton for changing the height as #NSNood said.
Then I need to use \n in title text to split line.
But I don't know where should I put the \n?
Here is the Button that I want in portrait
Here is the Button that I want in landscape
How can I determine the place to put \n?
Please guide me how to achieve it with AutoLayout. Any help would be appreciated.
Sorry that I didn't follow the post, lately and thus am coming up with a real late solution. Still I'm writing the answer as a reference, if someone might find it useful in future.
First of all let's show the storyboard configuration for the button. Those are depicted in the following pictures:
The picture shows that I have added only left, top and right constraints for the button and nothing else. This allows the button to have some intrinsicContentSize for it's height but it's width is still determined by it's left and right constraints.
The next phase is to write some ViewController class that shall contain the button. In my VC, I have created an outlet for the button by name button:
#property(nonatomic,weak) IBOutlet UIButton* button;
and has attached it to the storyboard button. Now I have overridden two methods, namely, viewDidLoad and viewWillLayoutSubviews like below:
-(void)viewDidLoad {
[super viewDidLoad];
self.button.titleLabel.numberOfLines = 0;
self.button.titleLabel.lineBreakMode = NSLineBreakByWordWrapping;
}
-(void)viewWillLayoutSubviews {
[super viewWillLayoutSubviews];
[self.button setTitle:#"Chapter One\n "
"A Stop on the Salt Route\n "
"1000 B.C.\n "
"As they rounded a bend in the path that ran beside the river, Lara recognized the silhouette of a fig tree atop a nearby hill. The weather was hot and the days were long. The fig tree was in full leaf, but not yet bearing fruit." forState:UIControlStateNormal];
}
The viewDidLoad method ensures the titleLabel (the label that
holds button text) is multiline and if some large text comes to it,
it wraps the text by wrapping words.
The viewWillLayoutSubviews method ensures button layouting process
occurs whenever bounds of the main view change, e.g. due to the
change of interface orientation.
The final and the most effective part is to manually handle the layout process for the button. For this purpose, we need to subclass UIButton. I have written a subclass named MyButton that inherits from UIButton and you might use whatever name you like. Set this as the custom class for the button in Identity Inspector.
The subclass overrides two methods, namely, intrinsicContentSize and layoutSubviews. The class body looks something like the following:
#import "MyButton.h"
#implementation MyButton
-(CGSize)intrinsicContentSize {
return [self.titleLabel sizeThatFits:CGSizeMake(self.titleLabel.preferredMaxLayoutWidth, CGFLOAT_MAX)];;
}
-(void)layoutSubviews {
self.titleLabel.preferredMaxLayoutWidth = self.frame.size.width;
[super layoutSubviews];
}
#end
The UIButon subclass takes the ownership of the layout process by overriding layoutSubviews method. The basic idea here is to determine the button width, once it has been layout. Then setting the width as preferredMaxLayoutWidth (the maximum width for layouting engine, that a multiline label should occupy) of it's child titleLabel (the label that holds button text). Finally, returning an intrinsicContentSize for the button based on it's titleLabel's size, so that the button fully wraps it's titleLabel.
The overridden layoutSubviews is called when the button is already
layed out and it's frame size is determined. At it's first step,
button's rendered width is set as preferredMaxLayoutWidth of the
button's titleLabel.
The second step re-invokes the layouting engine by calling [super
layoutSubviews], so that the buttons intrinsicContentSize is
re-determined based on it's titleLabel's
preferredMaxLayoutWidth, which is set to buttons rendered width,
by now.
In the overridden intrinsicContentSize method we return the
minimum fitting size for the button that fully wraps it's
titleLabel with preferredMaxLayoutWidth set. We use
sizeThatFits fits method on the button's titleLabel and that
simply works as titleLabel doesn't follow any constraint based
layout.
The outcome should be something similar to that you might have required.
Feel free to let me know about any other clarification/concern.
Thanks.
Ayan Sengupta solution in Swift, with support for contentEdgeInsets (thanks Claus Jørgensen):
(You may also further customize the code to take titleEdgeInsets into account if needed)
Subclass your UIButton to take the ownership of the layout process:
/// https://stackoverflow.com/a/50575588/1033581
class AutoLayoutButton: UIButton {
override var intrinsicContentSize: CGSize {
var size = titleLabel!.sizeThatFits(CGSize(width: titleLabel!.preferredMaxLayoutWidth - contentEdgeInsets.left - contentEdgeInsets.right, height: .greatestFiniteMagnitude))
size.height += contentEdgeInsets.left + contentEdgeInsets.right
return size
}
override func layoutSubviews() {
titleLabel?.preferredMaxLayoutWidth = frame.size.width
super.layoutSubviews()
}
}
Use this class in your storyboard, and set constraints for Leading, Trailing, Top, Bottom. But don't set any Height constraint.
An alternative without subclassing is to add a wrapper view as suggested by Bartłomiej Semańczyk answer and Timur Bernikowich comment.
The point is that if you set sizeToFit property, then the text will always be in one line and the width of the button will increase unless you put a next-line sign \n to explicitly say that you want it to be several lines.
You put '\n' in the end of the first line like "line \n line" which represents
line
line
If you want to have two different string values (with \n positioned differently) for Portrait and Landscape you can check the orientation condition using UIDeviceOrientation (UIDevice.currentDevice.orientation) described here and set a string value depending on the orientation of the device
There is a way I always used:
Add another reference UILabel which lineNumber=0 and the same width with the target button.
Do not set height constraint for the ref-UILable, and should set a height constraint for the button to adjust its height
Set the same text to the ref UILabel with the button.titleLable, sizeTofit it and get its frame.size.height
Use the height value to the height constraint of the target button. (Of course, the button.titleLabel linenumber should be set to 0 or more lines)
Done. :)
PS1. This way can be used for the button and ref-label in a scrollview.
PS2. In some case, we can not get the correct height of the ref-label because it cannot gain a correct frame.width in scrollview, especially when we use the trailling constraint. We could consider to define a fixed width to the ref-label before sizeTofit and obtain the correct height for target button use.