I am using autolayout. As I can add constraints to view only, but in maximum case I have to use scroll bar. So if I am adding view on scrollView with CGRectmake method. Then it is not changing the dimension in landscape mode.
Snapshot in portrait mode:
Snapshot in landscape mode:
Code:
UIScrollView *scrllView=[UIScrollView new];
[scrllView setTranslatesAutoresizingMaskIntoConstraints:NO];
[self.view addSubview:scrllView];
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:scrllView attribute:NSLayoutAttributeTrailing relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTrailing multiplier:1.0 constant:0]];
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:scrllView attribute:NSLayoutAttributeLeading relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeading multiplier:1.0 constant:0]];
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:scrllView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:1.0 constant:0]];
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:scrllView attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeBottom multiplier:1 constant:0]];
[scrllView setContentSize:CGSizeMake(self.view.frame.size.width, 1000)];
UIView *SBV=[UIView new];
[SBV setFrame:CGRectMake(0, 0, self.view.frame.size.width,1000)];
[SBV setTranslatesAutoresizingMaskIntoConstraints:YES];
[SBV setBackgroundColor:[UIColor redColor]];
[scrllView addSubview:SBV];
UIButton *BTN=[UIButton new];
[BTN setTranslatesAutoresizingMaskIntoConstraints:NO];
[BTN setTitle:#"UPSide" forState:UIControlStateNormal];
[BTN setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
[SBV addSubview:BTN];
[SBV addConstraint:[NSLayoutConstraint constraintWithItem:BTN attribute:NSLayoutAttributeTrailing relatedBy:NSLayoutRelationEqual toItem:SBV attribute:NSLayoutAttributeLeading multiplier:1.0 constant:100]];
[SBV addConstraint:[NSLayoutConstraint constraintWithItem:BTN attribute:NSLayoutAttributeLeading relatedBy:NSLayoutRelationEqual toItem:SBV attribute:NSLayoutAttributeLeading multiplier:1.0 constant:0]];
[SBV addConstraint:[NSLayoutConstraint constraintWithItem:BTN attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:SBV attribute:NSLayoutAttributeTop multiplier:1.0 constant:0]];
[SBV addConstraint:[NSLayoutConstraint constraintWithItem:BTN attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:0 constant:100]];
UIButton *BTN1=[UIButton new];
[BTN1 setTranslatesAutoresizingMaskIntoConstraints:NO];
[BTN1 setTitle:#"DOWNSide" forState:UIControlStateNormal];
[BTN1 setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
[SBV addSubview:BTN1];
[SBV addConstraint:[NSLayoutConstraint constraintWithItem:BTN1 attribute:NSLayoutAttributeTrailing relatedBy:NSLayoutRelationEqual toItem:SBV attribute:NSLayoutAttributeLeading multiplier:1.0 constant:100]];
[SBV addConstraint:[NSLayoutConstraint constraintWithItem:BTN1 attribute:NSLayoutAttributeLeading relatedBy:NSLayoutRelationEqual toItem:SBV attribute:NSLayoutAttributeLeading multiplier:1.0 constant:0]];
[SBV addConstraint:[NSLayoutConstraint constraintWithItem:BTN1 attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:SBV attribute:NSLayoutAttributeBottom multiplier:1.0 constant:0]];
[SBV addConstraint:[NSLayoutConstraint constraintWithItem:BTN1 attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:0 constant:100]];
How I can create a view that should work in landscape and porttrait mode ?
Disable size classes for use of autolayout.(From Interface Builder Document of view controller's File Inspector)
Take One scrollView in ViewController's View.Take One View Inside it.
Now select scrollView and select second option from Bottom bar [Pin].and select All four constraints (Leading,Top,Bottom,Trailing) and Uncheck constarint Margin Button.Add 4 Constraints.
Now select View and select second Option from Bottom bar [Pin] and select All four constraint (Leading,Top,Bottom,Trailing) and Uncheck constarint Margin Button. Select Height Constraint too(if height>568 than set your bottom Constraint 0). Now Add 5 constraints. And select first Option from Bottom bar [Align].And select second last option Horizonatal center in container and add 1 constraint.
Related
I'm adding some views to my UIViewController in code and using NSLayoutConstraints to position them where I want them on screen. Being a little new to NSLayoutConstraints in code; I did a test setup and am 95% of the way there. This is my current code:
UIView *redView = [[UIView alloc] init];
redView.backgroundColor = [UIColor redColor];
redView.translatesAutoresizingMaskIntoConstraints = NO;
[self.view addSubview:redView];
[redView addConstraint:[NSLayoutConstraint constraintWithItem:redView
attribute:NSLayoutAttributeHeight
relatedBy:NSLayoutRelationEqual
toItem:nil attribute:0
multiplier:1
constant:100]];
[redView addConstraint:[NSLayoutConstraint constraintWithItem:redView
attribute:NSLayoutAttributeWidth
relatedBy:NSLayoutRelationEqual
toItem:nil
attribute:0
multiplier:1
constant:693]];
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:redView
attribute:NSLayoutAttributeTop
relatedBy:NSLayoutRelationEqual
toItem:self.view
attribute:NSLayoutAttributeTop
multiplier:1
constant:60]];
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:redView
attribute:NSLayoutAttributeCenterX
relatedBy:NSLayoutRelationEqual
toItem:self.view
attribute:NSLayoutAttributeCenterX
multiplier:1
constant:0]];
UIView *blueView = [[UIView alloc] init];
blueView.backgroundColor = [UIColor blueColor];
blueView.translatesAutoresizingMaskIntoConstraints = NO;
[self.view addSubview:blueView];
[blueView addConstraint:[NSLayoutConstraint constraintWithItem:blueView
attribute:NSLayoutAttributeHeight
relatedBy:NSLayoutRelationEqual
toItem:nil
attribute:0
multiplier:10
constant:50]];
[blueView addConstraint:[NSLayoutConstraint constraintWithItem:blueView
attribute:NSLayoutAttributeWidth
relatedBy:NSLayoutRelationEqual
toItem:nil attribute:0
multiplier:1
constant:693]];
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:blueView
attribute:NSLayoutAttributeBottom
relatedBy:NSLayoutRelationEqual
toItem:redView attribute:NSLayoutAttributeBottom
multiplier:1 constant:70]];
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:blueView
attribute:NSLayoutAttributeCenterX
relatedBy:NSLayoutRelationEqual
toItem:redView
attribute:NSLayoutAttributeCenterX
multiplier:1
constant:0]];
UIView *orangeView = [[UIView alloc] init];
orangeView.backgroundColor = [UIColor orangeColor];
orangeView.translatesAutoresizingMaskIntoConstraints = NO;
[self.view addSubview:orangeView];
[orangeView addConstraint:[NSLayoutConstraint constraintWithItem:orangeView
attribute:NSLayoutAttributeHeight
relatedBy:NSLayoutRelationEqual
toItem:nil
attribute:0
multiplier:1
constant:25]];
[orangeView addConstraint:[NSLayoutConstraint constraintWithItem:orangeView
attribute:NSLayoutAttributeWidth
relatedBy:NSLayoutRelationEqual
toItem:nil
attribute:0
multiplier:1
constant:693]];
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:orangeView
attribute:NSLayoutAttributeBottom
relatedBy:NSLayoutRelationEqual
toItem:blueView
attribute:NSLayoutAttributeBottom
multiplier:1
constant:25]];
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:orangeView
attribute:NSLayoutAttributeCenterX
relatedBy:NSLayoutRelationEqual
toItem:blueView
attribute:NSLayoutAttributeCenterX
multiplier:1
constant:0]];
Which looks like this - as I want it: (Ignore the grey background - thats the superView)
Now what I am trying to do is get the orangeViews height to fill the rest of the screen to the bottom of the superView. However when I add a bottom constraint to the orangeView it adjusts the other views heights, too.
How can I get the orange views height to fill the grey area below it?
Edit:
Removing the height constraint on the orangeView and adding a bottom constraint to the superview like this:
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:orangeView
attribute:NSLayoutAttributeBottom
relatedBy:NSLayoutRelationEqual
toItem:self.view
attribute:NSLayoutAttributeBottom
multiplier:1
constant:0]];
Changes the views like so:
You are setting a fixed height on the orange view, so how can it expand and fill the entire view ?
Also I suggest you pin the top of the view to the bottom of the previous view, since you can easily change view sizes and keep the spacing even, when you do so, else you will have to adjust your constants in the bottom to bottom relationship.
Here is a code that does work fine:
UIView *redView = [[UIView alloc] init];
redView.backgroundColor = [UIColor redColor];
redView.translatesAutoresizingMaskIntoConstraints = NO;
[self.view addSubview:redView];
[redView addConstraint:[NSLayoutConstraint constraintWithItem:redView
attribute:NSLayoutAttributeHeight
relatedBy:NSLayoutRelationEqual
toItem:nil
attribute:0
multiplier:1
constant:100]];
[redView addConstraint:[NSLayoutConstraint constraintWithItem:redView
attribute:NSLayoutAttributeWidth
relatedBy:NSLayoutRelationEqual
toItem:nil
attribute:0
multiplier:1
constant:693]];
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:redView
attribute:NSLayoutAttributeTop
relatedBy:NSLayoutRelationEqual
toItem:self.view
attribute:NSLayoutAttributeTop
multiplier:1
constant:60]];
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:redView
attribute:NSLayoutAttributeCenterX
relatedBy:NSLayoutRelationEqual
toItem:self.view
attribute:NSLayoutAttributeCenterX
multiplier:1
constant:0]];
UIView *blueView = [[UIView alloc] init];
blueView.backgroundColor = [UIColor blueColor];
blueView.translatesAutoresizingMaskIntoConstraints = NO;
[self.view addSubview:blueView];
[blueView addConstraint:[NSLayoutConstraint constraintWithItem:blueView
attribute:NSLayoutAttributeHeight
relatedBy:NSLayoutRelationEqual
toItem:nil
attribute:0
multiplier:1
constant:50]];
[blueView addConstraint:[NSLayoutConstraint constraintWithItem:blueView
attribute:NSLayoutAttributeWidth
relatedBy:NSLayoutRelationEqual
toItem:nil attribute:0
multiplier:1
constant:693]];
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:blueView
attribute:NSLayoutAttributeTop
relatedBy:NSLayoutRelationEqual
toItem:redView attribute:NSLayoutAttributeBottom
multiplier:1 constant:10]];
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:blueView
attribute:NSLayoutAttributeCenterX
relatedBy:NSLayoutRelationEqual
toItem:redView
attribute:NSLayoutAttributeCenterX
multiplier:1
constant:0]];
UIView *orangeView = [[UIView alloc] init];
orangeView.backgroundColor = [UIColor orangeColor];
orangeView.translatesAutoresizingMaskIntoConstraints = NO;
[self.view addSubview:orangeView];
[orangeView addConstraint:[NSLayoutConstraint constraintWithItem:orangeView
attribute:NSLayoutAttributeWidth
relatedBy:NSLayoutRelationEqual
toItem:nil
attribute:0
multiplier:1
constant:693]];
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:orangeView
attribute:NSLayoutAttributeTop
relatedBy:NSLayoutRelationEqual
toItem:blueView
attribute:NSLayoutAttributeBottom
multiplier:1
constant:25]];
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:orangeView
attribute:NSLayoutAttributeBottom
relatedBy:NSLayoutRelationEqual
toItem:self.view
attribute:NSLayoutAttributeBottom
multiplier:1
constant:0]];
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:orangeView
attribute:NSLayoutAttributeCenterX
relatedBy:NSLayoutRelationEqual
toItem:blueView
attribute:NSLayoutAttributeCenterX
multiplier:1
constant:0]];
What you need is to set Y constraints to orange view: set bottomLayout constraint and vertical spacing for blue view. If XCode warn you with orange warnings, read those warnings, it usually says something lile "you need X constraint for your view".
[self.view addConstraints:[NSLayoutConstraint
constraintsWithVisualFormat:#"V:|-[yourViewHere(300)]-50-|"
options:0
metrics:nil
views:NSDictionaryOfVariableBindings(yourViewHere)]];
Where (300) is width of your view. That code snipper set constraint from bottomLayout to your view. Add similiar constraints as described above.
I am adding scrollView using constraints and it is working right. But it is showing strange behaviour.
When I am adding frame of scrollView as [SBV setFrame:CGRectMake(0, 0, scrllView.frame.size.width,1000)]; then its color is clearColor always no matter what I am givig to it.
Code:
UIScrollView *scrllView=[UIScrollView new];
[scrllView setTranslatesAutoresizingMaskIntoConstraints:NO];
[self.view addSubview:scrllView];
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:scrllView attribute:NSLayoutAttributeTrailing relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTrailing multiplier:1.0 constant:0]];
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:scrllView attribute:NSLayoutAttributeLeading relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeading multiplier:1.0 constant:0]];
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:scrllView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:1.0 constant:0]];
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:scrllView attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeBottom multiplier:1 constant:0]];
[scrllView setContentSize:CGSizeMake(self.view.frame.size.width, 1000)];
UIView *SBV=[UIView new];
[SBV setTranslatesAutoresizingMaskIntoConstraints:YES];
[SBV setFrame:CGRectMake(0, 0, scrllView.frame.size.width,1000)];
[SBV setBackgroundColor:[UIColor grayColor]];
[scrllView addSubview:SBV];
When I am adding frame of view as [SBV setFrame:CGRectMake(0, 0,self.view.frame.size.width,1000)]; then its color is same as given my me. Gray in this case
Don't use CGRectMake function instead leave the size as it is. It wont show any strange behaviour.
Setting content size when using Autolayout does have no effect.
Please refer to this answer - UIScrollView contentSize not working
Also this - UIScrollView doesn't use autolayout constraints
From the starting till the end, how do I initialise an UIImageView programmatically, and constraint the frame to the middle of the screen so that when the devices with different width is used, it is still in the middle.
Another words, how do I autolayout my outlets programmatically? With constraints?
For example, my background image is required to be in full screen, with constraining all the sides with constant 0. What is tthe coding basically from the start until the end?
Hope this helps you
{
UIView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"your_image"]];
imageView.translatesAutoresizingMaskIntoConstraints = NO;
[self.view addSubview:imageView];
[imageView addConstraint:[NSLayoutConstraint constraintWithItem:imageView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:0 multiplier:1 constant:YOUR_HEIGHT_CONSTANT]];
[imageView addConstraint:[NSLayoutConstraint constraintWithItem:imageView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:nil attribute:0 multiplier:1 constant:YOUR_WIDTH_CONSTANT]];
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:imageView attribute:NSLayoutAttributeCenterY relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterY multiplier:1 constant:0]];
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:imageView attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterX multiplier:1 constant:0]];
[self.view addSubview:imageView];
}
I have programatically set an image to a UIViewController background. How can i add autolayout programatically so it gets displayed both in iPad and iPhone?
The code is below:
UIImageView *bkImage = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"bkImage.png"]];
[self.view addSubview:bkImage];
1) Create the necessary constraint using one of the NSLayoutConstraint class methods that give you a constraint.
2) Add it to the view using the UIview's methods for adding a constraint.
This adds constraints of 0 leading, 0 trailing, 0 top and 0 bottom. You can modify them as per your needs.
[bkImage setTranslatesAutoresizingMaskIntoConstraints:NO];
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:bkImage
attribute:NSLayoutAttributeTrailing
relatedBy:NSLayoutRelationEqual
toItem:self.view
attribute:NSLayoutAttributeTrailing
multiplier:1.0f
constant:0.0f]];
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:bkImage
attribute:NSLayoutAttributeLeading
relatedBy:NSLayoutRelationEqual
toItem:self.view
attribute:NSLayoutAttributeLeading
multiplier:1.0f
constant:0.0f]];
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:bkImage
attribute:NSLayoutAttributeTop
relatedBy:NSLayoutRelationEqual
toItem:self.view
attribute:NSLayoutAttributeTop
multiplier:1.0f
constant:0.0f]];
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:bkImage
attribute:NSLayoutAttributeBottom
relatedBy:NSLayoutRelationEqual
toItem:self.view
attribute:NSLayoutAttributeBottom
multiplier:1.0f
constant:0.0f]];
I'm trying to add a UISlider to my view programmatically including constraints so that its width adapts to the whole screen width.
This is what I got so far:
//2 Add UISlider
self.slider = [[UISlider alloc] init];
[self.view addSubview:self.slider];
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:self.slider
attribute:NSLayoutAttributeLeft
relatedBy:NSLayoutRelationEqual
toItem:self.view
attribute:NSLayoutAttributeLeft
multiplier:1
constant:0]];
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:self.slider
attribute:NSLayoutAttributeRight
relatedBy:NSLayoutRelationEqual
toItem:self.view
attribute:NSLayoutAttributeRight
multiplier:1
constant:0]];
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:self.slider
attribute:NSLayoutAttributeBottom
relatedBy:NSLayoutRelationEqual
toItem:self.view
attribute:NSLayoutAttributeBottom
multiplier:1
constant:0]];
Missing self.slider.translatesAutoresizingMaskIntoConstraints = NO; Your code is working fine for me. See the below image