How to Create layout constraints programmatically
IosIphoneConstraintsIos Problem Overview
I am displaying a view in the bottom of the universal application and adding this view dynamically in my view. I want to show this view in bottom every time like iAd. in both orientation. How can I add constraints for this. Please suggest.
Thanks
Ios Solutions
Solution 1 - Ios
To fix a view to the bottom of the screen you need following constraints to set.
- Leading Constraint with respect of Parent View for - X
- Trailing Constraint with respect of Parent View for - Width
- Bottom Constraint with respect of Parent View for - Y
- Height Constraint attached to self for - Height.
Lets add.
UIView *subView=bottomView;
UIView *parent=self.view;
subView.translatesAutoresizingMaskIntoConstraints = NO;
//Trailing
NSLayoutConstraint *trailing =[NSLayoutConstraint
constraintWithItem:subView
attribute:NSLayoutAttributeTrailing
relatedBy:NSLayoutRelationEqual
toItem:parent
attribute:NSLayoutAttributeTrailing
multiplier:1.0f
constant:0.f];
//Leading
NSLayoutConstraint *leading = [NSLayoutConstraint
constraintWithItem:subView
attribute:NSLayoutAttributeLeading
relatedBy:NSLayoutRelationEqual
toItem:parent
attribute:NSLayoutAttributeLeading
multiplier:1.0f
constant:0.f];
//Bottom
NSLayoutConstraint *bottom =[NSLayoutConstraint
constraintWithItem:subView
attribute:NSLayoutAttributeBottom
relatedBy:NSLayoutRelationEqual
toItem:parent
attribute:NSLayoutAttributeBottom
multiplier:1.0f
constant:0.f];
//Height to be fixed for SubView same as AdHeight
NSLayoutConstraint *height = [NSLayoutConstraint
constraintWithItem:subView
attribute:NSLayoutAttributeHeight
relatedBy:NSLayoutRelationEqual
toItem:nil
attribute:NSLayoutAttributeNotAnAttribute
multiplier:0
constant:ADHeight];
//Add constraints to the Parent
[parent addConstraint:trailing];
[parent addConstraint:bottom];
[parent addConstraint:leading];
//Add height constraint to the subview, as subview owns it.
[subView addConstraint:height];
Hope this helps.
Cheers.
Solution 2 - Ios
Small extension for previous answer because addConstraint will be deprecated in future. Here is an extension for UI view. Use these functions after you added view to hierarchy.
OBJC
@implementation UIView (Constraints)
-(void)addConstaintsToSuperviewWithLeftOffset:(CGFloat)leftOffset topOffset:(CGFloat)topOffset {
self.translatesAutoresizingMaskIntoConstraints = false;
[[NSLayoutConstraint constraintWithItem: self
attribute: NSLayoutAttributeLeading
relatedBy: NSLayoutRelationEqual
toItem: self.superview
attribute: NSLayoutAttributeLeading
multiplier: 1
constant: leftOffset] setActive:true];
[[NSLayoutConstraint constraintWithItem: self
attribute: NSLayoutAttributeTop
relatedBy: NSLayoutRelationEqual
toItem: self.superview
attribute: NSLayoutAttributeTop
multiplier: 1
constant: topOffset] setActive:true];
}
-(void)addConstaintsWithWidth:(CGFloat)width height:(CGFloat)height {
self.translatesAutoresizingMaskIntoConstraints = false;
[[NSLayoutConstraint constraintWithItem: self
attribute: NSLayoutAttributeWidth
relatedBy: NSLayoutRelationEqual
toItem: nil
attribute: NSLayoutAttributeNotAnAttribute
multiplier: 1
constant: width] setActive:true];
[[NSLayoutConstraint constraintWithItem: self
attribute: NSLayoutAttributeHeight
relatedBy: NSLayoutRelationEqual
toItem: nil
attribute: NSLayoutAttributeNotAnAttribute
multiplier: 1
constant: height] setActive:true];
}
@end
Swift 3
extension UIView {
public func addConstaintsToSuperview(leftOffset: CGFloat, topOffset: CGFloat) {
self.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint(item: self,
attribute: .leading,
relatedBy: .equal,
toItem: self.superview,
attribute: .leading,
multiplier: 1,
constant: leftOffset).isActive = true
NSLayoutConstraint(item: self,
attribute: .top,
relatedBy: .equal,
toItem: self.superview,
attribute: .top,
multiplier: 1,
constant: topOffset).isActive = true
}
public func addConstaints(height: CGFloat, width: CGFloat) {
self.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint(item: self,
attribute: .height,
relatedBy: .equal,
toItem: nil,
attribute: .notAnAttribute,
multiplier: 1,
constant: height).isActive = true
NSLayoutConstraint(item: self,
attribute: .width,
relatedBy: .equal,
toItem: nil,
attribute: .notAnAttribute,
multiplier: 1,
constant: width).isActive = true
}
}
Solution 3 - Ios
Also since iOS 9 it could be done super simple with anchors:
Swift 3
extension UIView {
func addConstaintsToSuperview(leadingOffset: CGFloat, topOffset: CGFloat) {
guard superview != nil else {
return
}
translatesAutoresizingMaskIntoConstraints = false
leadingAnchor.constraint(equalTo: superview!.leadingAnchor,
constant: leadingOffset).isActive = true
topAnchor.constraint(equalTo: superview!.topAnchor,
constant: topOffset).isActive = true
}
func addConstaints(height: CGFloat, width: CGFloat) {
heightAnchor.constraint(equalToConstant: height).isActive = true
widthAnchor.constraint(equalToConstant: width).isActive = true
}
}
OBJC category
@implementation UIView (Constraints)
-(void)addConstaintsToSuperviewWithLeadingOffset:(CGFloat)leadingOffset topOffset:(CGFloat)topOffset
{
if (self.superview == nil) {
return;
}
self.translatesAutoresizingMaskIntoConstraints = false;
[[self.leadingAnchor constraintEqualToAnchor:self.superview.leadingAnchor
constant:leadingOffset] setActive:true];
[[self.topAnchor constraintEqualToAnchor:self.superview.topAnchor
constant:topOffset] setActive:true];
}
-(void)addConstaintsWithHeight:(CGFloat)height width:(CGFloat)width
{
[[self.heightAnchor constraintEqualToConstant:height] setActive:true];
[[self.widthAnchor constraintEqualToConstant:width] setActive:true];
}
@end
Solution 4 - Ios
You can use autolayout constraints programmatically like below
fileprivate func setupName(){
let height = CGFloat(50)
lblName.text = "Hello world"
lblName.backgroundColor = .lightGray
//Step 1
lblName.translatesAutoresizingMaskIntoConstraints = false
//Step 2
self.view.addSubview(lblName)
//Step 3
NSLayoutConstraint.activate([
lblName.leadingAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.leadingAnchor),
lblName.trailingAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.trailingAnchor),
lblName.topAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.bottomAnchor,constant: -height),
lblName.bottomAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.bottomAnchor),
])
}
Solution 5 - Ios
Extending @Alex Shubin solution in Swift 4, I do the following:
Sometimes, I need to add a variable number of constraints, in this case 3, because the height will be calculated latter.
keyboard.addConstaints(top: nil, right: 0.0, bottom: 0.0, left: 0.0, width: nil, height: nil)
You have to be careful adding all required, and making sure you don't have any conflicting constraints.
extension UIView {
func addConstaints(top: CGFloat?, right: CGFloat?, bottom: CGFloat?, left: CGFloat?, width: CGFloat?, height: CGFloat?) {
translatesAutoresizingMaskIntoConstraints = false
if top != nil { self.addConstaint(top: top!) }
if right != nil { self.addConstaint(right: right!) }
// Add lines for bottom, left, width an heigh
// ...
}
func addConstaint(top offset: CGFloat) {
guard superview != nil else { return }
topAnchor.constraint(equalTo: superview!.topAnchor, constant: offset).isActive = true
}
}
To verify that all views were laid-out correctly, you can inspect the .constraints property of the superView or you can check the frame in:
override func viewDidLayoutSubviews() {
print(keyboard.frame)
}