I'm writing an iOS 7 app and I have a rectangle with a label on it. The label is aligned center and is created to be the same size as the view (for simplicity when increasing the size).
The desired effect is when clicked, to animate the view to full size, with the label staying centered the whole time.
I currently have tried:
Setting the top, left, bottom, and right constraints on the label to 0
Setting the height and width of the label to the view at the initial size and animating it to the full size along with the view animation
Setting the label's top and left constraints to 0 and animating the size to the full size
None of these produce the desired output. Each time the label seems to just snap to its final size before the view even starts animating.
Here is my code:
_viewHeightConstraint.constant = self.view.frame.size.height;
_viewWidthConstraint.constant = self.view.frame.size.width;
_viewTopConstraint.constant = 0;
_viewLeftConstraint.constant = 0;
_labelWidthConstraint.constant = self.view.frame.size.width;
_labelHeightConstraint.constant = self.view.frame.size.height;
[self.view needsUpdateConstraints];
[UIView animateWithDuration:1.5f
animations:^(void) {
[self.myView layoutIfNeeded]; //perform relayout of view containing label before relayout of entire view
[self.view layoutIfNeeded];
}];
I'm not sure if I've provided everything necessary, as I'm still new to autolayout. However, the desired effect is a view that animates to full size while the label in the center stays centered.
Add these constraints to your label:
(UIViewAutoresizingFlexibleLeftMargin |
UIViewAutoresizingFlexibleRightMargin |
UIViewAutoresizingFlexibleTopMargin |
UIViewAutoresizingFlexibleBottomMargin)
Why do you call needsUpdateConstraints?
All the changes occur there. Just call:
...
_labelWidthConstraint.constant = self.view.frame.size.width;
_labelHeightConstraint.constant = self.view.frame.size.height;
[UIView animateWithDuration:1.5f
animations:^(void) {
[self.view layoutIfNeeded];
}];
On a side note, why do you set height and width constraints on the label? You can just add center horizontal and vertical constraints. I don't think you can set vertical text alignment for a label. But that was not your initial issue.
Related
I want to animate from a height of 0 to the height of the text (UILabel). I am using autolayout and I do not know how high the text will be. My approach was to start by setting a height=0 constraint to the text, and animate like this:
//retrieves the height constrain of the clicked item
NSLayoutConstraint *heightContraint = [heightConstraints objectAtIndex:sender.tag];
//activates/deactivates the constraint
heightContraint.active = !heightContraint.active;
//animates
[UIView animateWithDuration:3 animations:^{
[self layoutIfNeeded];
}];
My problem is, that with this approach, the text height does not animate, it changes from a height of 0 to the new height instantly. Only the position/size change of the containing views is animated. How I animate the text height change without knowing the height of the text??
I have found a solution. Instead of setting a constraint to the height, I set a containing view (clipping), which contains the UILabel and the view above. Then, I create 2 constraints that pin the bottom edges to the containing view, one related to the UILabel, and one related to the view above. I just activate/deactivate those constraints like this:
//get the constraints
NSLayoutConstraint *viewAboveTextConstraint =
[viewAboveTextConstraints objectAtIndex:sender.tag];
NSLayoutConstraint *uilabelContraint = [uilabelContraints objectAtIndex:sender.tag];
//flip the active states
viewAboveTextConstraint.active = !viewAboveTextConstraint.active;
uilabelContraint.active = !uilabelContraint.active;
//animate
[UIView animateWithDuration:.3 animations:^{
[self layoutIfNeeded];
}];
I have a view that automatically adjusts it's height based on number of lines in a UILabel within the view. There is another view which height is pinned to be equal to the view with the label.
I would like to animate the height change caused by setting long text to the label, thus changing the number of lines and causing autolayout constraints to recalculate height. This new height will change the height of the second view too. How can I animate autolayout changes that happen as a side effect of property assignment?
I tried this, but it did not work:
[UIView animateWithDuration:0.3 animations:^{
//I want the side effect of this assignment to be animated
self.viewWithLabel.title = #"This long title will change the view height and cause layout change";
}];
See the documentation
Try:
- (void)viewDidAppear:(BOOL)animated {
[self.view layoutIfNeeded];
[UIView animateWithDuration:1.0 animations:^{
self.viewWithLabel.title = #"This long title will change the view height and cause layout change";
[self.view layoutIfNeeded];
}];
}
I think you want yourTextLabel.clipToBounds = YES also.
If you want more advanced effect, see this question.
What I want to achieve is when I tap button, animate frame to be resized so the bottom line position will not change and height will decrease. This part is happening. I also want upper label to move down with frame's upper boundary and lower label to stay put. So I placed constraint in IB for the lower label to have vertical space of 20 pixels and priority of 1000.
- (IBAction)tapTap:(id)sender {
//[self.containerView layoutIfNeeded];
[UIView animateWithDuration:1.5 animations:^{
CGRect rect = CGRectOffset(self.containerView.frame, 0, 30);
rect.size.height -= 30;
self.containerView.frame = rect;
//[self.containerView layoutIfNeeded];
} completion:NULL];
}
Lower label is animating as well and will not stay put. My best guess after trying layoutIfNeeded which didn't work, is that I can't rely on constraints while animating frame. If that is true, what will be solution?
The first rule of AutoLayout: Don't touch the frames (or the center).
It looks like you have already found the answer but the way to do this is to keep a reference to the constraints that you would like to change. For instance, if you want to move the view up and down then store a vertical constraint that sets the vertical position on the view. Now when you animate this constraint the view will animate with it.
self.topConstraint.constant = 50;
// etc...
You can create property references to constraints by CTRL-dragging them just like with buttons, labels, etc...
Challenge time!
Imagine we have 2 content views:
UIView with dynamically height content (expandable UITextView) = RED
UIView as a footer = BLUE
This content is inside a UIScrollView = GEEN
How should I structure and handle the constraints with auto-layout to archive all the following cases?
I am thinking next basic structure to start with:
- UIScrollView (with always bounce vertically)
- UIView - Container
- UIView - DynamicHeightContent
- UIView - Sticky Footer
Keyboard handling should be done by code watching notifications UIKeyboardWillShowNotification and UIKeyboardWillHideNotification. We can chose to set the keyboard's end frame height to Container UIView bottom pin constraint or to the UIScrollView bottom contentInset.
Now, the tricky part is the sticky footer.
How we make sure the sticky footer UIView stays at the bottom if there is more screen available than the whole Container View?
How do we know the available screen space when the keyboard is shown/hidden? we'll surely need it.
Is is it right this structure I purpose?
Thank you.
When the text content of the UITextView is relatively short, the content view's subviews (i.e., the text view and footer) will not be able to dictate the size of their content view through constraints. That's because when the text content is short, the content view's size will need to be determined by the scroll view's size.
Update: The latter paragraph is untrue. You could install a fixed-height constraint either on the content view itself or somewhere in the content view's view hierarchy. The fixed-height constraint's constant could be set in code to reflect the height of the scroll view. The latter paragraph also reflects a fallacy in thinking. In a pure Auto Layout approach, the content view's subviews don't need to dictate the scroll view's contentSize; instead, it's the content view itself that ultimately must dictate the contentSize.
Regardless, I decided to go with Apple's so-called "mixed approach" for using Auto Layout with UIScrollView (see Apple's Technical Note: https://developer.apple.com/library/ios/technotes/tn2154/_index.html)
Some iOS technical writers, like Erica Sadun, prefer using the mixed approach in pretty much all situations ("iOS Auto Layout Demystified", 2nd Ed.).
In the mixed approach, the content view's frame and the scroll view's content size are explicitly set in code.
Here's the GitHub repo I created for this challenge: https://github.com/bilobatum/StickyFooterAutoLayoutChallenge. It's a working solution complete with animation of layout changes. It works on different sized devices. For simplicity, I disabled rotation to landscape.
For those who don't want to download and run the GitHub project, I have included some highlights below (for the complete implementation, you'll have to look at the GitHub project):
The content view is orange, the text view is gray, and the sticky footer is blue. The text is visible behind the status bar while scrolling. I don't actually like that, but it's fine for a demo.
The only view instantiated in storyboard is the scroll view, which is full-screen (i.e., underlaps status bar).
For testing purposes, I attached a double tap gesture recognizer to the blue footer for the purpose of dismissing the keyboard.
- (void)viewDidLoad
{
[super viewDidLoad];
self.scrollView.alwaysBounceVertical = YES;
[self.scrollView addSubview:self.contentView];
[self.contentView addSubview:self.textView];
[self.contentView addSubview:self.stickyFooterView];
[self configureConstraintsForContentViewSubviews];
// Apple's mixed (a.k.a. hybrid) approach to laying out a scroll view with Auto Layout: explicitly set content view's frame and scroll view's contentSize (see Apple's Technical Note TN2154: https://developer.apple.com/library/ios/technotes/tn2154/_index.html)
CGFloat textViewHeight = [self calculateHeightForTextViewWithString:self.textView.text];
CGFloat contentViewHeight = [self calculateHeightForContentViewWithTextViewHeight:textViewHeight];
// scroll view is fullscreen in storyboard; i.e., it's final on-screen geometries will be the same as the view controller's main view; unfortunately, the scroll view's final on-screen geometries are not available in viewDidLoad
CGSize scrollViewSize = self.view.bounds.size;
if (contentViewHeight < scrollViewSize.height) {
self.contentView.frame = CGRectMake(0, 0, scrollViewSize.width, scrollViewSize.height);
} else {
self.contentView.frame = CGRectMake(0, 0, scrollViewSize.width, contentViewHeight);
}
self.scrollView.contentSize = self.contentView.bounds.size;
}
- (void)configureConstraintsForContentViewSubviews
{
assert(_textView && _stickyFooterView); // for debugging
// note: there is no constraint between the subviews along the vertical axis; the amount of vertical space between the subviews is determined by the content view's height
NSString *format = #"H:|-(space)-[textView]-(space)-|";
[self.contentView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:format options:0 metrics:#{#"space": #(SIDE_MARGIN)} views:#{#"textView": _textView}]];
format = #"H:|-(space)-[footer]-(space)-|";
[self.contentView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:format options:0 metrics:#{#"space": #(SIDE_MARGIN)} views:#{#"footer": _stickyFooterView}]];
format = #"V:|-(space)-[textView]";
[self.contentView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:format options:0 metrics:#{#"space": #(TOP_MARGIN)} views:#{#"textView": _textView}]];
format = #"V:[footer(height)]-(space)-|";
[self.contentView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:format options:0 metrics:#{#"space": #(BOTTOM_MARGIN), #"height": #(FOOTER_HEIGHT)} views:#{#"footer": _stickyFooterView}]];
// a UITextView does not have an intrinsic content size; will need to install an explicit height constraint based on the size of the text; when the text is modified, this height constraint's constant will need to be updated
CGFloat textViewHeight = [self calculateHeightForTextViewWithString:self.textView.text];
self.textViewHeightConstraint = [NSLayoutConstraint constraintWithItem:self.textView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:0 multiplier:1.0f constant:textViewHeight];
[self.textView addConstraint:self.textViewHeightConstraint];
}
- (void)keyboardUp:(NSNotification *)notification
{
// when the keyboard appears, extraneous vertical space between the subviews is eliminated–if necessary; i.e., vertical space between the subviews is reduced to the minimum if this space is not already at the minimum
NSDictionary *info = [notification userInfo];
CGRect keyboardRect = [[info objectForKey:UIKeyboardFrameEndUserInfoKey] CGRectValue];
keyboardRect = [self.view convertRect:keyboardRect fromView:nil];
double duration = [[info objectForKey:UIKeyboardAnimationDurationUserInfoKey] doubleValue];
CGFloat contentViewHeight = [self calculateHeightForContentViewWithTextViewHeight:self.textView.bounds.size.height];
CGSize scrollViewSize = self.scrollView.bounds.size;
[UIView animateWithDuration:duration animations:^{
self.contentView.frame = CGRectMake(0, 0, scrollViewSize.width, contentViewHeight);
self.scrollView.contentSize = self.contentView.bounds.size;
UIEdgeInsets insets = UIEdgeInsetsMake(0, 0, keyboardRect.size.height, 0);
self.scrollView.contentInset = insets;
self.scrollView.scrollIndicatorInsets = insets;
[self.view layoutIfNeeded];
} completion:^(BOOL finished) {
[self scrollToCaret];
}];
}
Although the Auto Layout component of this demo app took some time, I spent almost as much time on scrolling issues related to a UITextView being nested inside of a UIScrollView.
Instead of using a UIScrollView you would very likely be better off with a UITableView. It also might be better to not using auto-layout. At least, I've found it better to not use it for these sorts of manipulations.
Look into the following:
UITextView textViewDidChange
Change the size of the text view using sizeThatFits (limiting width and using FLT_MAX for height). Change the frame, not the contentSize.
Call UITableView beginUpdates/endUpdates to update the table view
Scroll to the cursor
UIKeyboardWillShowNotification notification
On NSNotification that comes through, you can call userInfo (a Dictionary), and the key UIKeyboardFrameBeginUserInfoKey. Reduce the frame of the table view based on the height of the size of the keyboard.
Scroll to cursor again (since the layouts will have all changed)
UIKeyboardWillHideNotification notification
The same as the show notification, just opposite (increasing the table view height)
To have the footer view stick to the bottom, you could add an intermediate cell to the table view, and have it change size depending on the size of the text and whether the keyboard is visible.
The above will definitely require some extra manipulation on your part - I don't fully understand all of your cases, but it should definitely get you started.
If I understand whole task, my solution is put "red" and "blue" views to one container view, and in the moment when you know size of dynamic content (red) you can calculate size of container and set scrollView content size.
Later, on keyboard events you can adjust white space between content and footer views
I'm using Auto Layout in my iOS 7 project with the following view hierarchy
Main View
-Container View
---Button
---Button
---ImageView
-Banner View (iAd Banner View)
The Main View and Container View are full width and height of screen. I have Horizontal and Vertical Space Constraints on the Container View sticking to the main view (screen's height and width). And also the subviews of Container View are constrained to the button of the view with a 20px space.
My issue occurs when the Banner View is finally filled and placed at the bottom of the screen, which then I have the Container View subtract the Banner View's Height from its frame height to allow space for the Banner View to show. (code used below) The ideal outcome is the Container View to subtract the height and its subviews constraint update based on this new height ,but what end up happening is the iAD Banner View just overlays the view as shown in the picture.
Code for BannerViewDidLoadAd:
- (void)bannerViewDidLoadAd:(ADBannerView *)banner
{
CGRect contentFrame = self.containerView.bounds;
CGRect bannerFrame = self.bannerView.bounds;
if (self.bannerView.bannerLoaded) {
contentFrame.size.height = self.containerView.frame.size.height - self.bannerView.frame.size.height;
bannerFrame.origin.y = contentFrame.size.height;;
} else {
bannerFrame.origin.y = contentFrame.size.height;
}
[UIView animateWithDuration:animated ? 0.25 : 0.0 animations:^{
[self.containerView setFrame:contentFrame];
[self.containerView layoutIfNeeded];
self.bannerView.frame = bannerFrame;
self.bannerView.hidden = NO;
}];
[self.containerView updateConstraints];
}
Image of iAd overlaying Container View and it's SubViews
After you create the banner view in code (and add it as a subview of main view), you should add a 0 length spacing constraint between the bottom of the container view, and the top of the banner view (the banner view would need constraints to the two sides of the main view and a height constraint as well). The container view should have 0 length constraints to all four edges of the main view. You should make an IBOutlet to that bottom constraint, and animate that constraint's constant value by an amount equal to the height of the banner view (so it will shrink, and the banner view will move up with it due to its 0 length vertical spacing constraint). So, if the outlet to the bottom constraint was called bottomCon, and the height of the banner view was 100 points, you would animate like this:
[UIView animateWithDuration:animated ? 0.25 : 0.0 animations:^{
self.bottomCon.constant = 100;
[self.mainView layoutIfNeeded];
}];
There's no need to hide and unhide the view, since you will initially place it off the bottom of the screen anyway. Also make sure that you call [bannerView setTranslatesAutoresizingMaskIntoConstraints:NO] right after you create the banner view, or you'll get auto layout errors when you run the app.
The response from rdelmar was enough for me to get this working, but I'll add a few things. With auto layout on, there is no need to set the banner's size with setAutoresizingMask:UIViewAutoresizingFlexibleWidth (and currentContentSizeIdentifier is deprecated in iOS 6). Just create the banner object and then pin it into position using the procedure outlined by rdelmar and auto layout takes care of the horizontal sizing.
Here are the constraints I used:
// pin sides to superview
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:#"H:|-0-[_bannerView]-0-|" options:0 metrics:nil views:NSDictionaryOfVariableBindings(_bannerView)]];
// set height to a constant
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:#"V:[_bannerView(==66)]" options:0 metrics:nil views:NSDictionaryOfVariableBindings(_bannerView)]];
// pin contentView to bannerView with 0 length constraint
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:#"V:[_contentView]-0-[_bannerView]" options:0 metrics:nil views:NSDictionaryOfVariableBindings(_contentView,_bannerView)]];
I was concerned about setting a height constraint because the height of the banner will change depending on platform and/or orientation. But it doesn't seem to make any difference what value I set for the height constraint - the banner is always shown with the correct height, so I don't even bother setting it. I am assuming this because there is an intrinsic sizing to the height of the ad banners.