I'm trying to make with auto layout a little notification box with two labels, a progress bar, and an X to cancel. I have the labels set up the same with font scaling, but it looks like some of the labels are getting cut off. I'm not sure if it's a result of my auto layout code or my UILabel code.
You can see that the text isn't aligned at all and the Playing in label is cut off completely.
Relevant code:
// Container
pttProgressContainer = [UIView new];
[pttProgressContainer setBackgroundColor:UIColorFromRGBWithAlpha(0x3a4362, 0.10)];
[pttProgressContainer setTranslatesAutoresizingMaskIntoConstraints:NO];
[pttContainer addSubview:pttProgressContainer];
// Separator
UIView *progressContainer1pxView = [UIView new];
[progressContainer1pxView setBackgroundColor:[UIColor whiteColor]];
[progressContainer1pxView setTranslatesAutoresizingMaskIntoConstraints:NO];
[pttProgressContainer addSubview:progressContainer1pxView];
// Progress viewzlers
UIView *progressViewLeft = [UIView new];
[progressViewLeft setTranslatesAutoresizingMaskIntoConstraints:NO];
[pttProgressContainer addSubview:progressViewLeft];
UIView *progressViewRight = [UIView new];
[progressViewRight setTranslatesAutoresizingMaskIntoConstraints:NO];
[pttProgressContainer addSubview:progressViewRight];
// Progress view
pttProgressView = [[UIProgressView alloc] initWithProgressViewStyle:UIProgressViewStyleDefault];
[pttProgressView setTranslatesAutoresizingMaskIntoConstraints:NO];
[pttProgressView setProgress:0.5 animated:NO];
[pttProgressView setTrackTintColor:[UIColor colorWithRed:1.0 green:1.0 blue:1.0 alpha:0.20]];
[pttProgressView setProgressTintColor:UIColorFromRGB(0xd7d7d7)];
[[pttProgressView layer] setCornerRadius:5];
[[pttProgressView layer] setMasksToBounds:YES];
[pttProgressView setClipsToBounds:YES];
[progressViewLeft addSubview:pttProgressView];
// Now the playing in label countdown
UILabel *pttPlayingInLabel = [UILabel new];
[pttPlayingInLabel setFont:[UIFont systemFontOfSize:20]];
[pttPlayingInLabel setAdjustsFontSizeToFitWidth:YES];
[pttPlayingInLabel setMinimumScaleFactor:8/20];
[pttPlayingInLabel setTextAlignment:NSTextAlignmentLeft];
[pttPlayingInLabel setTextColor:[UIColor whiteColor]];
[pttPlayingInLabel setContentMode:UIViewContentModeCenter];
[pttPlayingInLabel setTranslatesAutoresizingMaskIntoConstraints:NO];
[pttPlayingInLabel setText:#"Playing In..."];
[progressViewLeft addSubview:pttPlayingInLabel];
// Countdown numbers
pttPlayingCountdownLabel = [UILabel new];
[pttPlayingCountdownLabel setFont:[UIFont systemFontOfSize:20]];
[pttPlayingCountdownLabel setMinimumScaleFactor:8/20];
[pttPlayingCountdownLabel setAdjustsFontSizeToFitWidth:YES];
[pttPlayingCountdownLabel setTextAlignment:NSTextAlignmentRight];
[pttPlayingCountdownLabel setContentMode:UIViewContentModeCenter];
[pttPlayingCountdownLabel setTranslatesAutoresizingMaskIntoConstraints:NO];
[pttPlayingCountdownLabel setTextColor:[UIColor whiteColor]];
[pttPlayingCountdownLabel setText:#"5"];
[progressViewLeft addSubview:pttPlayingCountdownLabel];
// The button del cancel
pttCancelPlayingButton = [UIButton buttonWithType:UIButtonTypeCustom];
[pttCancelPlayingButton setTranslatesAutoresizingMaskIntoConstraints:NO];
[pttCancelPlayingButton setBackgroundImage:[UIImage imageNamed:#"ptt-button-delay-cancel.png"] forState:UIControlStateNormal];
// [pttCancelPlayingButton setBackgroundColor:[UIColor brownColor]];
// [pttCancelPlayingButton setTitle:#"C" forState:UIControlStateNormal];
[progressViewRight addSubview:pttCancelPlayingButton];
// Progress danker
[pttProgressContainer addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:#"V:|[progressContainer1pxView(==1)]-[progressViewLeft]-|"
options:0
metrics:metrics
views:views]];
/*
[pttProgressContainer addConstraint:[NSLayoutConstraint constraintWithItem:progressViewRight
attribute:NSLayoutAttributeCenterY
relatedBy:NSLayoutRelationEqual
toItem:progressViewLeft
attribute:NSLayoutAttributeCenterY
multiplier:1.0
constant:0]];
[pttProgressContainer addConstraint:[NSLayoutConstraint constraintWithItem:progressViewRight
attribute:NSLayoutAttributeHeight
relatedBy:NSLayoutRelationEqual
toItem:progressViewLeft
attribute:NSLayoutAttributeHeight
multiplier:1.0
constant:0]];
*/
// Visual horizontal
[pttProgressContainer addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:#"|[progressContainer1pxView]|"
options:NSLayoutFormatAlignAllTop | NSLayoutFormatAlignAllBottom
metrics:metrics
views:views]];
[pttProgressContainer addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:#"|-[progressViewLeft]-[progressViewRight(==40)]-|"
options:NSLayoutFormatAlignAllBottom | NSLayoutFormatAlignAllTop
metrics:metrics
views:views]];
// Inner danker
[progressViewLeft addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:#"V:|-[pttPlayingInLabel]-[pttProgressView(==3)]-|"
options:NSLayoutFormatAlignAllLeading
metrics:metrics
views:views]];
/*
[progressViewLeft addConstraint:[NSLayoutConstraint constraintWithItem:pttPlayingCountdownLabel
attribute:NSLayoutAttributeCenterY
relatedBy:NSLayoutRelationEqual
toItem:pttPlayingInLabel
attribute:NSLayoutAttributeCenterY
multiplier:1.0
constant:0]];
[progressViewLeft addConstraint:[NSLayoutConstraint constraintWithItem:pttPlayingCountdownLabel
attribute:NSLayoutAttributeHeight
relatedBy:NSLayoutRelationEqual
toItem:pttPlayingInLabel
attribute:NSLayoutAttributeHeight
multiplier:1.0
constant:0]];
*/
// Visual horizontal
[progressViewLeft addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:#"|-[pttPlayingInLabel]-[pttPlayingCountdownLabel(==20)]-|"
options:NSLayoutFormatAlignAllBaseline
metrics:metrics
views:views]];
[progressViewLeft addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:#"|-[pttProgressView]-|"
options:0
metrics:metrics
views:views]];
// Now for the inner danker right
[progressViewRight addConstraint:[NSLayoutConstraint constraintWithItem:pttCancelPlayingButton
attribute:NSLayoutAttributeHeight
relatedBy:NSLayoutRelationEqual
toItem:nil
attribute:NSLayoutAttributeNotAnAttribute
multiplier:1
constant:21.0]];
[progressViewRight addConstraint:[NSLayoutConstraint constraintWithItem:pttCancelPlayingButton
attribute:NSLayoutAttributeWidth
relatedBy:NSLayoutRelationEqual
toItem:nil
attribute:NSLayoutAttributeNotAnAttribute
multiplier:1
constant:21.0]];
[progressViewRight addConstraint:[NSLayoutConstraint constraintWithItem:pttCancelPlayingButton
attribute:NSLayoutAttributeCenterX
relatedBy:NSLayoutRelationEqual
toItem:progressViewRight
attribute:NSLayoutAttributeCenterX
multiplier:1
constant:0]];
[progressViewRight addConstraint:[NSLayoutConstraint constraintWithItem:pttCancelPlayingButton
attribute:NSLayoutAttributeCenterY
relatedBy:NSLayoutRelationEqual
toItem:progressViewRight
attribute:NSLayoutAttributeCenterY
multiplier:1
constant:0]];
Related
I have written the following code to achieve
Horizontally spaced equal width fixed height equal horizontal spaced three button but somehow it's not working fine. Can anyone rectify this ?
UIButton *cancelBtn = [UIButton new];
cancelBtn.frame = CGRectMake(10, 5, (popupView.bounds.size.width-40)/3, 30);
[cancelBtn setTitle:#"Cancel" forState:UIControlStateNormal];
[cancelBtn setTitleColor:[UIColor redColor] forState:UIControlStateNormal];
[cancelBtn setBackgroundColor:[UIColor lightGrayColor]];
[popupView addSubview:cancelBtn];
UIButton *resetBtn = [UIButton new];
resetBtn.frame = CGRectMake(cancelBtn.frame.origin.x+cancelBtn.bounds.size.width+10, 5, (popupView.bounds.size.width-40)/3, 30);
[resetBtn setTitle:#"Reset" forState:UIControlStateNormal];
[resetBtn setTitleColor:[UIColor yellowColor] forState:UIControlStateNormal];
[resetBtn setBackgroundColor:[UIColor darkGrayColor]];
[popupView addSubview:resetBtn];
UIButton *doneBtn = [UIButton new];
doneBtn.frame = CGRectMake(popupView.bounds.size.width-10-((popupView.bounds.size.width-40)/3), 5, (popupView.bounds.size.width-40)/3, 30);
[doneBtn setTitle:#"Done" forState:UIControlStateNormal];
[doneBtn setTitleColor:[UIColor greenColor] forState:UIControlStateNormal];
[doneBtn setBackgroundColor:[UIColor blackColor]];
[popupView addSubview:doneBtn];
cancelBtn.translatesAutoresizingMaskIntoConstraints = NO;
[cancelBtn addConstraint:[NSLayoutConstraint constraintWithItem:cancelBtn attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:0 multiplier:1 constant:30]];
[popupView addConstraint:[NSLayoutConstraint constraintWithItem:cancelBtn attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:popupView attribute:NSLayoutAttributeTop multiplier:1.0f constant:5.0f] ];
[popupView addConstraint:[NSLayoutConstraint constraintWithItem:cancelBtn attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:popupView attribute:NSLayoutAttributeLeft multiplier:1.0f constant:10.0f]];
resetBtn.translatesAutoresizingMaskIntoConstraints = NO;
[resetBtn addConstraint:[NSLayoutConstraint constraintWithItem:resetBtn attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:0 multiplier:1 constant:30]];
[popupView addConstraint:[NSLayoutConstraint constraintWithItem:resetBtn attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:popupView attribute:NSLayoutAttributeTop multiplier:1.0f constant:5.0f] ];
[popupView addConstraint:[NSLayoutConstraint constraintWithItem:cancelBtn attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:resetBtn attribute:NSLayoutAttributeLeft multiplier:1.0f constant:10.0f]];
[popupView addConstraint:[NSLayoutConstraint constraintWithItem:doneBtn attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:resetBtn attribute:NSLayoutAttributeRight multiplier:1.0f constant:-10.0f]];
doneBtn.translatesAutoresizingMaskIntoConstraints = NO;
[doneBtn addConstraint:[NSLayoutConstraint constraintWithItem:doneBtn attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:0 multiplier:1 constant:30]];
[popupView addConstraint:[NSLayoutConstraint constraintWithItem:doneBtn attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:popupView attribute:NSLayoutAttributeTop multiplier:1.0f constant:5.0f] ];
[popupView addConstraint:[NSLayoutConstraint constraintWithItem:doneBtn attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:popupView attribute:NSLayoutAttributeRight multiplier:1.0f constant:-10.0f]];
[popupView addConstraint:[NSLayoutConstraint constraintWithItem:cancelBtn attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:resetBtn attribute:NSLayoutAttributeWidth multiplier:1 constant:0]];
[popupView addConstraint:[NSLayoutConstraint constraintWithItem:resetBtn attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:doneBtn attribute:NSLayoutAttributeWidth multiplier:1 constant:0]];
How to fix this ?
I want to achieve a popup like this.
enter image description here
use stackView instead of UIView there are lots of flexibility.
You don't have to think about child view's autolayout inside stackView.
Stack View has a bunch of features to satisfy your needs
Code:
-(void)createStackViewWithButton {
UIButton *doneBtn = [UIButton new];
[doneBtn setTitle:#"Done" forState:UIControlStateNormal];
[doneBtn setTitleColor:[UIColor greenColor] forState:UIControlStateNormal];
[doneBtn setBackgroundColor:[UIColor blackColor]];
[doneBtn.heightAnchor constraintEqualToConstant:40].active = true;
[doneBtn.widthAnchor constraintEqualToConstant:100].active = true;
UIButton *doneBtn2 = [UIButton new];
[doneBtn2 setTitle:#"Cancel" forState:UIControlStateNormal];
[doneBtn2 setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
[doneBtn2 setBackgroundColor:[UIColor greenColor]];
[doneBtn2.heightAnchor constraintEqualToConstant:40].active = true;
[doneBtn2.widthAnchor constraintEqualToConstant:100].active = true;
UIButton *doneBtn3 = [UIButton new];
[doneBtn3 setTitle:#"Edit" forState:UIControlStateNormal];
[doneBtn3 setTitleColor:[UIColor greenColor] forState:UIControlStateNormal];
[doneBtn3 setBackgroundColor:[UIColor blueColor]];
[doneBtn3.heightAnchor constraintEqualToConstant:40].active = true;
[doneBtn3.widthAnchor constraintEqualToConstant:100].active = true;
UIStackView *stackView = [[UIStackView alloc] init];
stackView.axis = UILayoutConstraintAxisHorizontal;
stackView.distribution = UIStackViewDistributionEqualSpacing;
stackView.alignment = UIStackViewAlignmentCenter;
stackView.spacing = 0;
[stackView addArrangedSubview:doneBtn];
[stackView addArrangedSubview:doneBtn2];
[stackView addArrangedSubview:doneBtn3];
stackView.translatesAutoresizingMaskIntoConstraints = false;
[self.view addSubview:stackView];
//Layout for Stack View
[stackView.centerXAnchor constraintEqualToAnchor:self.view.centerXAnchor].active = true;
[stackView.centerYAnchor constraintEqualToAnchor:self.view.centerYAnchor].active = true;
}
output:
Image 1
Image 2
They are appearing one over another.
SOLVED ! Fixed it.
UIButton *cancelBtn = [UIButton new];
cancelBtn.frame = CGRectMake(10, 5, (popupView.bounds.size.width-40)/3, 30);
[cancelBtn setTitle:#"Cancel" forState:UIControlStateNormal];
[cancelBtn setTitleColor:[UIColor redColor] forState:UIControlStateNormal];
[cancelBtn setBackgroundColor:[UIColor lightGrayColor]];
[popupView addSubview:cancelBtn];
UIButton *resetBtn = [UIButton new];
resetBtn.frame = CGRectMake(cancelBtn.frame.origin.x+cancelBtn.bounds.size.width+10, 5, (popupView.bounds.size.width-40)/3, 30);
[resetBtn setTitle:#"Reset" forState:UIControlStateNormal];
[resetBtn setTitleColor:[UIColor yellowColor] forState:UIControlStateNormal];
[resetBtn setBackgroundColor:[UIColor darkGrayColor]];
[popupView addSubview:resetBtn];
UIButton *doneBtn = [UIButton new];
doneBtn.frame = CGRectMake(resetBtn.frame.origin.x+resetBtn.bounds.size.width+10, 5, (popupView.bounds.size.width-40)/3, 30);
[doneBtn setTitle:#"Done" forState:UIControlStateNormal];
[doneBtn setTitleColor:[UIColor greenColor] forState:UIControlStateNormal];
[doneBtn setBackgroundColor:[UIColor blackColor]];
[popupView addSubview:doneBtn];
cancelBtn.translatesAutoresizingMaskIntoConstraints = NO;
[cancelBtn addConstraint:[NSLayoutConstraint constraintWithItem:cancelBtn attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:0 multiplier:1 constant:30]];
[popupView addConstraint:[NSLayoutConstraint constraintWithItem:cancelBtn attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:popupView attribute:NSLayoutAttributeTop multiplier:1.0f constant:5.0f] ];
[popupView addConstraint:[NSLayoutConstraint constraintWithItem:cancelBtn attribute:NSLayoutAttributeLeading relatedBy:NSLayoutRelationEqual toItem:popupView attribute:NSLayoutAttributeLeading multiplier:1.0f constant:10.0f]];
resetBtn.translatesAutoresizingMaskIntoConstraints = NO;
[resetBtn addConstraint:[NSLayoutConstraint constraintWithItem:resetBtn attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:0 multiplier:1 constant:30]];
[popupView addConstraint:[NSLayoutConstraint constraintWithItem:resetBtn attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:popupView attribute:NSLayoutAttributeTop multiplier:1.0f constant:5.0f] ];
[popupView addConstraint:[NSLayoutConstraint constraintWithItem:resetBtn attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:cancelBtn attribute:NSLayoutAttributeRight multiplier:1.0f constant:10.0f]];
[popupView addConstraint:[NSLayoutConstraint constraintWithItem:resetBtn attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:doneBtn attribute:NSLayoutAttributeLeft multiplier:1.0f constant:-10.0f]];
doneBtn.translatesAutoresizingMaskIntoConstraints = NO;
[doneBtn addConstraint:[NSLayoutConstraint constraintWithItem:doneBtn attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:0 multiplier:1 constant:30]];
[popupView addConstraint:[NSLayoutConstraint constraintWithItem:doneBtn attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:popupView attribute:NSLayoutAttributeTop multiplier:1.0f constant:5.0f] ];
[popupView addConstraint:[NSLayoutConstraint constraintWithItem:doneBtn attribute:NSLayoutAttributeTrailing relatedBy:NSLayoutRelationEqual toItem:popupView attribute:NSLayoutAttributeTrailing multiplier:1.0f constant:-10.0f]];
// +++++++ Equal width constraints +++++++
[popupView addConstraint:[NSLayoutConstraint constraintWithItem:cancelBtn attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:resetBtn attribute:NSLayoutAttributeWidth multiplier:1.0f constant:0]];
[popupView addConstraint:[NSLayoutConstraint constraintWithItem:resetBtn attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:doneBtn attribute:NSLayoutAttributeWidth multiplier:1.0f constant:0]];
I am actually trying to have UIView which houses UIImageView and UILabel (side by side). There are multiple such pairs present. I need these pairs one below the other. But after the second pair, the overlapping starts in spite of giving vertical contraints. The code below is actually resulting in Views getting overlapped (third and fourth getting on to second) I am unable to know exactly what is going wrong. Appreciate if somebody could point out this
UIView *bottomCaseStudiesLyt = [[UIView alloc]init];
bottomCaseStudiesLyt.translatesAutoresizingMaskIntoConstraints = NO;
[contentView addSubview:bottomCaseStudiesLyt];
NSLayoutConstraint* bottomCaseStudiesleftConstraint = [NSLayoutConstraint constraintWithItem:bottomCaseStudiesLyt attribute:NSLayoutAttributeLeading relatedBy:NSLayoutRelationEqual toItem:contentView attribute:NSLayoutAttributeLeading multiplier:1.0f constant:10.0f];
[contentView addConstraint:bottomCaseStudiesleftConstraint];
NSLayoutConstraint* bottomCaseStudiesTopConstraint = [NSLayoutConstraint constraintWithItem:bottomCaseStudiesLyt attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:details3View attribute:NSLayoutAttributeBottom multiplier:1.0f constant:10.0f];
[contentView addConstraint:bottomCaseStudiesTopConstraint];
NSLayoutConstraint* bottomCaseStudiesRightConstraint = [NSLayoutConstraint constraintWithItem:bottomCaseStudiesLyt attribute:NSLayoutAttributeTrailing relatedBy:NSLayoutRelationEqual toItem:contentView attribute:NSLayoutAttributeTrailing multiplier:1.0f constant:-10.0f];
[contentView addConstraint:bottomCaseStudiesRightConstraint];
NSLayoutConstraint* bottomCaseStudiesBottomConstraint = [NSLayoutConstraint constraintWithItem:bottomCaseStudiesLyt attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:contentView attribute:NSLayoutAttributeBottom multiplier:1.0f constant:0.0f];
[contentView addConstraint:bottomCaseStudiesBottomConstraint];
//NSArray *bottomCaseStudiesVConstraints = [NSLayoutConstraint constraintsWithVisualFormat:#"V:|[headingDetailsView]-[details2View]-[details3View]-[bottomCaseStudiesLyt]|" options:0 metrics:nil views:#{#"headingDetailsView": headingDetailsView,#"details2View": details2View,#"details3View": details3View,#"bottomCaseStudiesLyt": bottomCaseStudiesLyt}];
//[contentView addConstraints:bottomCaseStudiesVConstraints];
UIView *firstView = [[UIView alloc]init];
[firstView setTranslatesAutoresizingMaskIntoConstraints:NO];
[bottomCaseStudiesLyt addSubview: firstView];
[self addImageAndDetails:bottomCaseStudiesLyt previousview:nil whichimage:#"ic_action_easy" whattext:#"Rediculously easy. Takes less than 30 seconds to build a room and go live" mynewview:firstView];
UIView *secondView = [[UIView alloc]init];
[secondView setTranslatesAutoresizingMaskIntoConstraints:NO];
[bottomCaseStudiesLyt addSubview: secondView];
[self addImageAndDetails:bottomCaseStudiesLyt previousview:firstView whichimage:#"ic_action_amaze" whattext:#"Engage members with great content, services, offers, polls, notification, quiz and more" mynewview:secondView];
UIView *thirdView = [[UIView alloc]init];
[thirdView setTranslatesAutoresizingMaskIntoConstraints:NO];
[bottomCaseStudiesLyt addSubview: thirdView];
[self addImageAndDetails:bottomCaseStudiesLyt previousview:secondView whichimage:#"ic_action_subscribers" whattext:#"Members ? No limit! There is a room for all. Go ahead and promote your room." mynewview:thirdView];
UIView *fourthView = [[UIView alloc]init];
[fourthView setTranslatesAutoresizingMaskIntoConstraints:NO];
[bottomCaseStudiesLyt addSubview: fourthView];
[self addImageAndDetails:bottomCaseStudiesLyt previousview:thirdView whichimage:#"ic_action_crossplatform" whattext:#"Your room can be accessed from any platform or device." mynewview:fourthView];
NSArray *bottomViewVConstraints = [NSLayoutConstraint constraintsWithVisualFormat:#"V:|[firsView]-[secondView]-[thirdView]-[fourthView]|" options:0 metrics:nil views:#{#"firsView": firstView,#"secondView": secondView,#"thirdView": thirdView,#"fourthView": fourthView}];
[bottomCaseStudiesLyt addConstraints:bottomViewVConstraints];
// GetStarted button
self->m_ObjGetStartedBut = [[UIButton alloc]init];
[self->m_ObjGetStartedBut setTitle: [NSString stringWithFormat:#"Get Started"] forState:UIControlStateNormal];
self->m_ObjGetStartedBut.backgroundColor = [UIColor redColor];
[self->m_ObjGetStartedBut setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
self->m_ObjGetStartedBut.translatesAutoresizingMaskIntoConstraints = NO;
self->m_ObjGetStartedBut.layer.cornerRadius = 10;
self->m_ObjGetStartedBut.clipsToBounds = YES;
[parentView addSubview:self->m_ObjGetStartedBut];
NSDictionary *myTopViews = #{
#"scrollView": self->myScrollView,
#"submitButton": self->m_ObjGetStartedBut
};
NSArray *myTopVConstraints = [NSLayoutConstraint constraintsWithVisualFormat:#"V:|[scrollView]-[submitButton(40)]|" options:0 metrics:nil views:myTopViews];
NSArray *myTopHConstraints = [NSLayoutConstraint constraintsWithVisualFormat:#"H:|-[submitButton]-|" options:0 metrics:nil views:#{#"submitButton": self->m_ObjGetStartedBut}];
[parentView addConstraints:myTopVConstraints];
[parentView addConstraints:myTopHConstraints];
//[self->m_ObjGetStartedBut addTarget:self action:#selector(buttonIsReleased:) forControlEvents: UIControlEventTouchUpInside];
//[self->m_ObjGetStartedBut setTag:1];
}
-(UIView *)addImageAndDetails:(UIView *)localparentView previousview:(UIView *)prevView whichimage:(NSString *)imageName whattext:(NSString *)relatedText mynewview:(UIView *)itemView
{
NSLayoutConstraint* topViewleftConstraint = [NSLayoutConstraint constraintWithItem:itemView attribute:NSLayoutAttributeLeading relatedBy:NSLayoutRelationEqual toItem:localparentView attribute:NSLayoutAttributeLeading multiplier:1.0f constant:10.0f];
[localparentView addConstraint:topViewleftConstraint];
NSLayoutConstraint* topViewRightConstraint = [NSLayoutConstraint constraintWithItem:itemView attribute:NSLayoutAttributeTrailing relatedBy:NSLayoutRelationEqual toItem:localparentView attribute:NSLayoutAttributeTrailing multiplier:1.0f constant:-10.0f];
[localparentView addConstraint:topViewRightConstraint];
NSLayoutConstraint* topViewTopConstraint = nil;
if(prevView == nil)
{
topViewTopConstraint = [NSLayoutConstraint constraintWithItem:itemView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:localparentView attribute:NSLayoutAttributeTop multiplier:1.0f constant:0.0f];
[localparentView addConstraint:topViewTopConstraint];
}
else
{
//topViewTopConstraint = [NSLayoutConstraint constraintWithItem:itemView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:prevView attribute:NSLayoutAttributeBottom multiplier:1.0f constant:0.0f];
//[localparentView addConstraint:topViewTopConstraint];
}
UIImage *easyToCreateImg = [UIImage imageNamed:imageName];
UIImageView *easyToCreateImgView = [[UIImageView alloc] initWithImage:easyToCreateImg];
easyToCreateImgView.contentMode = UIViewContentModeScaleToFill;
easyToCreateImgView.translatesAutoresizingMaskIntoConstraints = NO;
easyToCreateImgView.clipsToBounds = YES;
[itemView addSubview:easyToCreateImgView];
NSLayoutConstraint* easyToCreateImgLeftConstraint = [NSLayoutConstraint constraintWithItem:easyToCreateImgView attribute:NSLayoutAttributeLeading relatedBy:NSLayoutRelationEqual toItem:itemView attribute:NSLayoutAttributeLeading multiplier:1.0f constant:2.0f];
[itemView addConstraint:easyToCreateImgLeftConstraint];
NSLayoutConstraint* easyToCreateImgTopConstraint = [NSLayoutConstraint constraintWithItem:easyToCreateImgView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:itemView attribute:NSLayoutAttributeTop multiplier:1.0f constant:2.0f];
[itemView addConstraint:easyToCreateImgTopConstraint];
NSLayoutConstraint *easyToCreateImgHtConstraint = [NSLayoutConstraint constraintWithItem:easyToCreateImgView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0 constant:80.0f];
[itemView addConstraint:easyToCreateImgHtConstraint];
NSLayoutConstraint *easyToCreateImgWidConstraint = [NSLayoutConstraint constraintWithItem:easyToCreateImgView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0 constant:80.0f];
[itemView addConstraint:easyToCreateImgWidConstraint];
UILabel* easyToCreateLblView = [[UILabel alloc]init];
[easyToCreateLblView setText:relatedText];
easyToCreateLblView.numberOfLines = 0;
UIFont *newHeadingViewLblFont = [UIFont fontWithName:#"Arial" size:13];
[easyToCreateLblView setFont:newHeadingViewLblFont];
[easyToCreateLblView setTextColor:[UIColor blackColor]];
easyToCreateLblView.translatesAutoresizingMaskIntoConstraints = NO;
[itemView addSubview:easyToCreateLblView];
NSLayoutConstraint* easyToCreateLblTopConstraint = [NSLayoutConstraint constraintWithItem:easyToCreateLblView attribute:NSLayoutAttributeCenterYWithinMargins relatedBy:NSLayoutRelationEqual toItem:easyToCreateImgView attribute:NSLayoutAttributeCenterY multiplier:1.0f constant:2.0f];
[itemView addConstraint:easyToCreateLblTopConstraint];
NSLayoutConstraint* easyToCreateLblLeftConstraint = [NSLayoutConstraint constraintWithItem:easyToCreateLblView attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:easyToCreateImgView attribute:NSLayoutAttributeRight multiplier:1.0f constant:2.0f];
[itemView addConstraint:easyToCreateLblLeftConstraint];
NSLayoutConstraint* easyToCreateLblRightConstraint = [NSLayoutConstraint constraintWithItem:easyToCreateLblView attribute:NSLayoutAttributeTrailing relatedBy:NSLayoutRelationEqual toItem:itemView attribute:NSLayoutAttributeTrailing multiplier:1.0f constant:-10.0f];
[itemView addConstraint:easyToCreateLblRightConstraint];
return itemView;
}
I am not sure if my interpretation is right or wrong. What I observed is that when we give width and height constraints to the first view, this I think is not respected by the subsequent views that have been added. However, it does seem to respect the other constraints (top, bottom, leading, trailing). So when I started giving the same magnitude of width and height to the other subsequent views, then the arrangement came out as expected. Thoughts from the community are welcome.
Something strange is happening when I have UITextfield, UILabel and UIButton. I am applying constraints so that the label and the textfield are centred in the UIView. The button is pinned at the bottom. When I run this code, UITextField becomes non-editable. Can somebody tell me what is going wrong with this code below?
Click here to view the code output
UIView* topLayout = [[UIView alloc]init];
[topLayout setTranslatesAutoresizingMaskIntoConstraints:NO];
topLayout.backgroundColor = [UIColor whiteColor];
[self.view addSubview: topLayout];
NSArray *topLayoutHConstraints = [NSLayoutConstraint constraintsWithVisualFormat:#"H:[parentView(==mainView)]" options:0 metrics:0 views:#{#"parentView": topLayout, #"mainView":self.view}];
NSArray *topLayoutVConstraints = [NSLayoutConstraint constraintsWithVisualFormat:#"V:|[parentView]|" options:0 metrics:0 views:#{#"parentView": topLayout}];
[self.view addConstraints:topLayoutHConstraints];
[self.view addConstraints:topLayoutVConstraints];
UIView *childViewLayout = [[UIView alloc]init];
childViewLayout.backgroundColor = [UIColor yellowColor];
[childViewLayout setTranslatesAutoresizingMaskIntoConstraints:NO];
[topLayout addSubview:childViewLayout];
NSLayoutConstraint *childViewControlsHConstraints = [NSLayoutConstraint constraintWithItem:childViewLayout attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:topLayout attribute:NSLayoutAttributeCenterX multiplier:1.0 constant:0.0];
NSLayoutConstraint *childViewControlsVConstraints = [NSLayoutConstraint constraintWithItem:childViewLayout attribute:NSLayoutAttributeCenterY relatedBy:NSLayoutRelationEqual toItem:topLayout attribute:NSLayoutAttributeCenterY multiplier:1.0 constant:0.0];
NSLayoutConstraint *childViewControlsHtConstraints = [NSLayoutConstraint constraintWithItem:childViewLayout attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:topLayout attribute:NSLayoutAttributeHeight multiplier:1.0 constant:0.0];
[topLayout addConstraint:childViewControlsHConstraints];
[topLayout addConstraint:childViewControlsVConstraints];
//[topLayout addConstraint:childViewControlsHtConstraints];
// Instruction field
UILabel* instructionFieldLbl = [[UILabel alloc]init];
[childViewLayout addSubview:instructionFieldLbl];
[instructionFieldLbl setText:#"Please check your SMS or E-Mail for the 4 digit actiation code. Please enter the same to activat your account"];
UIFont *instructionFieldLblFont = [UIFont fontWithName:#"Arial-BoldMT" size:13];
[instructionFieldLbl setFont:instructionFieldLblFont];
instructionFieldLbl.numberOfLines = 0;
[instructionFieldLbl sizeToFit];
[instructionFieldLbl setTextColor:[UIColor grayColor]];
instructionFieldLbl.translatesAutoresizingMaskIntoConstraints = NO;
NSLayoutConstraint *instructionFieldHConstraint = [NSLayoutConstraint constraintWithItem:instructionFieldLbl attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationLessThanOrEqual toItem:childViewLayout attribute:NSLayoutAttributeCenterX multiplier:1.0 constant:0.0f];
//NSArray *instructionFieldHConstraints = [NSLayoutConstraint constraintsWithVisualFormat:#"H:|-10-[instructionFieldLbl]-10-|" options:0 metrics:nil views:#{#"instructionFieldLbl": instructionFieldLbl}];
[childViewLayout addConstraint:instructionFieldHConstraint];
//[childViewLayout addConstraints:instructionFieldHConstraints];
dispatch_async(dispatch_get_main_queue(), ^{
instructionFieldLbl.preferredMaxLayoutWidth = self.view.bounds.size.width;
});
// Activation field
self->m_ObjActivationField = [[JVFloatLabeledTextField alloc]init];
[childViewLayout addSubview:self->m_ObjActivationField];
self->m_ObjActivationField.borderStyle = UITextBorderStyleRoundedRect;
self->m_ObjActivationField.translatesAutoresizingMaskIntoConstraints = NO;
self->m_ObjActivationField.placeholder = [NSString stringWithFormat:#"Enter the activtion code"];
NSLayoutConstraint *activationHorzConstraint = [NSLayoutConstraint constraintWithItem:self->m_ObjActivationField attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:childViewLayout attribute:NSLayoutAttributeCenterX multiplier:1.0 constant:0.0];
[childViewLayout addConstraint:activationHorzConstraint];
NSDictionary *myControlViews = #{
#"instructionFieldLbl": instructionFieldLbl,
#"activationField": self->m_ObjActivationField
};
NSArray *myControlViewsVConstraints = [NSLayoutConstraint constraintsWithVisualFormat:#"V:|[instructionFieldLbl]-10-[activationField]|" options:0 metrics:nil views:myControlViews];
[childViewLayout addConstraints:myControlViewsVConstraints];
// Submit button
self->m_ObjActivationBut = [[UIButton alloc]init];
[topLayout addSubview:self->m_ObjActivationBut];
[self->m_ObjActivationBut setTitle: [NSString stringWithFormat:#"Activate"] forState:UIControlStateNormal];
self->m_ObjActivationBut.backgroundColor = [UIColor redColor];
[self->m_ObjActivationBut setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
self->m_ObjActivationBut.translatesAutoresizingMaskIntoConstraints = NO;
self->m_ObjActivationBut.layer.cornerRadius = 10;
self->m_ObjActivationBut.clipsToBounds = YES;
NSDictionary *topViews = #{
#"childViewLayout": childViewLayout,
#"activationButton": self->m_ObjActivationBut
};
//NSArray *myTopVConstraints = [NSLayoutConstraint constraintsWithVisualFormat:#"V:|[activationButton(40)]-10-|" options:0 metrics:nil views:topViews];
NSArray *myTopHConstraints = [NSLayoutConstraint constraintsWithVisualFormat:#"H:|-[activationButton]-|" options:0 metrics:nil views:#{#"activationButton": self->m_ObjActivationBut}];
NSLayoutConstraint *myTopVConstraints = [NSLayoutConstraint constraintWithItem:self->m_ObjActivationBut attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:topLayout attribute:NSLayoutAttributeBottom multiplier:1.0 constant:-10.0f];
[topLayout addConstraint:myTopVConstraints];
[topLayout addConstraints:myTopHConstraints];
i add subView(backgroundView) in uiview in my base view controller its working well in potratate but when i change orientation from potraite to landscape its frame size is same as potrait i want to change size of subview when rotate.
UIView *activityView = [[UIView alloc] initWithFrame:self.view.bounds];
CGRect frame = activityView.frame;
activityView.frame = frame;
activityView.backgroundColor = [UIColor clearColor];
activityView.alpha = 0.0f;
[self.view addSubview:activityView];
self.activityView = activityView;
UIView *backgroundView = [[UIView alloc]initWithFrame:activityView.bounds];
backgroundView.alpha = 0.0f;
[backgroundView setBackgroundColor:[UIColor lightGrayColor]];
[self.activityView backgroundView];
UIActivityIndicatorView *spinning = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleGray];
[self.activityView spinning];
spinning.center = activityView.center;
self.activityView.autoresizingMask = UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleTopMargin | UIViewAutoresizingFlexibleRightMargin | UIViewAutoresizingFlexibleBottomMargin;
[spinning setColor:[UIColor lightGrayColor]];
[spinning startAnimating];
To do this you must add constraints to your view (AutoLayout).
For example :
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:containerView
attribute:NSLayoutAttributeTop
relatedBy:NSLayoutRelationEqual
toItem:self.view
attribute:NSLayoutAttributeTop
multiplier:1.0
constant:0.0]];
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:containerView
attribute:NSLayoutAttributeLeading
relatedBy:NSLayoutRelationEqual
toItem:self.view
attribute:NSLayoutAttributeLeading
multiplier:1.0
constant:0.0]];
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:containerView
attribute:NSLayoutAttributeBottom
relatedBy:NSLayoutRelationEqual
toItem:self.view
attribute:NSLayoutAttributeBottom
multiplier:1.0
constant:0.0]];
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:containerView
attribute:NSLayoutAttributeTrailing
relatedBy:NSLayoutRelationEqual
toItem:self.view
attribute:NSLayoutAttributeTrailing
multiplier:1.0
constant:0.0]];
Edit :
Don't forget to set translatesAutoresizingMaskIntoConstraints property to NO on views.
(Replace self.view and containerView with your views).
I have some issue with autolayout.
We have ViewController with root view and child view.
Child view have fixed aspect ratio.
I need to fit child view in parent while rotation.
Also chid view should be centered.
Like on a picture:
I have this code:
- (void)viewDidLoad
{
[super viewDidLoad];
UIView * v = [UIView new];
v.backgroundColor = [UIColor redColor];
v.translatesAutoresizingMaskIntoConstraints = NO;
v.tag = 100;
[self.view addSubview:v];
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:#"H:|[v]|"
options:0
metrics:nil
views:#{#"v":v}]];
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:#"V:|[v]|"
options:0
metrics:nil
views:#{#"v":v}]];
for (NSLayoutConstraint *c in self.view.constraints) {
[c setPriority:800];
}
NSLayoutConstraint *c = [NSLayoutConstraint constraintWithItem:v
attribute:NSLayoutAttributeHeight
relatedBy:NSLayoutRelationEqual
toItem:v
attribute:NSLayoutAttributeWidth
multiplier:0.8
constant:0.];
[c setPriority:1000];
[v addConstraint:c];
c = [NSLayoutConstraint constraintWithItem:v
attribute:NSLayoutAttributeCenterY
relatedBy:NSLayoutRelationEqual
toItem:self.view
attribute:NSLayoutAttributeCenterY
multiplier:1
constant:0.];
[c setPriority:1000];
[self.view addConstraint:c];
c = [NSLayoutConstraint constraintWithItem:v
attribute:NSLayoutAttributeCenterX
relatedBy:NSLayoutRelationEqual
toItem:self.view
attribute:NSLayoutAttributeCenterX
multiplier:1
constant:0.];
[c setPriority:1000];
[self.view addConstraint:c];
}
And it's not working, it's shrinks outside superview in landscape.
I've made it work with the following constraints:
- (void)viewDidLoad
{
[super viewDidLoad];
UIView * v = [UIView new];
v.backgroundColor = [UIColor redColor];
v.translatesAutoresizingMaskIntoConstraints = NO;
v.tag = 100;
[self.view addSubview:v];
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:#"H:|-(>=0)-[v]-(>=0)-|"
options:0
metrics:nil
views:#{#"v":v}]];
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:#"V:|-(>=0)-[v]-(>=0)-|"
options:0
metrics:nil
views:#{#"v":v}]];
NSLayoutConstraint *c = [NSLayoutConstraint constraintWithItem:v
attribute:NSLayoutAttributeWidth
relatedBy:NSLayoutRelationEqual
toItem:self.view
attribute:NSLayoutAttributeWidth
multiplier:1.0
constant:0];
[c setPriority:800];
[self.view addConstraint:c];
c = [NSLayoutConstraint constraintWithItem:v
attribute:NSLayoutAttributeHeight
relatedBy:NSLayoutRelationEqual
toItem:self.view
attribute:NSLayoutAttributeHeight
multiplier:1.0
constant:0];
[c setPriority:800];
[self.view addConstraint:c];
c = [NSLayoutConstraint constraintWithItem:v
attribute:NSLayoutAttributeHeight
relatedBy:NSLayoutRelationEqual
toItem:v
attribute:NSLayoutAttributeWidth
multiplier:0.8
constant:0.];
[c setPriority:1000];
[v addConstraint:c];
c = [NSLayoutConstraint constraintWithItem:v
attribute:NSLayoutAttributeCenterY
relatedBy:NSLayoutRelationEqual
toItem:self.view
attribute:NSLayoutAttributeCenterY
multiplier:1
constant:0.];
[c setPriority:1000];
[self.view addConstraint:c];
c = [NSLayoutConstraint constraintWithItem:v
attribute:NSLayoutAttributeCenterX
relatedBy:NSLayoutRelationEqual
toItem:self.view
attribute:NSLayoutAttributeCenterX
multiplier:1
constant:0.];
[c setPriority:1000];
[self.view addConstraint:c];
}
Screenshots: