I am trying to add a gray uiview overlay using autolayouts so that when you rotate the device it automatically still covers the entire screen. How would this be done programatically?
It is easy, you need 4 constraints to do that - top, bottom, left and right:
NSLayoutConstraint *topConstraint = [NSLayoutConstraint constraintWithItem:view attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:superview attribute:NSLayoutAttributeTop multiplier:1.0f constant:0.0f];
NSLayoutConstraint *bottomConstraint = [NSLayoutConstraint constraintWithItem:view attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:superview attribute:NSLayoutAttributeBottom multiplier:1.0f constant:0.0f];
NSLayoutConstraint *leftConstraint = [NSLayoutConstraint constraintWithItem:view attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:superview attribute:NSLayoutAttributeLeft multiplier:1.0f constant:0.0f];
NSLayoutConstraint *rightConstraint = [NSLayoutConstraint constraintWithItem:view attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:superview attribute:NSLayoutAttributeRight multiplier:1.0f constant:0.0f];
Try this:
UIView *greyView = [UIView new];
[self.view addSubview:greyView];
greyView.translatesAutoresizingMaskIntoConstraints = NO;
NSDictionary *viewDictionary = #{#“greyView”:greyView};
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:#"V:|-0-[myView]-0-|“ options:0 metrics:nil views:viewDictionary]];
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:#“H:|-0-[myView0]-0-|” options:0 metrics:nil views:viewDictionary]];
Related
I need design custom cell like below with nslayoutconstraints by programtaically with visual format lanuguage as well as constraintswithitem.Any help will be appreciate one.
` /* Intialize and assign Product Name */
productName=[[UILabel alloc]init];
productName.font=[UIFont fontWithName:#"HelveticaNeue" size:17.0f];
self.productName.lineBreakMode = NSLineBreakByWordWrapping;
self.productName.numberOfLines = 0;
productName.translatesAutoresizingMaskIntoConstraints=NO;
[self.contentView addSubview:productName];
/* Intialize and assign Product Option */
productOption=[[UILabel alloc]init];
productOption.translatesAutoresizingMaskIntoConstraints=NO;
productOption.font=[UIFont fontWithName:#"HelveticaNeue" size:13.0f];
productOption.textColor=[UIColor colorWithRed:128/255.0f green:128/255.0f blue:128/255.0f alpha:1.0f]; /* 808080 */
[self.contentView addSubview:productOption];
/* Intialize and assign Product Image */
productImageView=[[UIImageView alloc]init];
productImageView.translatesAutoresizingMaskIntoConstraints=NO;
productImageView.clipsToBounds=YES;
productImageView.contentMode=UIViewContentModeScaleAspectFill;
productImageView.layer.cornerRadius = 22.5;
productImageView.layer.masksToBounds = YES;
productImageView.layer.borderColor =[UIColor whiteColor].CGColor;
productImageView.layer.borderWidth = 1;
[self.contentView addSubview:productImageView];
/* Intialize and assign List icon Image */
listIconImage=[[UIImageView alloc]init];
listIconImage.translatesAutoresizingMaskIntoConstraints=NO;
listIconImage.image=[UIImage imageNamed:#"right-arrow.png"];
[self.contentView addSubview:listIconImage];
[self.contentView addConstraint:[NSLayoutConstraint constraintWithItem:self.productImageView
attribute:NSLayoutAttributeTop
relatedBy:NSLayoutRelationEqual
toItem:self.contentView
attribute:NSLayoutAttributeTop
multiplier:1.0
constant:7]];
[self.contentView addConstraint:[NSLayoutConstraint constraintWithItem:productImageView
attribute:NSLayoutAttributeLeft
relatedBy:NSLayoutRelationEqual
toItem:self.contentView
attribute:NSLayoutAttributeLeft
multiplier:1
constant:11.5]];
[self.contentView addConstraint:[NSLayoutConstraint constraintWithItem:self.productImageView
attribute:NSLayoutAttributeWidth
relatedBy:NSLayoutRelationEqual
toItem:nil
attribute:NSLayoutAttributeWidth
multiplier:1.0
constant:45]];
[self.contentView addConstraint:[NSLayoutConstraint constraintWithItem:self.productImageView
attribute:NSLayoutAttributeHeight
relatedBy:NSLayoutRelationEqual
toItem:nil
attribute:NSLayoutAttributeHeight
multiplier:1.0
constant:45]];
[self.contentView addConstraint:[NSLayoutConstraint constraintWithItem:self.productName
attribute:NSLayoutAttributeLeading
relatedBy:NSLayoutRelationEqual
toItem:self.productImageView
attribute:NSLayoutAttributeTrailing
multiplier:1.0
constant:10]];
[self.contentView addConstraint:[NSLayoutConstraint constraintWithItem:self.productName
attribute:NSLayoutAttributeTop
relatedBy:NSLayoutRelationEqual
toItem:self.contentView
attribute:NSLayoutAttributeTop
multiplier:1.0
constant:5]];
[self.contentView addConstraint:[NSLayoutConstraint constraintWithItem:self.productOption
attribute:NSLayoutAttributeLeading
relatedBy:NSLayoutRelationEqual
toItem:self.productImageView
attribute:NSLayoutAttributeTrailing
multiplier:1.0
constant:10]];
[self.contentView addConstraint:[NSLayoutConstraint constraintWithItem:self.productOption
attribute:NSLayoutAttributeTop
relatedBy:NSLayoutRelationEqual
toItem:self.productName
attribute:NSLayoutAttributeBottom
multiplier:1.0
constant:5]];
[self.contentView addConstraint:[NSLayoutConstraint constraintWithItem:self.listIconImage
attribute:NSLayoutAttributeRight
relatedBy:NSLayoutRelationEqual
toItem:self.contentView
attribute:NSLayoutAttributeRight
multiplier:1.0
constant:-15.0f]];
[self.contentView addConstraint:[NSLayoutConstraint constraintWithItem:self.listIconImage
attribute:NSLayoutAttributeHeight
relatedBy:NSLayoutRelationEqual
toItem:nil
attribute:NSLayoutAttributeHeight
multiplier:1.0
constant:20.0f]];
[self.contentView addConstraint:[NSLayoutConstraint constraintWithItem:self.listIconImage
attribute:NSLayoutAttributeWidth
relatedBy:NSLayoutRelationEqual
toItem:nil
attribute:NSLayoutAttributeWidth
multiplier:1.0
constant:11.0f]];
[self.contentView addConstraint:[NSLayoutConstraint constraintWithItem:self.listIconImage
attribute:NSLayoutAttributeCenterY
relatedBy:NSLayoutRelationEqual
toItem:self.contentView
attribute:NSLayoutAttributeCenterY
multiplier:1.0
constant:0]]; `
The above is the code i have used to create this Design.Now i am struggling for how to get dynamic height in tableviewcontroller.It is always returning 0 when i am getting in heightForRowAtIndexPath.
Thanks & Regards
Sam.P
You should set tableView.rowHeight = UITableViewAutomaticDimension and also provide tableView.estimatedRowHeight = 68.0f (estimated height, doesn't have to be exact);
More info in following link:
SO Link
I'm creating a scrollView and adding a contentView to it using autolayout. The contentView's height I thought would be determined by the height and constraints of its contents. Since it has a label, shouldn't the contentView's height equal the label height? Only way height exists (in blue in the snapshot) is if adding a height constraint to the contentView. I thought this would be unnecessary since autolayout should know the heights of labels from their intrinsic content size?
.
// Scrollview
_scrollView = [UIScrollView new];
_scrollView.translatesAutoresizingMaskIntoConstraints = NO;
_scrollView.backgroundColor = [UIColor yellowColor];
_scrollView.bounces = YES;
[self.view addSubview:_scrollView];
NSArray *horizontalConstraints = [NSLayoutConstraint constraintsWithVisualFormat:#"H:|[_scrollView]|" options:0 metrics:0 views:#{ #"_scrollView" : _scrollView }];
NSArray *verticalConstraints = [NSLayoutConstraint constraintsWithVisualFormat:#"V:|[_scrollView]|" options:0 metrics:0 views:#{ #"_scrollView" : _scrollView }];
[self.view addConstraints:horizontalConstraints];
[self.view addConstraints:verticalConstraints];
// Content view
_contentView = [UIView new];
_contentView.translatesAutoresizingMaskIntoConstraints = NO;
_contentView.backgroundColor = [UIColor blueColor];
[_scrollView addSubview:_contentView];
NSArray *horizontalContentConstraints = [NSLayoutConstraint constraintsWithVisualFormat:#"H:|[_contentView]|" options:0 metrics:0 views:#{ #"_contentView" : _contentView }];
NSArray *verticalContentConstraints = [NSLayoutConstraint constraintsWithVisualFormat:#"V:|[_contentView]|" options:0 metrics:0 views:#{ #"_contentView" : _contentView }];
[_scrollView addConstraints:horizontalContentConstraints];
[_scrollView addConstraints:verticalContentConstraints];
// Why does height of content view need to be added to get the blue area to show?
NSLayoutConstraint *contentViewHeight = [NSLayoutConstraint constraintWithItem:_contentView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:NSLayoutAttributeNotAnAttribute attribute:NSLayoutAttributeHeight multiplier:1 constant:5];
[_contentView addConstraint:contentViewHeight];
NSLayoutConstraint *contentViewOuterLeading = [NSLayoutConstraint constraintWithItem:_contentView attribute:NSLayoutAttributeLeading relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeading multiplier:1 constant:0];
NSLayoutConstraint *contentViewOuterTrailing = [NSLayoutConstraint constraintWithItem:_contentView attribute:NSLayoutAttributeTrailing relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTrailing multiplier:1 constant:0];
[self.view addConstraints:#[ contentViewOuterLeading, contentViewOuterTrailing ]];
// Day label
_dayLabel = [UILabel new];
_dayLabel.translatesAutoresizingMaskIntoConstraints = NO;
_dayLabel.text = #"Monday";
_dayLabel.backgroundColor = [UIColor greenColor];
[_contentView addSubview:_dayLabel];
NSLayoutConstraint *dayLabelTop = [NSLayoutConstraint constraintWithItem:_dayLabel attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:_contentView attribute:NSLayoutAttributeTop multiplier:1 constant:0];
NSLayoutConstraint *dayLabelCenterX = [NSLayoutConstraint constraintWithItem:_dayLabel attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:_contentView attribute:NSLayoutAttributeCenterX multiplier:1 constant:0];
[_contentView addConstraints: #[ dayLabelTop, dayLabelCenterX ]];
It's because a UIScrollView has a content size of (0,0).
You can say it's bounds should be flush with the superview, but that's not actually changing its contentSize. Additionally, you add the contentView, but again you're saying it should be flush with its superview (the scrollview) though since the scroll view's size is still (0,0), you're implicitly saying that the content's view size will be 0,0. It's only after you add a constraint that specifically says 5px do you actually see a bit of the view.
A scroll view will get it's appropriate size from it's contents, so if you instantiated the content view as:
UIView * contentView = [[UIView alloc] initWithFrame:[UIScreen mainscreen].bounds];
The scroll view's content size would be equal to [UIScreen mainscreen].bounds and you would still be satisfying the layout constraints you write.
As you add UI elements to uiscrollview, and arrange them via layout constraints, the scrollview will automatically expand as needed.
I wrote a blog post exactly on this subject, Programmatic ScrollViews w/ NSLayout ... you may have too look at an older commit to it, but I ran into this exact same issue.
Ok figured it out. Adding a constraint from contentView to the bottom of its label made it work. No height constraint is needed for the contentView. Here's the updated code:
// Scrollview
_scrollView = [UIScrollView new];
_scrollView.translatesAutoresizingMaskIntoConstraints = NO;
_scrollView.backgroundColor = [UIColor yellowColor];
_scrollView.alwaysBounceVertical = YES;
[self.view addSubview:_scrollView];
NSArray *horizontalConstraints = [NSLayoutConstraint constraintsWithVisualFormat:#"H:|[_scrollView]|" options:0 metrics:0 views:#{ #"_scrollView" : _scrollView }];
NSArray *verticalConstraints = [NSLayoutConstraint constraintsWithVisualFormat:#"V:|[_scrollView]|" options:0 metrics:0 views:#{ #"_scrollView" : _scrollView }];
[self.view addConstraints:horizontalConstraints];
[self.view addConstraints:verticalConstraints];
// Content view
_contentView = [UIView new];
_contentView.translatesAutoresizingMaskIntoConstraints = NO;
_contentView.backgroundColor = [UIColor blueColor];
[_scrollView addSubview:_contentView];
NSArray *horizontalContentConstraints = [NSLayoutConstraint constraintsWithVisualFormat:#"H:|[_contentView]|" options:0 metrics:0 views:#{ #"_contentView" : _contentView }];
NSArray *verticalContentConstraints = [NSLayoutConstraint constraintsWithVisualFormat:#"V:|[_contentView]|" options:0 metrics:0 views:#{ #"_contentView" : _contentView }];
[_scrollView addConstraints:horizontalContentConstraints];
[_scrollView addConstraints:verticalContentConstraints];
NSLayoutConstraint *contentViewOuterLeading = [NSLayoutConstraint constraintWithItem:_contentView attribute:NSLayoutAttributeLeading relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeading multiplier:1 constant:0];
NSLayoutConstraint *contentViewOuterTrailing = [NSLayoutConstraint constraintWithItem:_contentView attribute:NSLayoutAttributeTrailing relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTrailing multiplier:1 constant:0];
[self.view addConstraints:#[ contentViewOuterLeading, contentViewOuterTrailing ]];
// Day label
_dayLabel = [UILabel new];
_dayLabel.translatesAutoresizingMaskIntoConstraints = NO;
_dayLabel.text = #"Monday";
_dayLabel.backgroundColor = [UIColor greenColor];
[_contentView addSubview:_dayLabel];
NSLayoutConstraint *dayLabelTop = [NSLayoutConstraint constraintWithItem:_dayLabel attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:_contentView attribute:NSLayoutAttributeTop multiplier:1 constant:0];
NSLayoutConstraint *dayLabelCenterX = [NSLayoutConstraint constraintWithItem:_dayLabel attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:_contentView attribute:NSLayoutAttributeCenterX multiplier:1 constant:0];
NSLayoutConstraint *dayLabelBottom = [NSLayoutConstraint constraintWithItem:_dayLabel attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:_contentView attribute:NSLayoutAttributeBottom multiplier:1 constant:0];
[_contentView addConstraints: #[ dayLabelTop, dayLabelCenterX, dayLabelBottom ]];
I want an imageview to appear centre at the bottom,i added the imageview to another imageview in the view controller.the result is imageview is appearing at the bottom but not exactly at centre, can any one suggest what is wrong in my code?
-(void)viewWillAppear:(BOOL)animated
{
UIImageView *imgView=[[UIImageView alloc]init];
[imgView setTranslatesAutoresizingMaskIntoConstraints:NO];
UIImageView *mspimgvw=[[UIImageView alloc]init];
[mspimgvw setTranslatesAutoresizingMaskIntoConstraints:NO];
mspimgvw.image=[UIImage imageNamed:#"msplogo.jpg"];
[self.imgView addSubview:mspimgvw];
[self.view addSubview:imgView];
CGFloat bottom=0;
[imgView addConstraint:[NSLayoutConstraint constraintWithItem:mspimgvw attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:imgView attribute:NSLayoutAttributeBottom multiplier:1 constant:bottom-40]];
[imgView addConstraint:[NSLayoutConstraint constraintWithItem:mspimgvw attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:imgView attribute:NSLayoutAttributeCenterX multiplier:1.0 constant:bottom-40]];
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:#"H:|[imgView]|" options:0 metrics: 0 views:dicViews]];
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:#"V:|[imgView]|" options:0 metrics: 0 views:dicViews]];
}
I want image to appear to the centre of the view controller.What to change in my code?
Here you go:
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:imageView
attribute:NSLayoutAttributeCenterX
relatedBy:NSLayoutRelationEqual
toItem:self.view
attribute:NSLayoutAttributeCenterX
multiplier:1.f
constant:0.f]];
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:imageView
attribute:NSLayoutAttributeBottom
relatedBy:NSLayoutRelationEqual
toItem:self.view
attribute:NSLayoutAttributeBottom
multiplier:1.f
constant:0.f]];
I was trying to add a subview to tableview using autolayout, but I get this Assertion failure when I do so.
" * Terminating app due to uncaught exception 'NSInternalInconsistencyException', reason: 'Auto Layout still required after executing -layoutSubviews. UITableView's implementation of -layoutSubviews needs to call super.'"
My code
UIView *view = [[UIView alloc] init];
[view setBackgroundColor:[UIColor redColor]];
[parentView addSubview:view];
[view setTranslatesAutoresizingMaskIntoConstraints:NO];
NSLayoutConstraint *c1 = [NSLayoutConstraint constraintWithItem:view attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:parentView attribute:NSLayoutAttributeLeft multiplier:1.0 constant:0.0];
NSLayoutConstraint *c2 = [NSLayoutConstraint constraintWithItem:view attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:parentView attribute:NSLayoutAttributeLeft multiplier:0.0 constant:10.0];
NSLayoutConstraint *c3 = [NSLayoutConstraint constraintWithItem:view attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:parentView attribute:NSLayoutAttributeWidth multiplier:1.0 constant:0.0];
NSLayoutConstraint *c4 = [NSLayoutConstraint constraintWithItem:view attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:parentView attribute:NSLayoutAttributeTop multiplier:1.0 constant:50.0];
[parentView addConstraint:c1];
[parentView addConstraint:c3];
[parentView addConstraint:c2];
[parentView addConstraint:c1];
but if I set frame to the view without any autolayout constraint, it works fine.
I couldn't figure out what I am missing.
Does anyone could help me to transform this code into visual-format auto-layout?
I've tried several ways but I can't do this...
Thank you!
// Constraints
horizontal = [NSLayoutConstraint constraintWithItem:loginView.view
attribute:NSLayoutAttributeWidth
relatedBy:NSLayoutRelationEqual
toItem:nil
attribute:NSLayoutAttributeNotAnAttribute
multiplier:1.0
constant:CGRectGetWidth(loginView.view.frame)];
vertical = [NSLayoutConstraint constraintWithItem:loginView.view
attribute:NSLayoutAttributeHeight
relatedBy:NSLayoutRelationEqual
toItem:nil
attribute:NSLayoutAttributeNotAnAttribute
multiplier:1.0
constant:CGRectGetHeight(loginView.view.frame)];
centerX = [NSLayoutConstraint constraintWithItem:loginView.view
attribute:NSLayoutAttributeCenterX
relatedBy:NSLayoutRelationEqual
toItem:self.view
attribute:NSLayoutAttributeCenterX
multiplier:1.0
constant:0.0];
centerY = [NSLayoutConstraint constraintWithItem:loginView.view
attribute:NSLayoutAttributeCenterY
relatedBy:NSLayoutRelationEqual
toItem:self.view
attribute:NSLayoutAttributeCenterY
multiplier:1.0
constant:0.0];
[self.view addConstraints:#[horizontal, vertical, centerX, centerY]];
Finally!
// Variables
NSDictionary *views = #{
#"view" : self.view,
#"superview" : self.view.superview,
};
NSDictionary *metrics = #{
#"width" : #(CGRectGetWidth(self.view.frame)),
#"height" : #(CGRectGetHeight(self.view.frame))
};
// Constraints
NSArray *constraints = [NSLayoutConstraint constraintsWithVisualFormat:#"H:[superview]-(<=1)-[view(width)]"
options:NSLayoutFormatAlignAllCenterY
metrics:metrics
views:views];
[self.view.superview addConstraints:constraints];
constraints = [NSLayoutConstraint constraintsWithVisualFormat:#"V:[superview]-(<=1)-[view(height)]"
options:NSLayoutFormatAlignAllCenterX
metrics:metrics
views:views];
[self.view.superview addConstraints:constraints];