So I'm trying to use autolayout for cell content view to get the proper layout. So my problem is that I have a UILabel that changes its size with respect to its text and I also have a UIView as a background view for this label with rounded corners. So my question is, how to force this UIView's width to be 10 points wider than the UILabel. I managed to make it the same width but how can I force it always to be a certain length wider?
Thank you in advance!
NSLayoutConstraint *widthConstraint = [NSLayoutConstraint constraintWithItem:yourLabel
attribute:NSLayoutAttributeWidth
relatedBy:NSLayoutRelationEqual
toItem:yourLabel.superview
attribute:NSLayoutAttributeWidth
multiplier:1.0
constant:10]; // <-- this
[yourLabel.superview addConstraint:widthConstraint];
An autolayout constraint is nothing but an equation of the form
attribute1 == multiplier × attribute2 + constant
Note that programatically, you can virtually set any constraint on your views. The interface builder is however a bit limited given that you can relate only certain pairs of (attribute1,attribute2) an as you have noticed you may not be able to provide constant.
Have a look at
https://developer.apple.com/library/ios/DOCUMENTATION/AppKit/Reference/NSLayoutConstraint_Class/NSLayoutConstraint/NSLayoutConstraint.html
Related
I have a UILabel which should be centered horizontally and the width should be set according to its content length. and on the left side of the UILabel an UIImage should be positioned which should be aligned to UILabel. if UILabel needs more space then it should push UIImage to the left, and if UILabel needs less space then it should pull UIImage toward x-center.
I had it without layout working fine, but has to use auto layout. I'm trying but i can't figured it out.
[NSLayoutConstraint constraintsWithVisualFormat:#"H:|-padding-[img(16)][lblUserName]-padding-|" options:0 metrics:#{#"padding":[NSNumber numberWithFloat:Padding]} views:displayViewDic];
is it possible with auto layout? so sometimes it will be like in number 1 and other times like number 2.
#"H:|-padding-[img(16)][lblUserName]-padding-|"
Here you're saying that the image has to be a fixed distance from the superview's leading edge. That doesn't match your description.
You might just need to change it to
#"H:|-(>=padding)-[img(16)][lblUserName]-(>=padding)-|"
To allow some flexibility in the margins.
To center a view horizontally, you have to manually create the constraint:
[view addConstraint:[NSLayoutConstraint constraintWithItem:lblUserName
attribute:NSLayoutAttributeCenterX
relatedBy:NSLayoutRelationEqual
toItem:view
attribute:NSLayoutAttributeCenterX
multiplier:1.0
constant:0]];
You don't need to use sizeToFit or any other methods like that - an image view and a label will have an intrinsic content size based on the image or the text.
Because you have an inequality, you may need to force the label to be as narrow as possible to prevent stretching:
[lblUserName setContentHuggingPriority:UILayoutPriorityRequired forAxis:UILayoutConstraintAxisHorizontal];
Add a horizontal center constraint to the label. Just this, and a suitable y position constraint would keep the label in the center. It'd expand equally in both directions to accommodate the content.
Now, add a horizontal spacing constraint to the image view's trailing space and the label's leading space for the x position, a suitable constraint for the y position (align vertical center with the label, perhaps?) and suitable constraints/image/intrinsic size for the size.
Code:
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:#"H:[img(width)]-padding-[lblUserName]" options:0 metrics:#{#"width": 50, #"padding": 20} views:displayViewDic]];
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:lblUserName attribute:NSLayoutAttributeCenterX relatedBy:0 toItem:superview attribute:NSLayoutAttributeCenterX multiplier:0.0 constant:0.0]];
In my screen I have two view that are horizontally near to each other. I want the width of first view be twice of the width of second view.
I man for example, if right view has width=200 the second one show by with=100.
As I search and look in auto-layout, it has options for alignments and spaces between views. Do it has option for defining such relationships too?
You can do this programmatically by adding manual constraints that work with autolayout. I'm sure using InterfaceBuilder is also an option.
UIView *firstView;
UIView *secondView;
[firstView addConstraint:[NSLayoutConstraint constraintWithItem:secondView
attribute:NSLayoutAttributeWidth
relatedBy:NSLayoutRelationEqual
toItem:firstView
attribute:NSLayoutAttributeWidth
multiplier:2.0
constant:0]];
Note the multiplier there is 2.0 which is where it forces the width to be double.
A pretty simple question I reckon:
one UIViewController
one custom UIView
The controller only does:
-(void)loadView{
[super loadView];
self.sideMenu = [[sideMenuView alloc]init];
[self.view addSubview:self.sideMenu];
}
and in the UIView I would like to do something like:
self.translatesAutoresizingMaskIntoConstraints = NO;
NSLayoutConstraint *constraint = [NSLayoutConstraint constraintWithItem:self attribute:NSLayoutAttributeLeading relatedBy:NSLayoutRelationEqual toItem:self.superview attribute:NSLayoutAttributeLeading multiplier:1 constant:100];
[self.superview addConstraint:constraint];
So that when I create the UIView in the controller its constraints is already set in relation to the controller.
I have tried and nothing crashes but the UIView gets realy weird x and y coords
Maby I need to update the constraints? Or maby this isnt at all possible?
I'm not sure what ui behavior you are exactly looking for since it appears that you are trying to tie the leading space of your view to the leading space of it's superview. Being the leading space, the space on the left of the view, could it be that you are looking for the more common "stick my left side 100 pixels from my parents left border"? Anyway, in either case, I would connect an outlet from the controller to the custom view (i.e. myCustomView below) and then build the constraint in the UIViewController and not the UIView by overriding:
- (void)updateViewConstraints {
[super updateViewConstraints];
NSLayoutConstraint *constraint = [NSLayoutConstraint constraintWithItem:myCustomView
attribute:NSLayoutAttributeLeading
relatedBy:NSLayoutRelationEqual
toItem:myCustomView.superview
attribute:NSLayoutAttributeLeading
multiplier:1
constant:100];
[myCustomView addConstraint:constraint];
}
Apple has an interesting page with a table showing the various runtime entry points for autolayout at this address:
https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/AutolayoutPG/Articles/runtime.html#//apple_ref/doc/uid/TP40010853-CH6-SW1
You might consider adding other constraints as well. Auto layout has the the tendency to exploit any freedom you leave unchecked in the worst possible way ;-)
So leading edge is not enough.
You need enough constraints to satisfy vertical and horizontal layout.
In one direction you need at least
one edge & width (or hight)
Or
Two edges ( implicit width or height )
Or
A horizontal (or vertical) center based constraint and an explicit width ( or height respectively)
The thing about width and height is that they can also be determined by intrinsic content size.
Add constraints after adding the view to the superview.
A bit late but PureLayout is pretty handy https://github.com/smileyborg/PureLayout
Goal:
Have a UIWebView be the same width as it's superview, which is a UIScrollView, using autolayout constraints.
Code
NSLayoutConstraint *makeWidthTheSameAsScrollView =[NSLayoutConstraint
constraintWithItem:self.questionWebView
attribute:NSLayoutAttributeWidth
relatedBy:0
toItem:self.masterScrollView
attribute:NSLayoutAttributeWidth
multiplier:1.0
constant:0];
[self.view addConstraint:makeWidthTheSameAsScrollView];
NSLog(#"The width of questionWebView *AFTER* adding the constrain is: %f", self.questionWebView.frame.size.width);
NSLog(#"The width of scrollView *AFTER* adding the constrain is: %f", self.masterScrollView.frame.size.width);
Current Result
When I log the width of self.questionWebView (the UIWebView), it's width does not change when the autolayout constrain is applied.
Questions
Is this the correct approach?
What am I doing wrong?
p.s I know it is against Apple's recommendations to place a UIWebView in a UIScrollView, however I've turned off the ability to scroll the UIWebView using the property self.questionWebView.userInteractionEnabled = NO;. And currently using a UIWebView is my best strategy for displaying an HTML table.
Improving on Rob's answer, as requested.
As Rob already mentioned, UIScrollViews have peculiar behavior under Auto Layout.
What is of interest in this case is the fact that the scrollView total width is determined by using its subviews total width. So while the scrollView already asks the webView for its width, you're telling the webView to also ask the scrollView for its width. That's why it doesn't work. One is asking another, and no one knows the answer. You need another reference view to use as a constraint for the webView, and then the scrollView will also be able to successfully ask about its expected width.
An easy way this could be done: create another view, containerView, and add the scrollView as a subview to that. Then set the proper constraints for containerView. Let's say you wanted the scrollView centered on a viewController, with some padding on the edges. So do it for the containerView:
NSDictionary *dict = NSDictionaryOfVariableBindings(containerView);
[self.view addConstraints:[NSLayoutConstraints constraintsWithVisualFormat:#"H|-(100)-[containerView]-(100)-|" options:0 metrics:0 views:dict];
[self.view addConstraints:[NSLayoutConstraints constraintsWithVisualFormat:#"V|-(100)-[containerView]-(100)-|" options:0 metrics:0 views:dict];
Then you can proceed adding the webView as a subview to the scrollView and setting its width:
NSLayoutConstraint *makeWidthTheSameAsScrollView =[NSLayoutConstraint
constraintWithItem:self.questionWebView
attribute:NSLayoutAttributeWidth
relatedBy:0
toItem:containerView
attribute:NSLayoutAttributeWidth
multiplier:1.0
constant:0];
[self.view addConstraint:makeWidthTheSameAsScrollView];
This would make the scrollview as large and tall as the webView, and they both would be placed as intended (with the constraints set on containerView).
Scrollviews are a bit strange in how they interact with auto layout. See TN2154 (UIScrollView and Autolayout).
See also UIScrollView doesn't use autolayout constraints.
In general, you need to get the width of the contained view some other way than "the current width of the scrollview" since in auto layout the scrollview's width (i.e. content width) is defined in terms of its content. Thus your current request is circular.
I'm trying to use programmatic visual constraints to display a label and a button next to one another. However, the UIImageView used as the button's background is making the intrinsic size of the button much too large.
I attempted to add a constraint that forces the height of the button to match the height of the label. But I just got a super tall label instead of a smaller button.
How do I set a constraint so that the button height is the same height as the label (and not vice-versa)
The button should keep the original aspect ratio of the image - its width should also match its own height (maybe this comes for free?)
The following works for this:
Set a width for the button in the visual layout: #"|-[titleLabel][refreshButton(==26)]"
Add a constraint such that the height of the button is equal to its own (now explicit) width:
NSLayoutConstraint *constraint = [NSLayoutConstraint constraintWithItem:refreshButton
attribute:NSLayoutAttributeHeight
relatedBy:NSLayoutRelationEqual
toItem:refreshButton
attribute:NSLayoutAttributeWidth
multiplier:1.0f
constant:0.0f];
I would still prefer a solution that uses the label's height, instead of a fixed value.