I have UILabel in a UITableViewCell whose neighboring subview is UIControlSwitch. When the UIControlSwitch is hidden, the UILabel's width is expected to grow. Below is my custom class implementation:
- (void)setBounds:(CGRect)bounds
{
[super setBounds:bounds];
self.contentView.frame = self.bounds;
}
- (void)layoutSubviews
{
[super layoutSubviews];
[self.contentView updateConstraintsIfNeeded];
[self.contentView layoutIfNeeded];
self.numberLabel.preferredMaxLayoutWidth = CGRectGetWidth(self.numberLabel.frame);
self.quoteLabel.preferredMaxLayoutWidth = CGRectGetWidth(self.quoteLabel.frame);
}
#end
I have uploaded a sample code to explain the constraints on the storyboard.
The UILabel's width is not changing. If I set a trailing space between the UILabel and the UIControlSwitch, the control is partially hidden beyond the screen bounds. Hence the constraint for the UILabel has trailing space to the superview instead of the UIControlSwitch.
When you hide a view, it still takes part in the layout process. So simply hiding your UISwitch will not cause anything to change.
So you either have to add/remove constraints, remove the UISwitch from its containing view or change how you are doing the constraints.
Option 1: Instead of hide/show do remove/add.
If you put the UISwitch in its own view, you can pin the UILabel to the switches containing view. Instead of hiding the UISwitch, remove it from its containing view. The result will be that the containing view collapses and your UILabel will stretch as long as the label is pinned to the switches view and the switches view to the edge.
Instead of show, add the UILabel back into the container view. The view will stretch and your UILabel will shrink.
Option 2: Use simple trailing constraint for UILabel.
Make your UILabel have a trailing constraint to the superview and CTRL drag that constraint into your code so you can set its value. Or you could add it manually if that is what you are doing.
Do not pin the UILabel to the UISwitch at all. Pin the UILabel to the right h§and side so it has the required position.
So your UILabel is now pinned to the right edge with an offset of your choosing. If you set this small, the UILabel will be over/under the switch. If set to the width of the switch plus left and right margin it will appear to stretch up to the switch.
In your code, you can find the width of the UISwitch by looking at its frame.
1) When the UISwitch is to be visible, set the trailing pin constraint of the UILabel to be the margin you want + width of UISwitch + margin to left of UISwitch you want.
2) When the UISwitch is to be hidden, set the trailing pin constraint of the UILabel to be the margin you want to the superview.
This should then cause the UILabel to extend to the switch when not hidden, or to the edge when the switch is hidden.
Related
I have a UITextView inside a UIScrollView. if I try to display a long text with a certain font size, the text is not showing. With shorter text or decreasing the font size the text shows up again. What am I doing wrong?
Screenshot of the autolayout here (the item selected is the textview):
The UITextView is inherited from UIScrollView
open class UITextView : UIScrollView, UITextInput, UIContentSizeCategoryAdjusting
So it is a bad practice to put ScrollView inside scrollView.
The reason why you don't see a long text in UITextView is that UITextView became scrollable. Also you didn't specify your scrollView content width so the with is calculated is as one line of your long text. But you can scroll it because you will scroll scrollView. Better way is to set label inside scrollview and set the label numberOfLines = 0. Make the label bottom padding to the bottom of your scrollView and top to some items in top of label and you will get a scrollable text.
I've just understood that you don't need a scrollView to place your long text.
You can use just a UITextView for your needs.
Remove your scrollView.
Add a UITextView.
Set constraints as described and math them with screenshot
Top Space to ReadingTimeLabel
Align Bottom to Superview / Bottom Layout Guide
Leading space to Superview
Trailing space to Superview
And you will get the result like on the screenshots
Scroller top:
Scrolled bottom:
Note: You can disable UITextView editing in attribute inspector.
But if you for some reason need a scroll view:
Set constrains as described, also match them as shown on screenshots.
Add scrollView constraints (Superview is the view where the scrollView is placed in):
-Top space to ReadingTimeLabel
-Align bottom to Superview/Bottom Layout Guide
-Align leading to Superview
-Align trailing to Superview
Please a UIView inside scrollView. Use it as container.
Add constraints for container. (Superview is scrollView)
-Align Leading to Superview
-Align Trailing to Superview
-Top Space to SuperView
-Bottom Space to SuperView
-Equal Width to SuperView
Add a UILabel inside container. (Superview is container).
Add constraints for UILabel.
-Align Leading to Superview
-Align Trailing to Superview
-Top Space to SuperView
-Bottom Space to SuperView
For the label set Lines = 0 in Attribute inspector or use the code
label.numberOfLines = 0
And you will get the result like on screenshots
Scrolled top
Scroller bottom
Try the below code:
textView.sizeToFit()
I'm working on a detail view for my app that lets people discover movies. I set up my detail view in interface builder by first adding a contentView to which I added my other views. I understand from previous topics that the contentView should dictate the contentSize of the scrollView. I also understand that the views inside the contentView should have auto layout constraints that enable the contentView to calculate its full size (in my case the height). I haven't been able to get this to work perfectly. I suspect that this is because I have a textview that displays the movie description and because some of these are long and some are short I don't know how to set its size. I want the textView to display the full text and I want to disable scrolling. In the current situation when the text is long the labels or the buttons get compressed. When I add height constraints to the labels and other views the textview gets compressed. Could anyone guide me in the correct direction/ let me know what I'm doing wrong?
This is how I set up the view hierarchy:
UIScrollView
UIView (trailing, leading, top & bottom = 0, centerY & centerX)
UIImageView (trailing, leading, top to contentView = 0, aspectRatio)
UILabel (centerX, top to ImageView & bottom to label = standard)
UILabel (centerX, top to label & bottom to label = standard)
UILabel (centerX, top to label & bottom to label = standard)
UILabel (centerX, top to label & bottom to textView = standard)
UITextView (leading, trailing & bottom horizontalScroller = standard)
HorizontalImageScroller (leading, trailing & bottom to UIButtons = standard , Height of contentView == height of scroller to disable vertical scrolling)
UIButton (leading, bottom to contentView = standard)
UIButton (leading, bottom to contentView = standard)
Solution:
Instead of a textView I used a UILabel with number of lines set to 0 and line breaks set to word wrap. After that I still didn't get the results that I was looking for. Then I had to change some auto layout constraints after which it finally worked.
The following articles where helpful to me while solving this issue:
Article about content sizing priorities
Article about Debugging AutoLayout
I have a UIView that contains two subviews - a UIImageView or a UITextView. The UIImageView has a fixed height and width.
The UITextView has variable size.
Only one of the UIImageView and UITextView would be displayed at a time. I plan to accomplish this programmatically by setting hidden = YES.
I would like the UIView to hug whichever child view is not hidden with no margin.
I would like to accomplish this with IB and autolayout if possible because the rest of the view is built this way.
So far I have created constraints that link the 4 edges of both of the subviews to the parent view and constraints for the height and width of the UIImageView. Naturally this creates a content priority ambiguity.
I would appreciate any advice.
Thank you!
So the contain view has to have trailing constraint and constraint with bottom which should have IBOutlet(s) references in viewcontroller and then when the text changes :
- (void)textViewDidChange:(UITextView *)textView {
[self.textView sizeToFit];
self.containerViewTrailingConstraint.constant = self.textView.contentSize.width;
self.containerViewConstraintWithBottom.constant = self.textView.contentSize.height;
[self.view layoutIfNeeded];
}
And when the textView is hidden then you have to set the self.containerViewTrailingConstraint.constant, self.containerViewConstraintWithBottom.constant in relation with the imageView
I am looking for a way to enter a label within a table cell that also has a disclosure indicator. The problem i'm having at the moment is that it seems like the disclosure indicator is being ignored when calculating the label's positions
Heres a picture:
So as you can see the label is centred in the area between the left side of the cell and the left side of the indicator, if it was centred in the cell it would sit below the nav bar heading.
Any help is appreciated thankyou
From within the storyboard
Okay, first an explanation for your issue. It has to do with the anatomy of a UITableViewCell. With anatomy, I mean the fact that the UITableViewCell for you is just a container for another container, which is the contentView (you can also see this one in your storyboard).
When you are operating in Storyboards, you are solely operating on the contentView, not on the actual UITableViewCell. So, when you setup your UILabel to be centered on the X-axis with AutoLayout, AutoLayout will always try to center it within the contentView, not in the outer container (i.e. the UITableViewCell). Then, when you add a disclosure indicator to the UITableViewCell, the contentView automatically gets shrinked in its width because the cell makes space for the disclosure indicator and wants to prevent you from adding UI elements in the right area that is reserved for the disclosure indicator.
Now, you have a few options around this:
you can edit the constraint directly and add a constant to it (which has to be the same value that the label gets shifted when you'd remove the indicator)
don't use the default disclosure indicator (i.e. don't tick the checkbox in Storyboards) and just add a UIImageView with an image that looks identical.
To not be bound to any constants you can calculate the difference in widths of frame and contentView.frame. So first create an outlet collection like so:
#property (strong, nonatomic) IBOutletCollection(NSLayoutConstraint) NSArray *centerConstraintsToOffset;
Then add the center constraints that you want to be centered horizontally in cell to that outlet collection:
And finally add this code to your cell:
override func layoutSubviews() {
super.layoutSubviews()
for constraint in centerConstraintsToOffset {
constraint.constant = (frame.size.width - contentView.frame.size.width) / 2.0
}
}
This also gives you flexibility of adding or removing cell accessories on the go, and your views will always be perfectly center aligned. Even if you remove the accessory at all.
Pavel's answer fixed the issue for me. After creating the IBOutlet collection as his answer demonstrates, here is his code example edited for Swift 3:
override func layoutSubviews() {
super.layoutSubviews()
for constraint: NSLayoutConstraint in self.centerConstraintsToOffset {
constraint.constant = (frame.size.width - contentView.frame.size.width) / 2.0
}
}
As you've already noticed, adding a 'UITableViewCellAccessoryDisclosureIndicator' will shrink the space allotted for your cell's contentView. Another solution that doesn't require a custom indicator or guessing at an offset would be to programmatically add a UILabel to the root view of the cell, not the contentView. For example:
#property UILabel *label;
// ...
- (void)layoutSubviews
{
[super layoutSubviews];
[self.label removeFromSuperview];
self.label = [[UILabel alloc] init];
self.label.text = #"Motorsport";
[self.label sizeToFit];
label.center = CGPointMake(self.center.x, self.size.height/2);
[self addSubview:self.label];
}
I am struggling with maybe a bit of a rookie issue. I have a UIView within which I display some price. I want the UIView to be of a dynamic width according to the price, if its 1 Euro, then it will be e.g. 20pt, if its 2300 Euro, then it will be like 50pt in width.
I was trying to use the storyboard's constraints but without luck. Is it possible to do it within storyboard or do I have to calculate the width of UILabel and then set the width of UIView programmatically?
Thank you in advance.
Yes, you can do this in the storyboard. Add a label to your view and pin it to the left and right edge (top and bottom if you want also). Give the view constraints to its superview in the x and y directions, but do not give it a width constraint (it will need a height constraint if you didn't pin the top and bottom of the label to it). The view should then expand with the label depending on its content.
In general, auto layout is performed in a top-down fashion. In other words, a parent view layout is performed first, and then any child view layouts are performed. So asking the system to size the parent based on the child is a bit like swimming upstream, harder to do, but still possible with some work.
One solution is to use the intrinsic size of a view.
For example, a UILabel has an intrinsic size based on the text in the label. If a UILabel has a leading constraint and a top constraint, but no other constraints, then its width and height are determined by its intrinsic size.
You can do the same thing with a custom view class that encloses a UILabel. By setting the intrinsic size of the custom view class based on the intrinsic size of the UILabel, you get a view that automatically resizes based on the text in the label.
Here's what the code looks like for the custom class. The .h file defines a single property text. The .m file has an IBOutlet to the child label. Setting and getting the text property simply sets or gets the text from the label. But there's one very important twist, setting the text invalidates the intrinsic size of the parent. That's what makes the system adjust the size of the parent view. In the sample code below the parent is sized to have an 8 pixel margin all around the UILabel.
SurroundView.h
#interface SurroundView : UIView
#property (strong, nonatomic) NSString *text;
#end
SurroundView.m
#interface SurroundView()
#property (weak, nonatomic) IBOutlet UILabel *childLabel;
#end
#implementation SurroundView
- (void)setText:(NSString *)text
{
self.childLabel.text = text;
[self invalidateIntrinsicContentSize];
}
- (NSString *)text
{
return( self.childLabel.text );
}
- (CGSize)intrinsicContentSize
{
CGSize size = self.childLabel.intrinsicContentSize;
size.height += 16;
size.width += 16;
return( size );
}
#end
Creating the IBOutlet to the childLabel can be a little tricky, so here's the procedure
drag out a UIView into the storyboard
use the Identity inspector to change the class to SurroundView
drag out a UILabel and add it as a subview of the SurroundView
select the label, and open the assistant editor
show SurroundView.m in the assistant
drag from the open circle to the label as shown below
All that's left is to get the constraints right. The constraints for the label should look like this
The constraints for the SurroundView should be as shown below. The key point is that the Intrinsic Size should be set to Placeholder to avoid the warnings about missing constraints.
Place the label inside the view and pin its TOP , BOTTOM , TRAILING and LEADING edges to the labels superview. Note that you do not specify the width constraint. Now add a height and width constraint to the view. Make an outlet to the width constraint and when the price changes set the view's width constraint's constant to your desired value. Since the label is pinned to the view it will expand too.