This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Autolayout Even Spacing
I'm trying to create a scrollable bar with buttons (similar to a UISegmentedControl). The superview is an UIScrollView. As soon as the buttons don't fit into the scrollview, the scrollview should be scrollable. So far, almost everything works fine:
With a lot of buttons (scrolled to the right):
Not so many buttons:
Now, my goal is that if there is room for all buttons, they should be equally spread across the whole 320px view. How can I define constrains for the spaces in between the buttons?
Right now, I'm using the following constraints (self is a UIScrollView):
UIView *firstButton = self.buttons[0];
[self.buttonConstraints addObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:#"|-(5)-[firstButton]" options:0 metrics:nil views:NSDictionaryOfVariableBindings(firstButton)]];
UIView *lastButton = [self.buttons lastObject];
[self.buttonConstraints addObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:#"[lastButton]-(5)-|" options:0 metrics:nil views:NSDictionaryOfVariableBindings(lastButton)]];
UIView *previousView = nil;
for (UIView *view in self.buttons) {
if (previousView) {
[self.buttonConstraints addObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:#"[previousView]-(5)-[view]" options:0 metrics:nil views:NSDictionaryOfVariableBindings(previousView, view)]];
}
previousView = view;
}
If I change the type of the superview from UIScrollView to an UIView, I get the following result, still not what I want, but at least it looks for the constraint of the last button that ties it to the right edge (makes sense, that this doesn't happen for the scrollview, as the content size is automatically set):
Any ideas?
- (void) viewWillLayoutSubviews {
// UIButton *button1, *button2, *button3, *button 4 ;
// NSMutableArray *constraintsForButtons ;
float unusedHorizontalSpace = self.view.bounds.size.width - button1.intrinsicContentSize.width - button2.intrinsicContentSize.width - button3.intrinsicContentSize.width - button4.intrinsicContentSize.width ;
NSNumber* spaceBetweenEachButton= [NSNumber numberWithFloat: unusedHorizontalSpace / 5 ] ;
[self.view removeConstraints:constraintsForButtons] ;
[constraintsForButtons removeAllObjects] ;
[constraintsForButtons addObjectsFromArray: [NSLayoutConstraint constraintsWithVisualFormat: #"H:|-(space)-[button1]-(space)-[button2]-(space)-[button3]-(space)-[button4]-(space)-|"
options: NSLayoutFormatAlignAllCenterY
metrics: #{#"space":spaceBetweenEachButton}
views: NSDictionaryOfVariableBindings(button1,button2,button3,button4) ] ] ;
[constraintsForButtons addObjectsFromArray: [NSLayoutConstraint constraintsWithVisualFormat: #"V:|[button1]"
options: 0
metrics: nil
views: NSDictionaryOfVariableBindings(button1) ] ] ;
[self.view addConstraints:constraintsForButtons] ;
}
This isn't as pretty as yours, and it assumes there are 4 buttons, but it equally spaces them. That is, the empty spaces between the buttons all have the same width. This does not mean that the distance between the NSLayoutAttributeLeading of button1 and button2 is the same as the distance between button2 & button3's.
Related
I'm working on an application that will have a picture of guitar fretboard like on a screenshot above. There will be notes displayed in different places of fretboard (represented by red circles- there will be much more of them than on the screenshot).
What kind of solution would you recommend to guarantee that the notes will be displayed in the right places of fretboard (which is just an image) and will not fall apart or distribute unevenly? Remember that the fretboard image will scale, depending on resolution, so notes positions coordinates should change accordingly.
If you're going to use an image that scales with the screen size, then this is one of the few cases where I would probably not use auto layout. I would create an array of doubles that would be the fraction of the distance from the left edge to the center of a particular space between the frets. So for instance, the value at index 3 (for the space where your left most red dot is) would be 0.2707 (36mm/133mm based on your image). You would then set the frame's origin.x value with that fraction times the width of the image.
You want to do all this in code I think and be able to activate based on fret location, string location etc... Use relative offsets for each string and fret from a known point.
This ties into your other question on SO about getting your fret image correct. Unless you can code the image accurately, then coding the note positions accurately is going to be tricky.
IMHO, you can not do this with auto layout, esp taking into account your other question: iOS autolayout - gap between image and top of the screen, despite constraints set
If you already managed to place the imageViews in the right places, you could create an UIView subclass that contains both the image and a label on top of it.
This would be my suggestion:
#interface NoteView()
#property (nonatomic, weak) UILabel *label;
#property (nonatomic, weak) UIImageView *imageView;
#end
#implementation NoteView
-(instancetype)init {
self = [super init];
if (self) {
[self setupContent];
}
return self;
}
- (void)setupContent {
UIImageView *imageView = [[UIImageView alloc] init];
[self addSubview:imageView];
[imageView setTranslatesAutoresizingMaskIntoConstraints:NO];
UILabel *label = [[UILabel alloc] init];
[self addSubview:label];
[label setTranslatesAutoresizingMaskIntoConstraints:NO];
// This adds vertical constaints between the view, the label and the imageView
// You can change the values to suit your needds
[self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:#"V:|-0-[label]-10-[imageView]-0-|" options:0 metrics:nil views:#{ #"label": label, #"imageView": imageView }]];
// This makes the view be as big as the label
// I assumed the labels will be bigger than the images,
[self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:#"H:|-0-[label]-0-|" options:0 metrics:nil views:#{ #"label": label}]];
// If the images are bigger use these constraints
// [self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:#"H:|-0-[label]-0-|" options:0 metrics:nil views:#{ #"label": label}]];
// This msakes sure that the label and the image have the same centers
[self addConstraint:[NSLayoutConstraint constraintWithItem:label attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:imageView attribute:NSLayoutAttributeCenterX multiplier:1.f constant:0]];
[self setLabel:label];
[self setImageView:imageView];
}
// This would be a public configuration method.
- (void)setLabelText:(NSString *)text andImage:(UIImage *)image {
[self.label setText:text];
[self.imageView setImage:image];
}
#end
All you would need to do is place this custom view as you do with the images and if the frame changes call layoutIfNeeded on the custom view so that it layouts both the image and the label correctly.
Hope this helps. Let me know if you have questions.
Please see my answer below, where I have a working solution
I have rewritten the code completely so it is much smaller and neater and achieves the same results.
Update: It looks like the intrinsic content size of the UIImageView is being adjusted when the large image is loaded, which throws its layout and makes it twice the width of device window and scrollview. I will need to figure out how to fix that. The code below made a small change and reduced the width of the UIImageView, but did not allow me to set it to be 100% the width of the window.
[captionImageView setContentCompressionResistancePriority:1 forAxis:UILayoutConstraintAxisHorizontal];
I have the following set up for my views and my problem is that an image inside the UIImageView is pushing the width of its containing view to be wider than the device window.
I have a ViewController that loads and adds subviews in a for loop and everything seems to be working ok there.
Inside these sub views I am trying to use autolayout to achieve the following:
Add a UIImageView and make it the same width as the parent window
Load a UIImage into this and use UIViewContentModeScaleAspectFill to make sure the image loads nice and proportionally.
Load a UITextView beneath all this
Repeat this process in the for loop so they all stack up nicely on top of one another.
I am using a constraint for in the Visual formatting language to try to set the size of the UIImage view to be the width of the parent view, which I want to be the device window width.
If I specify the constraint as follows:
[containerView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:#"H:|[captionImageView(320)]|" options:0 metrics:metrics views:views]];
Then it works ok, but this is not the ideal solution as I want the UIImageView to be flush with the width of the device, and it's bad practice to set a fixed width
If I specify the constraint as follows like this:
[containerView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:#"H:|[captionImageView]|" options:0 metrics:metrics views:views]];
Then the UIImage with a size of let's say 960px will force the parent container view to be that size as well.
I have my custom view content being loaded into a scroll view, and so we have horizontal scrolling which is bad.
Note that I am using a UIView category to specify that view.translatesAutoresizingMaskIntoConstraints is set to NO.
#import "UIView+Autolayout.h"
#implementation UIView (Autolayout)
+(id)autoLayoutView {
UIView *view = [self new];
view.translatesAutoresizingMaskIntoConstraints = NO;
return view;
}
#end
The code for the custom view is below. Any ideas as to how I can ensure the size of my UIImageView does not stretch beyond the bounds of the device window?
//
// FigCaptionView.m
//
//
// Created by Matthew Finucane on 18/12/2014.
// Copyright (c) 2014 The App. All rights reserved.
//
#import "FigCaptionView.h"
#import "UIView+Autolayout.h"
#interface FigCaptionView(){}
#end
#implementation FigCaptionView
-(id)initWithData:(NSDictionary *)viewData {
if((self = [FigCaptionView autoLayoutView])) {
self.figCaptionData = viewData;
}
return self;
}
-(void)layoutItems {
[self setBackgroundColor:[UIColor redColor]];
/**
* The container view for everything
*/
UIView *containerView = [UIView autoLayoutView];
/**
* Setting up the caption image
*/
UIImageView *captionImageView = [UIImageView autoLayoutView];
[captionImageView setContentMode:UIViewContentModeScaleAspectFill];
/**
* Grabbing the image (not yet the right way to do this)
*/
dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^{
UIImage *image = [UIImage imageWithData:[NSData dataWithContentsOfURL:[NSURL URLWithString:#"http://placekitten.com/960/240"] options:0 error:nil]];
dispatch_async(dispatch_get_main_queue(), ^{
captionImageView.image = image;
});
});
/**
* Setting up the caption image
*/
UITextView *captionTextView = [UITextView autoLayoutView];
[captionTextView setText:#"Sample paragraph text will go in here. Sample paragraph text will go in here. Sample paragraph text will go in here. Sample paragraph text will go in here. Sample paragraph text will go in here.Sample paragraph text will go in here"];
/**
* Adding the container view
*/
[self addSubview:containerView];
[containerView addSubview:captionImageView];
[containerView addSubview:captionTextView];
[captionTextView setBackgroundColor:[UIColor blueColor]];
/**
* Dictionaries for autolayout: views and metrics
*/
NSDictionary *views = NSDictionaryOfVariableBindings(containerView, captionImageView, captionTextView);
NSDictionary *metrics = #{#"imageHeight": #"160.0", #"margin": #"20.0"};
/**
* Setting up the constraints for this view
*/
[self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:#"H:|[containerView]|" options:0 metrics:metrics views:views]];
[self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:#"V:|[containerView]|" options:0 metrics:metrics views:views]];
/**
* Container view constraints
*
* The first constraint is the one that might be causing me trouble.
*/
[containerView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:#"H:|[captionImageView]|" options:0 metrics:metrics views:views]];
[containerView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:#"H:|[captionTextView]|" options:0 metrics:metrics views:views]];
[containerView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:#"V:|[captionImageView(imageHeight)][captionTextView]|" options:NSLayoutFormatAlignAllLeft metrics:metrics views:views]];
for(UIView *view in self.subviews) {
if([view hasAmbiguousLayout]) {
NSLog(#"OOPS");
NSLog(#"<%#:0x%0x>", view.description, (int)self);
}
}
}
#end
You can handle it in this way.
Assume ViewA's width is equal to the device window 's width.In this case, you can just add a UIView.
And set it up with constraints likes the usual view you had handled above.
[containerView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:#"H:|[captionImageView(ViewA)]|" options:0 metrics:metrics views:views]];
Hope this help.
Edit:
Cause I am not very sure it will work or not in the way that you comment to me. So I just showed the code how I deal with.
1.set up the viewA
_viewA = [[UIView alloc] initWithFrame:[UIScreen mainScreen].bounds];
2.Just handle it likes your UIImageView (in this case, captionImageView)
[self.view addSubView:_viewA];
[_viewA setTranslatesAutoresizingMaskIntoConstraints:NO];
3.Add it into NSDictionaryBinding
NSDictionary *dictionary = NSDictionaryOfVariableBindings(_textView, _button, _viewA);
4.Custom the VFL and assign it.
NSString *const KButtonHorizontal = #"|[_button(_viewA)]|";
This is the tech note that explains how to constrain a scroll view: https://developer.apple.com/library/ios/technotes/tn2154/_index.html
A quick and easy way to prevent the scroll view content size from growing is to subclass the scrollview and override -(CGSize)contentSize to return the windows width and whatever super returns for height.
I got this working by Subclassing UIImageView and overriding intrinsicContentSize() to return the screen size... less code ;)
class CustomImageView: UIImageView
{
// - MARK: UIView
override func intrinsicContentSize() -> CGSize
{
// Return current screen size with width adjusted for frame
let width = UIScreen.mainScreen().bounds.width - frame.origin.x
return CGSize(width: width, height: frame.height)
}
}
I would not necessarily call this a definitive answer, but I was able to get it working somewhat the way I wanted to, although the solution I went with might not have been 100%.
-- The answer provided by Henry T Kirk was very useful in describing autolayout with image views. I could not get this working 100% but I would say this is the most correct answer in that it follows best practice.
-- The answer provided by WorldOfWarcraft also works. Creating a new view that stretches to 100% the width of the device window, and setting the constraint of the UIImage based on that will stop it from stretching beyond its bounds.
The solution I went with was to create a new CGRect variable called windowBounds. Extracting the window width from that (windowBounds.size.width), I was able to add this to my metrics, and apply it to the visual formatting string horizontal rule for the imageView, thus correcting the constraint for its superview.
After doing some work to refactor the code for this view, I have come up with a much neater solution that works, and also solves another issue I had with placing a UITextView with variable string content. The code is below.
** FigcaptionView.h **
//
// FigCaptionView.m
// Anna Christoffer
//
// Created by Matthew Finucane on 18/12/2014.
// Copyright (c) 2014 Anna Christoffer. All rights reserved.
//
#import "FigCaptionView.h"
#import "UIView+Autolayout.h"
#interface FigCaptionView(){}
#property (nonatomic, strong) UIImageView *figCaptionImageView;
#property (nonatomic, strong) UITextView *figCaptionTextView;
#end
#implementation FigCaptionView
#synthesize figCaptionImageView;
#synthesize figCaptionTextView;
-(id)initWithData:(NSDictionary *)viewData {
if((self = [FigCaptionView autoLayoutView])) {
self.figCaptionData = viewData;
}
return self;
}
-(void)loadImage:(NSString *)imageURLPath {
//TODO
}
-(void)addContentViews {
[super layoutSubviews];
/**
* Set up and add the subviews to display the content
*/
self.figCaptionImageView = [UIImageView autoLayoutView];
[self.figCaptionImageView setBackgroundColor:[UIColor lightGrayColor]];
[self addSubview:figCaptionImageView];
self.figCaptionTextView = [UITextView autoLayoutView];
[self.figCaptionTextView setScrollEnabled:NO];
[self.figCaptionTextView setText:#"The digital atlas teaches the cartographic and cultural contents with a highly dynamic and visual method. The idea is based on the phenomenon of “cabinets of wonder” from the 16th and 17th century. At this time European discoverers collected during their expeditions various exotic objects and on the turn to Europe replaced the found pieces to a universal collection."];
[self addSubview:figCaptionTextView];
/**
* Then apply the constraints
*/
[self autoLayoutAddConstraints];
}
-(void)autoLayoutAddConstraints {
/**
* Any set up values that we need
*/
CGRect windowBounds = [[UIScreen mainScreen] bounds];
/**
* Dictionary of views and metrics
*/
NSDictionary *views = NSDictionaryOfVariableBindings(self, figCaptionImageView, figCaptionTextView);
NSDictionary *metrics = #{#"imageWidth": #(windowBounds.size.width), #"margin": #20.0f};
/**
* Constraints for this view (Vertical and horizontal)
*/
[self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:#"H:|[figCaptionImageView(imageWidth)]|"
options:0
metrics:metrics
views:views
]];
[self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:#"V:|[figCaptionImageView][figCaptionTextView]|"
options:0
metrics:metrics
views:views
]];
/**
* Constraints for the caption image view to maintain ratio
*/
[self.figCaptionImageView addConstraint:[NSLayoutConstraint constraintWithItem:self.figCaptionImageView
attribute:NSLayoutAttributeHeight
relatedBy:NSLayoutRelationEqual
toItem:self.figCaptionImageView
attribute:NSLayoutAttributeWidth
multiplier:0.75f
constant:0.0f
]];
/**
* Constraints for the caption text view - horizontal
*/
[self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:#"H:|[figCaptionTextView]|"
options:0
metrics:metrics
views:views
]];
}
#end
Incase you were also wondering, I have included the implementation for UIView+Autolayout
** UIView+Autolayout.m **
//
// UIView+Autolayout.m
// Anna Christoffer
//
// Created by Matthew Finucane on 19/12/2014.
// Copyright (c) 2014 Anna Christoffer. All rights reserved.
//
#import "UIView+Autolayout.h"
#implementation UIView (Autolayout)
+(id)autoLayoutView {
UIView *view = [self new];
view.translatesAutoresizingMaskIntoConstraints = NO;
return view;
}
#end
You can try:
[captionImageView setClipsToBounds:YES];
try it right after you set aspect mode...
this might help: Crop UIImage to fit a frame image
EDIT
I just said about clipToBounds because even using autolayout from interface builder i had problems with my images in AspectFill mode, they would not respect the bounds of the imageview. But seems like your problem has more to do with layout constraints.
Try these constraints (notice the - sign next to the superview denoted as pipe |), it just adds the default aqua space to the constraints, it's simple but may work:
[containerView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:#"H:|-[captionImageView]-|" options:0 metrics:metrics views:views]];
[containerView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:#"H:|[captionTextView]|" options:0 metrics:metrics views:views]];
[containerView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:#"V:|[captionImageView(imageHeight)][captionTextView]|" options:NSLayoutFormatAlignAllLeft metrics:metrics views:views]];
I'm trying to display content in a table cell using auto layout, programmatically. I'd like for the content to display as follows:
[title]
[image] [date]
[long string of text, spanning the width of the table, maximum of two lines]
My code looks like this:
-(NSArray *)constraints {
NSMutableArray * constraints = [[NSMutableArray alloc]init];
NSDictionary *viewsDictionary = NSDictionaryOfVariableBindings(_titleLabel, _descriptionLabel, _dateLabel, _ratingBubbleView);
NSDictionary *metrics = #{#"padding":#(kPadding)};
NSString *const kVertical = #"V:|-(>=0,<=padding)-[_titleLabel]-(<=padding)-[_ratingBubbleView]-(<=padding)-[_descriptionLabel]-(>=0,<=padding)-|";
NSString *const kVertical2 = #"V:|-(>=0,<=padding)-[_titleLabel]-(<=padding)-[_dateLabel]-(<=padding)-[_descriptionLabel]-(>=0,<=padding)-|";
NSString *const kHorizontalDescriptionLabel = #"H:|-padding-[_descriptionLabel]-padding-|";
NSString *const kHorizontalTitleLabel = #"H:|-padding-[_titleLabel]";
NSString *const kHorizontalDateLabel = #"H:|-padding-[_ratingBubbleView]-padding-[_dateLabel]";
[constraints addObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:kVertical options:0 metrics:metrics views:viewsDictionary]];
[constraints addObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:kVertical2 options:0 metrics:metrics views:viewsDictionary]];
[constraints addObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:kHorizontalDescriptionLabel options:0 metrics:metrics views:viewsDictionary]];
[constraints addObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:kHorizontalTitleLabel options:0 metrics:metrics views:viewsDictionary]];
[constraints addObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:kHorizontalDateLabel options:0 metrics:metrics views:viewsDictionary]];
return constraints;
}
This is the result:
OK, I'm not going to try a fix your code. I'm just going to create constraints that I would use to achieve your layout. I'll put the thought process in comments.
First get a nice vertical layout going...
// I'm just using standard padding to make it easier to read.
// Also, I'd avoid the variable padding stuff. Just set it to a fixed value.
// i.e. ==padding not (>=0, <=padding). That's confusing to read and ambiguous.
#"V:|-[titleLabel]-[ratingBubbleView]-[descriptionLabel]-|"
Then go through layer by layer adding horizontal constraints...
// constraint the trailing edge too. You never know if you'll get a stupidly
// long title. You want to stop it colliding with the end of the screen.
// use >= here. The label will try to take it's intrinsic content size
// i.e. the smallest size to fit the text. Until it can't and then it will
// break it's content size to keep your >= constraint.
#"|-[titleLabel]->=20-|"
// when adding this you need the option "NSLayoutFormatAlignAllBottom".
#"|-[ratingBubbleView]-[dateLabel]->=20-|"
#"|-[descriptionLabel]-|"
Try not to "over constrain" your view. In your code you are constraining the same views with multiple constraints (like descriptionLabel to the bottom of the superview).
Once they're defined they don't need to be defined again.
Again, with the padding. Just use padding rather than >=padding. Does >=20 mean 20, 21.5, or 320? The inequality is ambiguous when laying out.
Also, In my constraints I have used the layout option to constrain the vertical axis of the date label to the rating view. i.e. "Stay in line vertically with the rating view". Instead of constraining against the title label and stuff... This means I only need to define the position of that line of UI once.
I have a view that has an header. This header has 4 views that show images on the right. I call them icons since every of them shows or draw a glyph. Depending on data, icon 2, 3 or 4 may be hidden given me six possible combinations.
Even when hidden, every invisible icon occupy its space, giving one or more "holes" in the visualization.
This is what I'm using right now.
[header addSubview:_label];
[header addSubview:_icon1];
[header addSubview:_icon2];
[header addSubview:_icon3];
[header addSubview:_icon4];
NSDictionary *headerViewDict = NSDictionaryOfVariableBindings(_label, _icon1, _icon2, _icon3, _icon4);
[header addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:#"|-2-[_label]-0-[_icon4(>=0,14)]-1-[_icon3(>=0,14)]-1-[_icon2(>=0,14)]-1-[_icon1(14)]-2-|" options:nil metrics:nil views:headerViewDict]];
[header addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:#"V:|[_label]|" options:nil metrics:nil views:headerViewDict]];
[header addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:#"V:|[_icon1]|" options:nil metrics:nil views:headerViewDict]];
[header addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:#"V:|[_icon2]|" options:nil metrics:nil views:headerViewDict]];
[header addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:#"V:|[_icon3]|" options:nil metrics:nil views:headerViewDict]];
[header addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:#"V:|[_icon4]|" options:nil metrics:nil views:headerViewDict]];
I've just read (https://stackoverflow.com/a/18066138/1360888) that to solve this there are two possibilities over-constrain or change constant.
I'm quite new to autolayout and I have used always Visual Format Language (since I build my view with code only) so I did not understood how to apply that solution to my case.
How can I create a fluid layout for my view?
Note: In my app I have a lot of views like the header visible at the same time, so performance is important.
What I would do is to create an array of icons(as you call them, UIImageViews?). Then update the contents of the array according to your data.
On ViewWillLayoutSubviews
Check the array [1, 2, 3, 4]
Remove all constraints
Set new constraints according to your content array. The important thing here is to check the element of the array as nil. Autolayout does not process the nil elements correctly and fails.
Removing constraints:
//Clear the constraints
for (NSLayoutConstraint *constraint in [self.view constraints]) {
[self.view removeConstraint:constraint];
}
Adding constraints:
if (myCustomView) {//constraintsWithVisualFormat does not support handling nil
//Add constraints for myCustomView Here
}
ViewWillLayoutSubviews
/**
* Update the constraints before laying subviews
*
*/
- (void) viewWillLayoutSubviews
{
[super viewWillLayoutSubviews];
//Remove constraints
//Set new constraints
}
Let's say I have an array of views, and I want to stack these views in a list. Now, if I know ahead of time how many views there are, I could write a constraint like this:
"V:|-[view0]-[view1]-[view2]-[view_n]"
However, how can I accomplish something like this with a variable number of views in my array?
You can iterate over the array and build the string (use an NSMutableString). You need to add the views to a dictionary with keys that match the names you use in the format string.
Check out this awesome category:
https://github.com/jrturton/UIView-Autolayout
It has a spaceViews method that you can call on the container view and will space an array of views evenly along the specified axis.
There's some sample code in the demo project that should cover everything.
Here is how you would space some views evenly over the vertical axis:
This centre 4 views on the x axis and constrain the width to 150 points. The height would then be calculated depending on the height of self.view
#import "UIView+AutoLayout.h"
...
- (void)spaceViews
{
NSArray *views = #[ [self spacedView], [self spacedView], [self spacedView], [self spacedView] ];
[self.view spaceViews:views onAxis:UILayoutConstraintAxisVertical withSpacing:10 alignmentOptions:0];
}
- (UIView *)spacedView
{
//Create an autolayout view
UIView *view = [UIView autoLayoutView];
//Set the backgroundColor
[view setBackgroundColor:[UIColor redColor]];
//Add the view to the superview
[self.view addSubview:view];
//Constrain the width and center on the x axis
[view constrainToSize:CGSizeMake(150, 0)];
[view centerInContainerOnAxis:NSLayoutAttributeCenterX];
//Return the view
return view;
}
I had a requirement to add views from an array to a scrollview for my tutorial pages, in this case I built the VFL string by looping through the views, below is a snapshot, this code is to fit subview fully into scrollview's page. With some tweaks, padding,etc can be added. Anyways posting it here so that it helps someone.
Full code arrayAutolayout
/*!
Create an array of views that we need to load
#param nil
#result creates array of views and adds it to scrollview
*/
-(void)setUpViews
{
[viewsDict setObject:contentScrollView forKey:#"parent"];
int count = 20;//Lets layout 20 views
for (int i=0; i<=count; i++) {
// I am loading the view from xib.
ContentView *contenView = [[NSBundle mainBundle] loadNibNamed:#"ContentView" owner:self options:nil][0];
contenView.translatesAutoresizingMaskIntoConstraints = NO;
// Layout the text and color
[contenView layoutTheLabel];
[contentScrollView addSubview:contenView];
[viewsArray addObject:contenView];
}
}
/*!
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]];
}
Below is the string created
H:|[v0(==parent)][v1(==parent)][v2(==parent)][v3(==parent)][v4(==parent)][v5(==parent)][v6(==parent)][v7(==parent)][v8(==parent)][v9(==parent)][v10(==parent)][v11(==parent)][v12(==parent)][v13(==parent)][v14(==parent)][v15(==parent)][v16(==parent)][v17(==parent)][v18(==parent)][v19(==parent)][v20(==parent)]|