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];
}
Related
I wanted to implement WKWebView and UIImageView Inside a UIScrollView programmatically, but it doesn't fulfill my requirement.I first add UIImageView & WKWebView to scrollView after that I added the scrollView to ViewController subview. I write the Objective-C code for it as below.
#import "StoryDetailViewController.h"
#import <WebKit/WebKit.h>
#interface StoryDetailViewController ()
//#property(strong,nonatomic) WKWebView *webView;
#end
#implementation StoryDetailViewController{
UIScrollView* scrollView;
WKWebView* webView;
UILabel* title;
UIImageView* imageView;
}
- (void)viewDidLoad {
[super viewDidLoad];
[self setUpSubview];
// Do any additional setup after loading the view.
}
-(void)setUpSubview{
scrollView = [[UIScrollView alloc]init];
scrollView.backgroundColor=[UIColor redColor];
scrollView.translatesAutoresizingMaskIntoConstraints=NO;
imageView=[[UIImageView alloc]init];
imageView.backgroundColor=[UIColor yellowColor];
imageView.translatesAutoresizingMaskIntoConstraints=NO;
webView = [[WKWebView alloc]init];
webView.backgroundColor=[UIColor purpleColor];
webView.translatesAutoresizingMaskIntoConstraints=NO;
[scrollView addSubview:imageView];
[scrollView addSubview:webView];
[self.view addSubview:scrollView];
[self addConstraints];
}
-(void)addConstraints{
[scrollView addConstraint:[NSLayoutConstraint constraintWithItem:imageView
attribute:NSLayoutAttributeWidth
relatedBy:NSLayoutRelationEqual
toItem:scrollView
attribute:NSLayoutAttributeWidth
multiplier:1.0
constant:0.0]];
[scrollView addConstraint:[NSLayoutConstraint constraintWithItem:imageView
attribute:NSLayoutAttributeHeight
relatedBy:NSLayoutRelationEqual
toItem:scrollView
attribute:NSLayoutAttributeHeight
multiplier:0.35
constant:0.0]];
[scrollView addConstraint:[NSLayoutConstraint constraintWithItem:imageView
attribute:NSLayoutAttributeLeft
relatedBy:NSLayoutRelationEqual
toItem:scrollView
attribute:NSLayoutAttributeLeft
multiplier:1.0
constant:0.0]];
[scrollView addConstraint:[NSLayoutConstraint constraintWithItem:imageView
attribute:NSLayoutAttributeTop
relatedBy:NSLayoutRelationEqual
toItem:scrollView
attribute:NSLayoutAttributeTop
multiplier:1.0
constant:0.0]];
[scrollView addConstraint:[NSLayoutConstraint constraintWithItem:webView
attribute:NSLayoutAttributeWidth
relatedBy:NSLayoutRelationEqual
toItem:scrollView
attribute:NSLayoutAttributeWidth
multiplier:1.0
constant:0.0]];
[scrollView addConstraint:[NSLayoutConstraint constraintWithItem:webView
attribute:NSLayoutAttributeLeft
relatedBy:NSLayoutRelationEqual
toItem:scrollView
attribute:NSLayoutAttributeLeft
multiplier:1.0
constant:0.0]];
[scrollView addConstraint:[NSLayoutConstraint constraintWithItem:webView
attribute:NSLayoutAttributeTop
relatedBy:NSLayoutRelationEqual
toItem:imageView
attribute:NSLayoutAttributeBottom
multiplier:1.0
constant:10.0]];
[scrollView addConstraint:[NSLayoutConstraint constraintWithItem:webView
attribute:NSLayoutAttributeBottom
relatedBy:NSLayoutRelationEqual
toItem:scrollView
attribute:NSLayoutAttributeBottom
multiplier:1.0
constant:0.0]];
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:scrollView
attribute:NSLayoutAttributeLeft
relatedBy:NSLayoutRelationEqual
toItem:self.view
attribute:NSLayoutAttributeLeft
multiplier:1.0
constant:0.0]];
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:scrollView
attribute:NSLayoutAttributeRight
relatedBy:NSLayoutRelationEqual
toItem:self.view
attribute:NSLayoutAttributeRight
multiplier:1.0
constant:0.0]];
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:scrollView
attribute:NSLayoutAttributeBottom
relatedBy:NSLayoutRelationEqual
toItem:self.view
attribute:NSLayoutAttributeBottom
multiplier:1.0
constant:0.0]];
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:scrollView
attribute:NSLayoutAttributeTop
relatedBy:NSLayoutRelationEqual
toItem:self.view
attribute:NSLayoutAttributeTop
multiplier:1.0
constant:0.0]];
}
#end
**I'm using the WKwebview because the UIWebView is deprecated in Xcode 9 and WKwebview in storyboard supported only from iOS 11 **
So Please help if code is wrong.
First you want to put this code in viewDidLayoutSubviews
-(void)viewDidLayoutSubviews {
[self setUpSubview];
}
second , you should create a content view inside scrollview and add elements to it but as a work around add these 2 constraints
[scrollView addConstraint:[NSLayoutConstraint constraintWithItem:imageView
attribute:NSLayoutAttributeRight
relatedBy:NSLayoutRelationEqual
toItem:scrollView
attribute:NSLayoutAttributeRight
multiplier:1.0
constant:0.0]];
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:imageView
attribute:NSLayoutAttributeWidth
relatedBy:NSLayoutRelationEqual
toItem:self.view
attribute:NSLayoutAttributeWidth
multiplier:1.0
constant:0.0]];
and remove this as scrollview expects it's size from sub-elements and not vice versa
[scrollView addConstraint:[NSLayoutConstraint constraintWithItem:imageView
attribute:NSLayoutAttributeWidth
relatedBy:NSLayoutRelationEqual
toItem:scrollView
attribute:NSLayoutAttributeWidth
multiplier:1.0
constant:0.0]];
third give height for the imageView not that equals to scroll view remove it and give a static height or height proportional to self.view
[imageView addConstraint:[NSLayoutConstraint constraintWithItem:imageView
attribute:NSLayoutAttributeHeight
relatedBy:NSLayoutRelationEqual
toItem:nil
attribute:NSLayoutAttributeNone
multiplier:1.0
constant:200.0]];
finally do setp 2,3 with the webview
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.
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 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