I use pure code (not storyboard or xib) to set size of all views, and I don't want to use hard code to set frame , so I use Masonry.
Now I have a scrollView and a set of views as subviews of the scrollview, the code is like this:
[self.scrollview addSubview:[self.imageviews objectAtIndex:0]];
[[self.imageviews objectAtIndex:0] mas_makeConstraints:^(MASConstraintMaker *make) {
make.size.equalTo(self.scrollview);
make.top.equalTo(#0);
make.left.equalTo(#0);
}];
for (NSInteger i = 1; i < maxcnt ; i++) {
[self.scrollview addSubview:[self.imageviews objectAtIndex:i]];
UIImageView *previous = [self.imageviews objectAtIndex:i-1];
[[self.imageviews objectAtIndex:i] mas_makeConstraints:^(MASConstraintMaker *make) {
make.size.equalTo(self.scrollview);
make.top.equalTo(#0);
make.left.equalTo(previous.mas_right);
}];
}
But here comes the problem:
1) How I can use Masonry to set the contentsize of the scrollview? The following code not works well because in rotate event, self.view.frame.size.width change.
self.scrollview.contentSize = CGSizeMake(self.imageviews.count * self.view.frame.size.width, self.view.frame.size.height);
2) If I have to use the upper code to set, how to deal with rotate event so the contentsize is update well.
You are almost there. All you have to do is set a right constraint on the last image view. By doing so you create a "connection" between the left side of the contentView and the right side. That way the UIScrollView "knows" how much space the subviews need and adjusts the contentSize accordingly.
There is no need to set the contentSize at all. Auto Layout handles this for you and it also works when rotating the device.
I wrote a blog post about this a little while ago. It uses SnapKit but that is basically just another name for "Masonry with Swift". The syntax is pretty much the same. It describes a vertical scroll view but the idea is the same on a horizontal one.
One more small thing:
Instead of doing this:
make.top.equalTo(self.scrollview.mas_top);
You can do this:
make.top.equalTo(self.scrollview);
Related
Right so i have this image:
And i need the width of the red bar to fit between the 2 images (Buttons) on all devices.
I have looked for answers but i haven't found anything that works yet.
This is the code I'm using:
_background = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 353, 20)];
[self addSubview:_background];
[self sendSubviewToBack:_background];
[_background setBackgroundColor:[UIColor redColor]];
_background.layer.cornerRadius = 10;
_background.clipsToBounds = YES;
_background.center = CGPointMake(200, 15);
_background.keepLeftOffsetTo(_sendButton);
_background.keepCenterAlignTo(self);
[_background updateConstraintsIfNeeded];
There may very well be an easy fix for this but I've only been on Objective-C for about a month! (Coming from Android Java).
Any help would be great right now
Thanks
Update #1: I've tried using Masonry as suggested but i still can't achieve what i need.
So to help i setup a quick storyboard and replicated what i needed, then i looked at the constraints from the storyboard and then replicated it programmatically. Like so:
[background mas_remakeConstraints:^(MASConstraintMaker * make) {
make.trailingMargin.equalTo(_sendButton);
make.rightMargin.equalTo(#30);
make.leading.equalTo(_optionsButton);
make.leading.leadingMargin.equalTo(#25);
make.height.equalTo(#20);
make.center.equalTo(self);
}];
As you can tell, i did end up using Masonry to do this.
you need to use Autolayout to achieve this.
If you are using storyboard to create the above layout, then you need to constraint the redView in between the buttons.
Set the redView leading constraint to the firstImageView.
Set the redViw trailing constraint to the last imageView.
You need to give the height constraint to the redView.
Other constraints for the first and last imageviews:
You need to give the top, height,width cosntraints to the first and last imageviews.
If you are not using storyboard, I suggest to look into MAsonry to apply constraints programmatically.
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've been messing around and trying to make my own messaging application (for practice).
I'm adding a custom UIView to a standard UIScrollView based on an IBAction.
Each time the user presses a button, I do the following (in order):
Enumerate the subviews in the scrollView and increase the value of an
integer. I use this int to set the y-position of the new custom
view
Create a custom UIView with a frame size that varies only in width. The view has a UILabel on top of it that has the text.
Create a new CGSize that I use to set the contentSize of the
UIScrollView. The new CGSize is the width of the scrollView + the
height of the custom view + some padding.
I then set the contentSize of the scrollView.
I then add the custom view as a subview of the scrollView.
I created a timer that adds a new message/subview every two seconds to test multiple messages and the issue I am seeing is that once the subviews are added outside the viewable area of the UIScrollView, they stop being added. They are only added once I bring the messages back into the viewable area, and even so, they are added overlaying at times.
Now, I am aware of a few things: I need to add the subviews on a separate thread since they won't be added while the user is scrolling. I know that I will need to "clean up" subviews as they build up since my app will keep eating memory as more subviews are added. I am also aware that I should reposition the UIScrollView as messages are added since it doesn't make sense to add them outside of the viewable area. Finally, I don't think enumerating the subviews is very elegant... so I will change that later... nor is the temp UILabel I make... Now for some code:
- (void)pushMyMessage:(NSString *)message
{
UILabel *tempLabel = [[UILabel alloc]init];
tempLabel.text = message;
[tempLabel sizeToFit];
//adding the new message as a subview below any previous messages
if (self.messageView.subviews.count > 0)
{
int yIndex = 0;
for (SDMessageView *view in self.messageView.subviews)
{
//increase the y value for the frame of the next message
yIndex += view.frame.size.height;
//add a little padding
yIndex += 5;
}
SDMessageView *newMessage = [[SDMessageView alloc]initWithFrame:CGRectMake(20, yIndex, tempLabel.frame.size.width + 8, tempLabel.frame.size.height) setMessage:message];
CGSize newSize = CGSizeMake(self.messageView.frame.size.width, self.messageView.contentSize.height + newMessage.frame.size.height + 30);
[self.messageView setContentSize:newSize];
[self.messageView addSubview:newMessage];
}
else
{
//initial message
SDMessageView *newMessage = [[SDMessageView alloc]initWithFrame:CGRectMake(20, 20, tempLabel.frame.size.width + 8, tempLabel.frame.size.height) setMessage:message];
CGSize newSize = CGSizeMake(self.messageView.frame.size.width, self.messageView.contentSize.height + newMessage.frame.size.height + 30);
[self.messageView setContentSize:newSize];
[self.messageView addSubview:newMessage];
}
}
Any ideas on why the subviews are only added while in view? Also, any ideas on how I can do this efficiently?
Thanks for any help in advance!
Few things I noticed while reading your post:
You should not make any UI interface changes (like adding subviews) on secondary thread, this should be done on main thread.
Why don't you use UITableView for displaying messages? If you use table view, you don't have to calculate all the frames, content sizes and etc., just need to give correct height to the cell, and this would efficient way of solving what you are trying to achieve.
I didn't really understand, why your subviews are not added to the hidden area of the scroll view, in my practice, I didn't notice such a behaviour of the scroll view (I used it a lot), there should be some other issue with your code (are you adding subviews on secondary thread?).
Hope this was helpful, Good Luck!
Ok, so I've created a UIView in interface builder. I'm using AutoLayout and I've got one subview of this view pinned to all four sides.
Here's what I don't understand. When I load this NIB file using loadNibNamed. I then get a reference to the view. I set the frame for this view. And yet, when I access the subview (using [containerView viewWithTag:1]) it's frame hasn't been automatically resized. What gives? If you change the frame for a parent view, why wouldn't the subview frame change as well?
It doesn't make any sense.
Why can't you just load a UIView, set it's frame and have all the subviews adjust as appropriate (ESPECIALLY since I'm using AutoLayout!)?
EDIT: To be clear, all I want to do is be able to define a UIView hierarchy in IB with appropriate AutoLayout constraints and then be able to load and display that view on the screen sometimes at different sizes? Why is this so hard?
UIKit doesn't update subview geometry immediately when you change a view's geometry. It batches up the updates for efficiency.
After running your event handler, UIKit checks whether any views in the on-screen window hierarchy need to be laid out. If it finds any, it lays them out by solving your layout constraints (if you have any) and then sending layoutSubviews.
If you want to solve the constraints and lay out a view's subviews immediately, simply send layoutIfNeeded to the view:
someView.frame = CGRectMake(0, 0, 200, 300);
[someView layoutIfNeeded];
// The frames of someView.subviews are now up-to-date.
I too had the same problem, I was creating a tutorial view where in which I wanted to add multiple UIViews to a scrollview. While I was trying to get the frame from xib, it gave always 320 and because of that the offset for the pages were wrong and my views looked crappy in iPhone6 and 6plus.
I then used pure autolayout approach, ie instead of using the frame, I added constraints through VFL so that subviews fit exactly to the superview. Below is the snapshot of code where I create around 20 UIViews from Xib and add properly to scrollview
Full code here ScrollViewAutolayout
Method to layout the childviews in the scrollview.
#param nil
#result layout the child views
*/
-(void)layoutViews
{
NSMutableString *horizontalString = [NSMutableString string];
// Keep the start of the horizontal constraint
[horizontalString appendString:#"H:|"];
for (int i=0; i<viewsArray.count; i++) {
// Here I am providing the index of the array as the view name key in the dictionary
[viewsDict setObject:viewsArray[i] forKey:[NSString stringWithFormat:#"v%d",i]];
// Since we are having only one view vertically, then we need to add the constraint now itself. Since we need to have fullscreen, we are giving height equal to the superview.
NSString *verticalString = [NSString stringWithFormat:#"V:|[%#(==parent)]|", [NSString stringWithFormat:#"v%d",i]];
// add the constraint
[contentScrollView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:verticalString options:0 metrics:nil views:viewsDict]];
// Since we need to horizontally arrange, we construct a string, with all the views in array looped and here also we have fullwidth of superview.
[horizontalString appendString:[NSString stringWithFormat:#"[%#(==parent)]", [NSString stringWithFormat:#"v%d",i]]];
}
// Close the string with the parent
[horizontalString appendString:#"|"];
// apply the constraint
[contentScrollView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:horizontalString options:0 metrics:nil views:viewsDict]];
}
Unfortunately the accepted answer by Rob didn't work for me. This is what worked:
- (id)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
NSArray *views = [[NSBundle mainBundle] loadNibNamed:#"myXib" owner:self options:nil];
[self addSubview:views[0]];
self.subviews[0].frame = CGRectMake(0, 0, self.frame.size.width, self.frame.size.height); //ADDED THIS FOR PROPER SIZE
}
return self;
}
I've never worked with autolayout constraints before. I have a small new app I'm working on and noticed that the NIB's views are defaulting to autolayout. So, I figured I'd take the opportunity to work with it and try to figure out where Apple is going with this.
First challenge:
I need to resize an MKMapView and I'd like to animate it to the new position. If I do this the way I'm used to:
[UIView animateWithDuration:1.2f
animations:^{
CGRect theFrame = worldView.frame;
CGRect newFrame = CGRectMake(theFrame.origin.x, theFrame.origin.y, theFrame.size.width, theFrame.size.height - 170);
worldView.frame = newFrame;
}];
...then the MKMapView will 'snap' back to its original height whenever a sibling view gets updated (in my case a UISegmentedControl's title is being updated [myUISegmentedControl setTitle:newTitle forSegmentAtIndex:0]).
So, what I think I want to do is change the constraints of the MKMapView from being equal to the parent view's hight to being relative to the top of the UISegmentedControl that it was covering: V:[MKMapView]-(16)-[UISegmentedControl]
What I want is for the MKMapView height to shorten so that some controls beneath the map view are revealed. To do so I think I need to change the constraint from a fixed full size view to one where the bottom is constrained to the top of a UISegmentedControl...and I'd like it to animate as view shrinks to new size.
How does one go about this?
Edit - this animation is not animating though the bottom of the view does move up 170 instantly:
[UIView animateWithDuration:1.2f
animations:^{
self.nibMapViewConstraint.constant = -170;
}];
and the nibMapViewConstraint is wired up in IB to the bottom Vertical Space constraint.
After updating your constraint:
[UIView animateWithDuration:0.5 animations:^{[self.view layoutIfNeeded];}];
Replace self.view with a reference to the containing view.
This works for me (Both iOS7 and iOS8+). Click on the auto layout constraint you would like to adjust (in interface builder e.g top constraint). Next make this an IBOutlet;
#property (strong, nonatomic) IBOutlet NSLayoutConstraint *topConstraint;
Animate upwards;
self.topConstraint.constant = -100;
[self.viewToAnimate setNeedsUpdateConstraints];
[UIView animateWithDuration:1.5 animations:^{
[self.viewToAnimate layoutIfNeeded];
}];
Animate back to original place
self.topConstraint.constant = 0;
[self.viewToAnimate setNeedsUpdateConstraints];
[UIView animateWithDuration:1.5 animations:^{
[self.viewToAnimate layoutIfNeeded];
}];
There is a very good tutorial from apple itself that explain how to use animation with autolayout.
Follow this link and then find the video named "Auto layout by example"
It gives some interesting stuff about autolayout and the last part is about how to use animation.
I have made this small demo available. It shows how auto-layout constraints can be changed and animated in a very simple example. Simply take a look at the DemoViewController.m.
Most people use autolayout to layout items on their views and modify the layout constrains to create animations.
An easy way to do this without a lot of code is creating the UIView you want to animate in Storyboard and then creating a hidden UIView where you want the UIView to end. You can use the preview in xcode to make sure both UIViews are where you want them to be. After that, hide the ending UIView and swap the layout constraints.
There is a podfile for swapping layout constrains called SBP if you don't want to write it yourself.
Here's a tutorial.
No need to use more IBOutlet reference of the constraint instead of this you can directly access or update already applied constraint either applied by Programmatically or from Interface Builder on any view using the KVConstraintExtensionsMaster library. This library is also managing the Cumulative behavior of NSLayoutConstraint.
To add Height Constraint on containerView
CGFloat height = 200;
[self.containerView applyHeightConstrain:height];
To update Height Constraint of containerView with animation
[self.containerView accessAppliedConstraintByAttribute:NSLayoutAttributeHeight completion:^(NSLayoutConstraint *expectedConstraint){
if (expectedConstraint) {
expectedConstraint.constant = 100;
/* for the animation */
[self.containerView updateModifyConstraintsWithAnimation:NULL];
}
}];