UINavigationBar suppose to appear on the top of view controller. It's not appearing. I am adding constraints with view.
Code:
navBar=[[UINavigationBar alloc]init];
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:self.view attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:navBar attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0 constant:10]];
[navBar setBackgroundColor:[UIColor blueColor]];
[views addSubview:navBar];
Is there any problem in adding constraints?
You can programmatically set layout constraints for a UINavgationBar, your constraint that you set is not correct.
You set:
self.view.top = navBar.NotAnAttribute * 1.0 (multiplier) + 10.0 (constant)
In my opinion this should be:
self.view.top = navBar.top * 1.0 + 10.0
therefore:
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:self.view attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:navBar attribute:NSLayoutAttributeTop multiplier:1.0 constant:10]];
should work.
Related
I have a view called profile which is taking (0,0,320,60) size in storyboard which is taking full width but 60 height, and i am trying to place another view called ranking inside it at the center and what ever the device is iPhone4s,5s,6s,6 it should just take my view and put it at the center.
Here is what i tried:
ranking.frame = CGRectMake(0, 0, 120, 60);
ranking.center = self.Profile.center;
The current code is not centering my view In all devices. what can i do to do it dynamically ?
You can use AutoLayout with the following method:
+ (void)centerView:(UIView *)view inContainerView:(UIView *)containerView withSuperView:(UIView *)superView
{
[superView addConstraint:[NSLayoutConstraint constraintWithItem:view attribute:NSLayoutAttributeCenterY relatedBy:NSLayoutRelationEqual toItem:containerView attribute:NSLayoutAttributeCenterY multiplier:1.0 constant:0.0]];
[superView addConstraint:[NSLayoutConstraint constraintWithItem:view attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:containerView attribute:NSLayoutAttributeCenterX multiplier:1.0 constant:0.0]];
}
You can add the method above in your ViewController or in a helper class.
Remember to set the translatesAutoresizingMaskIntoConstraints property to false before using AutoLayout on your view.
So if ranking is your subview and self.Profile is your superView you can do the following.
UIView *ranking = [[UIView alloc] init];
ranking.translatesAutoresizingMaskIntoConstraints = false;
[self.Profile addSubview:ranking];
[[self class] centerView:ranking inContainerView:self.Profile withSuperView:self.Profile];
[self.Profile addConstraint:[NSLayoutConstraint constraintWithItem:ranking attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0 constant:120]];
[self.Profile addConstraint:[NSLayoutConstraint constraintWithItem:ranking attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0 constant:60]];
I am a beginner with iOS auto-layouts and I am adding five labels on my view controller and so for every thing is OK. (Here five labels width and heights are constant.)
My main requirement is how to make equal horizontal spacing b/w that five labels. I can set middle label and left and right corner labels and they are perfect. But I don't understand how to add second left and second right labels, and how to make equal space B/W them, as like another labels?
My requirement is exact like below image, please help me.
My code:
#import "ViewController2.h"
#interface ViewController2 ()
{
UILabel * left1;
UILabel * left2;
UILabel * middle;
UILabel * right1;
UILabel * right2;
}
#end
#implementation ViewController2
- (void)viewDidLoad {
[super viewDidLoad];
left1 = [[UILabel alloc] init];
left1.backgroundColor = [UIColor grayColor];
left1.translatesAutoresizingMaskIntoConstraints = NO;
[self.view addSubview:left1];
left2 = [[UILabel alloc] init];
left2.backgroundColor = [UIColor grayColor];
left2.translatesAutoresizingMaskIntoConstraints = NO;
[self.view addSubview:left2];
middle = [[UILabel alloc] init];
middle.backgroundColor = [UIColor grayColor];
middle.translatesAutoresizingMaskIntoConstraints = NO;
[self.view addSubview:middle];
right1 = [[UILabel alloc] init];
right1.backgroundColor = [UIColor grayColor];
right1.translatesAutoresizingMaskIntoConstraints = NO;
[self.view addSubview:right1];
right2 = [[UILabel alloc] init];
right2.backgroundColor = [UIColor grayColor];
right2.translatesAutoresizingMaskIntoConstraints = NO;
[self.view addSubview:right2];
//Applying autolayouts for middle lable
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:middle
attribute:NSLayoutAttributeTop
relatedBy:NSLayoutRelationEqual
toItem:self.view
attribute:NSLayoutAttributeTop
multiplier:1.0
constant:100]];
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:middle
attribute:NSLayoutAttributeCenterX
relatedBy:NSLayoutRelationEqual
toItem:self.view
attribute:NSLayoutAttributeCenterX
multiplier:1.0
constant:10]];
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:middle
attribute:NSLayoutAttributeHeight
relatedBy:NSLayoutRelationEqual
toItem:nil
attribute:0
multiplier:1.0
constant:50]];
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:middle
attribute:NSLayoutAttributeWidth
relatedBy:NSLayoutRelationEqual
toItem:nil
attribute:0
multiplier:1.0
constant:20]];
//Appying autolayouts for left1 labe1
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:left1
attribute:NSLayoutAttributeTop
relatedBy:NSLayoutRelationEqual
toItem:self.view
attribute:NSLayoutAttributeTop
multiplier:1.0
constant:100]];
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:left1
attribute:NSLayoutAttributeLeading
relatedBy:NSLayoutRelationEqual
toItem:self.view
attribute:NSLayoutAttributeLeading
multiplier:1.0
constant:10]];
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:left1
attribute:NSLayoutAttributeHeight
relatedBy:NSLayoutRelationEqual
toItem:nil
attribute:0
multiplier:1.0
constant:50]];
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:left1
attribute:NSLayoutAttributeWidth
relatedBy:NSLayoutRelationEqual
toItem:nil
attribute:0
multiplier:1.0
constant:20]];
//Appying autolayouts for right1 labe1
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:right1
attribute:NSLayoutAttributeTop
relatedBy:NSLayoutRelationEqual
toItem:self.view
attribute:NSLayoutAttributeTop
multiplier:1.0
constant:100]];
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:right1
attribute:NSLayoutAttributeTrailing
relatedBy:NSLayoutRelationEqual
toItem:self.view
attribute:NSLayoutAttributeTrailing
multiplier:1.0
constant:-10]];
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:right1
attribute:NSLayoutAttributeHeight
relatedBy:NSLayoutRelationEqual
toItem:nil
attribute:0
multiplier:1.0
constant:50]];
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:right1
attribute:NSLayoutAttributeWidth
relatedBy:NSLayoutRelationEqual
toItem:nil
attribute:0
multiplier:1.0
constant:20]];
}
#end
Here is steps for you (via IB)
Create your 5 labels
Setup left and right label constraints (for left - leading, top, width, height; for right - trailing, top, width height)
Center horisontally middle label (top constraint, width, height, center horisontally)
Here is some trick - add two container views between left and middle label + middle label and right label
setup constraints for this containers ( leading and trailing constraints + top + height) This containers will be flexible depend on screen size
after adding constraints it should looks like
The last step - place other labels into green container and setup constraints as for middle label ( it should be centered in container + add top , width , height constraint )
All constraints provided at the left size, so you can easily recreate it via code, if you need
Hope this helps
So I know your question was answered, but in iOS9 there are UIStackViews which are specifically built for this situation. Here's how to use them for future reference:
Shift + click and drag to select all your labels (note you don't have to size them)
Click the StackView button on the bottom right of the screen
Then select your StackView and set Alignment to "Fill", and Distribution to "Equal Spacing"
Then with your stackview still selected click the pin icon, and put 200 at the top, 10 and 10 for the sides, and 130 for the height. Then click add 4 constraints.
Finally click the triangle icon and select update frames.
Voila! You have your layout without having to use spacers!
In my application I have inserted UIViews on view controller. My main requirement is that I want to set equal widths for both UIViews using auto-layouts "Constraint with item format".
For this I have written some code but I did not get equal widths. What did I do here wrong?
I want get result like below image (i.e need to set equal widths for both UIViews).
My code:
#import "ViewController8.h"
#interface ViewController8 ()
{
UIView * myView1;
UIView * myView2;
}
#end
#implementation ViewController8
- (void)viewDidLoad {
[super viewDidLoad];
myView1 = [[UIView alloc] init];
myView1.backgroundColor = [UIColor lightGrayColor];
myView1.translatesAutoresizingMaskIntoConstraints = NO;
[self.view addSubview:myView1];
myView2 = [[UIView alloc] init];
myView2.backgroundColor = [UIColor redColor];
myView2.translatesAutoresizingMaskIntoConstraints = NO;
[self.view addSubview:myView2];
[self operation2];
}
-(void)operation2
{
//Applying autolayouts for myview2
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:myView2
attribute:NSLayoutAttributeHeight
relatedBy:NSLayoutRelationEqual
toItem:nil
attribute:0
multiplier:1.0
constant:50]];
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:myView2
attribute:NSLayoutAttributeTrailing
relatedBy:NSLayoutRelationEqual
toItem:self.view
attribute:NSLayoutAttributeTrailing
multiplier:1.0
constant:-10]];
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:myView2
attribute:NSLayoutAttributeBottom
relatedBy:NSLayoutRelationEqual
toItem:self.view
attribute:NSLayoutAttributeBottom
multiplier:1.0
constant:-30]];
//Applying autolayouts for myview1
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:myView1
attribute:NSLayoutAttributeLeading
relatedBy:NSLayoutRelationEqual
toItem:self.view
attribute:NSLayoutAttributeLeading
multiplier:1.0
constant:10]];
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:myView1
attribute:NSLayoutAttributeHeight
relatedBy:NSLayoutRelationEqual
toItem:nil
attribute:0
multiplier:1.0
constant:50]];
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:myView1
attribute:NSLayoutAttributeTrailing
relatedBy:NSLayoutRelationEqual
toItem:myView2
attribute:NSLayoutAttributeLeading
multiplier:1.0
constant:-30]];
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:myView1
attribute:NSLayoutAttributeBottom
relatedBy:NSLayoutRelationEqual
toItem:self.view
attribute:NSLayoutAttributeBottom
multiplier:1.0
constant:-30]];
}
Equal width constraint is not there in your posted code. Try adding this
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:myView1
attribute:NSLayoutAttributeWidth
relatedBy:NSLayoutRelationEqual
toItem:nil
attribute:NSLayoutAttributeNotAnAttribute
multiplier:1.0
constant:200]];
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:myView2
attribute:NSLayoutAttributeWidth
relatedBy:NSLayoutRelationEqual
toItem:myView1
attribute:NSLayoutAttributeWidth
multiplier:1.0
constant:0]];
It's enough to add the equal-width constraint
[NSLayoutConstraint constraintWithItem:myView1
attribute:NSLayoutAttributeWidth
relatedBy:NSLayoutRelationEqual
toItem:myView2
attribute:NSLayoutAttributeWidth
multiplier:1.0
constant:0];
You must not define the width of the two views explicitly using constraints because view1 is pinned to the leading edge of the superview, view2 is pinned to the trailing edge of the superview and the trailing edge of view1 is pinned to the leading edge of view2. Hence, the constraint system is fully determined after adding the above equal-width constraint.
This is what adding the constraint will lead to:
Contemporary solution is using NSLayoutAnchor
myView1.widthAnchor.constraint(equalTo: myView2.widthAnchor)
don't forget to activate this using isActive = true, or via NSLayoutConstraint.activate().
I have a view that is pushed onto navigation stack like this:
FriendsDetailViewController *detail = [[FriendsDetailViewController alloc] init];
detail.user = selectedUser;
[self.navigationController pushViewController:detail animated:YES];
Inside a view controller, I have two elements: my custom controls view, that is a view with two buttons and a label inside, and a table view. I am setting constraints to them as shown:
-(void)setupView {
self.tableView = [[UITableView alloc] init];
self.tableView.dataSource = self;
self.tableView.translatesAutoresizingMaskIntoConstraints = NO;
self.tableView.backgroundColor = [UIColor lightGrayColor];
[self.view addSubview:self.tableView];
self.controlsView = [[ControlsView alloc] init];
self.controlsView.player = self.player;
self.controlsView.translatesAutoresizingMaskIntoConstraints = NO;
[self.view addSubview:self.controlsView];
[self setControlsViewConstraints];
[self setTableViewConstraints];
}
-(void)setTableViewConstraints {
NSLayoutConstraint *topConstraint = [NSLayoutConstraint constraintWithItem:self.tableView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.controlsView attribute:NSLayoutAttributeBottom multiplier:1.0 constant:0];
NSLayoutConstraint *leadingConstraint = [NSLayoutConstraint constraintWithItem:self.tableView attribute:NSLayoutAttributeLeading relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeading multiplier:1.0 constant:0];
NSLayoutConstraint *trailingConstraint = [NSLayoutConstraint constraintWithItem:self.tableView attribute:NSLayoutAttributeTrailing relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTrailing multiplier:1.0 constant:0];
NSLayoutConstraint *bottomConstraint = [NSLayoutConstraint constraintWithItem:self.tableView attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeBottom multiplier:1.0 constant:0];
[self.view addConstraints:#[topConstraint, leadingConstraint, trailingConstraint, bottomConstraint]];
}
-(void)setControlsViewConstraints {
NSLayoutConstraint *top = [NSLayoutConstraint constraintWithItem:self.controlsView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.topLayoutGuide attribute:NSLayoutAttributeBottom multiplier:1.0 constant:0];
NSLayoutConstraint *leading = [NSLayoutConstraint constraintWithItem:self.controlsView attribute:NSLayoutAttributeLeading relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeading multiplier:1.0 constant:0];
NSLayoutConstraint *trailing = [NSLayoutConstraint constraintWithItem:self.controlsView attribute:NSLayoutAttributeTrailing relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTrailing multiplier:1.0 constant:0];
NSLayoutConstraint *height = [NSLayoutConstraint constraintWithItem:self.controlsView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0 constant:30];
[self.view addConstraints:#[top, leading, trailing, height]];
}
But by the end I get unexpected result.
Firstly, my custom controls view is black, although in code the background color is set to white. Secondly, custom controls view is situated just as I expected, but my table View is messed up. Somehow it does not sit on the bottom of my controls view.
I have other view controller without an embedded navigation controller, and the layout is just fine.
It seems like I don't catch how navigation view is embedded in my view controller. I do the whole project without Interface builder, and this strange behavior is really confusing.
Since iOS7, view controllers set scrollViews insets if there's a navigation bar, to make the content go behind the blurred bar (see https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIViewController_Class/index.html#//apple_ref/occ/instp/UIViewController/automaticallyAdjustsScrollViewInsets)
so to fix your tableView you just need to set self.automaticallyAdjustsScrollViewInsets = NO
For the color of the other view, it's weird, but nothing in the code you posted changes the backgroundColor, are you sure you're setting it somewhere else?
I want to have a UIView programmatically added to a UITableViewController which is using autolayout...
I have the following code inside of the viewDidLoad of a UITableViewController:
UIView *centerView = [[UIView alloc] init];
[centerView setTranslatesAutoresizingMaskIntoConstraints:NO];
centerView.backgroundColor = [UIColor greenColor];
[self.view addSubview:centerView];
// Width constraint, half of parent view width
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:centerView
attribute:NSLayoutAttributeWidth
relatedBy:NSLayoutRelationEqual
toItem:self.view
attribute:NSLayoutAttributeWidth
multiplier:0.5
constant:0]];
// Height constraint, half of parent view height
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:centerView
attribute:NSLayoutAttributeHeight
relatedBy:NSLayoutRelationEqual
toItem:self.view
attribute:NSLayoutAttributeHeight
multiplier:0.5
constant:0]];
// Center horizontally
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:centerView
attribute:NSLayoutAttributeCenterX
relatedBy:NSLayoutRelationEqual
toItem:self.view
attribute:NSLayoutAttributeCenterX
multiplier:1.0
constant:0.0]];
// Center vertically
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:centerView
attribute:NSLayoutAttributeCenterY
relatedBy:NSLayoutRelationEqual
toItem:self.view
attribute:NSLayoutAttributeCenterY
multiplier:1.0
constant:0.0]];
If I now run the app on iOS 8 all working well:
If I run it on iOS 7, the app crashes with the following error:
*** Assertion failure in -[UITableView layoutSublayersOfLayer:], /SourceCache/UIKit_Sim/UIKit-2935.137/UIView.m:8794
If I set setTranslatesAutoresizingMaskIntoConstraints to YES, the app crashes as well with this notice: Unable to simultaneously satisfy constraints
Okay, it looks like UITableView doesn't support Autolayout on iOS 7. So we have to use autoresizing masks. My idea is to put a containerView with autoresizing mask as the tableview's subview and inside that your centerView:
Code:
- (void)viewDidLoad
{
[super viewDidLoad];
[self setupBackgroundView];
}
- (void)setupBackgroundView
{
UIView *backgroundContainerView = [[UIView alloc] initWithFrame:CGRectZero];
backgroundContainerView.backgroundColor = [UIColor cyanColor];
backgroundContainerView.frame = self.tableView.bounds;
backgroundContainerView.autoresizingMask = UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth;
[self.view addSubview:backgroundContainerView];
UIView *centerView = [[UIView alloc] initWithFrame:CGRectZero];
centerView.translatesAutoresizingMaskIntoConstraints = NO;
centerView.backgroundColor = [UIColor greenColor];
[backgroundContainerView addSubview:centerView];
[backgroundContainerView addConstraint:[NSLayoutConstraint constraintWithItem:centerView
attribute:NSLayoutAttributeWidth
relatedBy:NSLayoutRelationEqual
toItem:backgroundContainerView
attribute:NSLayoutAttributeWidth
multiplier:0.5
constant:0]];
// Height constraint, half of parent view height
[backgroundContainerView addConstraint:[NSLayoutConstraint constraintWithItem:centerView
attribute:NSLayoutAttributeHeight
relatedBy:NSLayoutRelationEqual
toItem:backgroundContainerView
attribute:NSLayoutAttributeHeight
multiplier:0.5
constant:0]];
// Center horizontally
[backgroundContainerView addConstraint:[NSLayoutConstraint constraintWithItem:centerView
attribute:NSLayoutAttributeCenterX
relatedBy:NSLayoutRelationEqual
toItem:backgroundContainerView
attribute:NSLayoutAttributeCenterX
multiplier:1.0
constant:0.0]];
// Center vertically
[backgroundContainerView addConstraint:[NSLayoutConstraint constraintWithItem:centerView
attribute:NSLayoutAttributeCenterY
relatedBy:NSLayoutRelationEqual
toItem:backgroundContainerView
attribute:NSLayoutAttributeCenterY
multiplier:1.0
constant:0.0]];
}
Now centerView moves when the table view gets scrolled. If you want to have it fixed and the content hovering above, you should use backgroundView on UITableView:
- (void)setupBackgroundView
{
UIView *backgroundContainerView = [[UIView alloc] initWithFrame:CGRectZero];
backgroundContainerView.backgroundColor = [UIColor cyanColor];
UIView *centerView = [[UIView alloc] initWithFrame:CGRectZero];
centerView.translatesAutoresizingMaskIntoConstraints = NO;
centerView.backgroundColor = [UIColor greenColor];
[backgroundContainerView addSubview:centerView];
[backgroundContainerView addConstraint:[NSLayoutConstraint constraintWithItem:centerView
attribute:NSLayoutAttributeWidth
relatedBy:NSLayoutRelationEqual
toItem:backgroundContainerView
attribute:NSLayoutAttributeWidth
multiplier:0.5
constant:0]];
// Height constraint, half of parent view height
[backgroundContainerView addConstraint:[NSLayoutConstraint constraintWithItem:centerView
attribute:NSLayoutAttributeHeight
relatedBy:NSLayoutRelationEqual
toItem:backgroundContainerView
attribute:NSLayoutAttributeHeight
multiplier:0.5
constant:0]];
// Center horizontally
[backgroundContainerView addConstraint:[NSLayoutConstraint constraintWithItem:centerView
attribute:NSLayoutAttributeCenterX
relatedBy:NSLayoutRelationEqual
toItem:backgroundContainerView
attribute:NSLayoutAttributeCenterX
multiplier:1.0
constant:0.0]];
// Center vertically
[backgroundContainerView addConstraint:[NSLayoutConstraint constraintWithItem:centerView
attribute:NSLayoutAttributeCenterY
relatedBy:NSLayoutRelationEqual
toItem:backgroundContainerView
attribute:NSLayoutAttributeCenterY
multiplier:1.0
constant:0.0]];
self.tableView.backgroundView = backgroundContainerView;
}
Try removing this line from your code once and build then.
[centerView setTranslatesAutoresizingMaskIntoConstraints:NO];