I am using this spinner in a project: https://github.com/misterwell/MMMaterialDesignSpinner
How would I add it to the center of the screen with autolayouts so that when the device rotates, it still stays in the center of the screen?
You can add autolayout constraints programmatically. You can use 4 constraints - center x, center y, width and height:
[self.spinner setTranslatesAutoresizingMaskIntoConstraints:NO];
NSLayoutConstraint *centerXConstraint = [NSLayoutConstraint constraintWithItem:self.spinner attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterX multiplier:1.0f constant:0.0f];
NSLayoutConstraint *centerYConstraint = [NSLayoutConstraint constraintWithItem:self.spinner attribute:NSLayoutAttributeCenterY relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterY multiplier:1.0f constant:0.0f];
NSLayoutConstraint *widthConstraint = [NSLayoutConstraint constraintWithItem:self.spinner attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0f constant:kSpinnerWidth];
NSLayoutConstraint *heightConstraint = [NSLayoutConstraint constraintWithItem:self.spinner attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0f constant:kSpinnerHeight];
[self.view addConstraints:#[ centerXConstraint, centerYConstraint, widthConstraint, heightConstraint]];
If you're using storyboards you could add the Horizontal Centre in Container and Vertical Centre in Container. To do this, click on the view in interface builder and look at the bottom right of the IB screen. Click on the first of 4 buttons and check the appropriate boxes.
If you're using code you could write spinner.center = self.view.center in viewDidLayoutSubviews().
Related
I'm subclassing UISearchBar and I want to add label that it's baseline will be aligned with UISearchTextField's baseline. I extract UISearchTextField from the searchbar and try to setup constraints like this:
- (void)addConstraintToBottomLabel {
NSLayoutConstraint *leading = [NSLayoutConstraint constraintWithItem:self.bottomLabel attribute:NSLayoutAttributeLeading relatedBy:NSLayoutRelationEqual toItem:self attribute:NSLayoutAttributeLeading multiplier:1.0 constant:0];
NSLayoutConstraint *trailing = [NSLayoutConstraint constraintWithItem:self.bottomLabel attribute:NSLayoutAttributeTrailing relatedBy:NSLayoutRelationGreaterThanOrEqual toItem:self attribute:NSLayoutAttributeTrailing multiplier:1.0 constant:0];
NSLayoutConstraint *baseline = [NSLayoutConstraint constraintWithItem:self.bottomLabel attribute:NSLayoutAttributeBaseline relatedBy:NSLayoutRelationEqual toItem:self.searchTextField attribute:NSLayoutAttributeBaseline multiplier:1.0 constant:0];
[self addConstraints:#[leading, trailing, baseline]];
}
And the result looks like this:
As you see, the labels aren't aligned.
For testing in constraints works well in other situation I align bottomLabel's baseline with textField's bottom and it works great. So where could be the problem?
How to add constraint for subview of view controller
explain briefly
// create a new view
self.containerView = [UIView new];
// before adding constraints always add respective view to superview
[self.view addSubview:self.containerView];
[self.containerView setTranslatesAutoresizingMaskIntoConstraints:false];
// add container on newly added view
NSLayoutConstraint *topConstraintContainer = [NSLayoutConstraint constraintWithItem:self.containerView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.topLayoutGuide attribute:NSLayoutAttributeBottom multiplier:1.0 constant:0];
NSLayoutConstraint *leadingConstraintContainer = [NSLayoutConstraint constraintWithItem:self.containerView attribute:NSLayoutAttributeLeading relatedBy:NSLayoutRelationEqual toItem:self.containerView.superview attribute:NSLayoutAttributeLeading multiplier:1.0 constant:0];
NSLayoutConstraint *trailingConstraintContainer = [NSLayoutConstraint constraintWithItem:self.containerView attribute:NSLayoutAttributeTrailing relatedBy:NSLayoutRelationEqual toItem:self.containerView.superview attribute:NSLayoutAttributeTrailing multiplier:1.0 constant:0];
NSLayoutConstraint *bottomConstraintContainer = [NSLayoutConstraint constraintWithItem:self.containerView attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:self.bottomLayoutGuide attribute:NSLayoutAttributeBottom multiplier:1.0 constant:0];
// add constraint to superview of respective view
[self.view addConstraints:#[topConstraintContainer,leadingConstraintContainer,trailingConstraintContainer,bottomConstraintContainer]];
There are alot of possibilities, but this is the main flow
Also there are third party libraries available which makes adding constraints easier, like
PureLayout
I added a FBAdView to a UIView in the view controller.
(I set the view background to red)
the FBAdView was created with adSize of kFBAdSizeHeight50Banner.
The problem is that the FBAdView calculates its width when it is being added, but after rotating the device it doesn't calculate its width again
I tried using autolayout but it didn't work
code for adding the FBAdview (Adding to UILabel with red backgroud)
FBAdView *fbAdView = [[FBAdView alloc] initWithPlacementID:#"***************_***************"
adSize:kFBAdSizeHeight50Banner
rootViewController:self];
fbAdView.delegate = self;
[fbAdView loadAd];
[self.banner addSubview:fbAdView];
code for autolayout - doesn't work
// Width constraint, parent view width
[self.banner addConstraint:[NSLayoutConstraint constraintWithItem:fbAdView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:self.banner
attribute:NSLayoutAttributeWidth
multiplier:1
constant:0]];
// Height constraint, parent view height
[self.banner addConstraint:[NSLayoutConstraint constraintWithItem:fbAdView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:self.banner
attribute:NSLayoutAttributeHeight
multiplier:1
constant:0]];
// Center horizontally
[self.banner addConstraint:[NSLayoutConstraint constraintWithItem:fbAdView
attribute:NSLayoutAttributeCenterX
relatedBy:NSLayoutRelationEqual
toItem:self.banner
attribute:NSLayoutAttributeCenterX
multiplier:1.0
constant:0.0]];
// Center vertically
[self.banner addConstraint:[NSLayoutConstraint constraintWithItem:fbAdView
attribute:NSLayoutAttributeCenterY
relatedBy:NSLayoutRelationEqual
toItem:self.banner
attribute:NSLayoutAttributeCenterY
multiplier:1.0
constant:0.0]];
print screen
when the banner is added it fit the screen width
after rotating it doesn't change its width (like its parent red view)
I think you're missing some constraints.
Adding these lines (might need some minor changes) makes your code work:
self.banner.translatesAutoresizingMaskIntoConstraints = NO;
fbAdView.translatesAutoresizingMaskIntoConstraints = NO;
// Width constraint
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:self.banner
attribute:NSLayoutAttributeWidth
relatedBy:NSLayoutRelationEqual
toItem:self.view
attribute:NSLayoutAttributeWidth
multiplier:1
constant:0]];
// Height constraint
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:#"V:[banner(==50)]"
options:0
metrics:nil
views:NSDictionaryOfVariableBindings(banner)]];
I've posted a sample project at https://github.com/overlordnyaldee/BannerAutoLayout
I have a UICollectionView added to a UIView. I just want the collection view to resize with orientation change, so that it fits the superview (UIView). After I add the layout constraint the collection view is missing. I could not even get the first constraint work properly.(below)
NSLayoutConstraint *leftSideConstraint = [NSLayoutConstraint constraintWithItem:self.collectionView
attribute:NSLayoutAttributeLeading
relatedBy:NSLayoutRelationEqual
toItem:self.view
attribute:NSLayoutAttributeLeading
multiplier:1.0
constant:10.0];
And then I add the constraint to self.view.
What am I doing wrong? Please, help!
Update:
This is how it works. I am new to autolayouts. I was just trying to satisfy the constraints one by one to be sure that they all work:) Thank you
NSLayoutConstraint *constraint1 = [NSLayoutConstraint constraintWithItem:self.collectionView
attribute:NSLayoutAttributeLeading
relatedBy:NSLayoutRelationEqual
toItem:self.view
attribute:NSLayoutAttributeLeading
multiplier:1.0
constant:5.0];
NSLayoutConstraint *constraint2 = [NSLayoutConstraint constraintWithItem:self.collectionView
attribute:NSLayoutAttributeTrailing
relatedBy:NSLayoutRelationEqual
toItem:self.view
attribute:NSLayoutAttributeTrailing
multiplier:1.0
constant:-5.0];
NSLayoutConstraint *constraint3 = [NSLayoutConstraint constraintWithItem:self.collectionView
attribute:NSLayoutAttributeBottom
relatedBy:NSLayoutRelationEqual
toItem:self.view
attribute:NSLayoutAttributeBottom
multiplier:1.0
constant:-5.0];
NSLayoutConstraint *constraint4 = [NSLayoutConstraint constraintWithItem:self.collectionView
attribute:NSLayoutAttributeTop
relatedBy:NSLayoutRelationEqual
toItem:self.view
attribute:NSLayoutAttributeTop
multiplier:1.0
constant:5.0];
[self.view addConstraints:#[constraint1, constraint2, constraint3, constraint4]];
You can't just add one constraint for view to position correctly. It needs to know it's x and y position, width and height. With this one constraint you only gave it x position. You need three more constraints eg. trailing, top and bottom or top, width, height. Basically any set of constraints that will fully describe view position, width and height.
In my app, I have the following setup:
TextView (self.textView)
Toolbar
When the keyboard become visible, I add a constraint that pushes the bottom of the text view up with the required number of pixels.
spacer =[NSLayoutConstraint
constraintWithItem:self.textView
attribute:NSLayoutAttributeBottom
relatedBy:NSLayoutRelationEqual
toItem:self.view
attribute:NSLayoutAttributeBottom
multiplier:1.0
constant:-height];
[self.view addConstraint:spacer];
When the keyboard disappears, I remove the constraint.
THIS WORKS FINE. However...
I want to add an imageview that lies on top of the text view. This seems straightforward. But now the "dismiss keyboard" resize is broken.
Here's the code I use to create the imageview, and pin it to the textview bounds.
self.overlay = [[UIImageView alloc] init];
[self.overlay setTranslatesAutoresizingMaskIntoConstraints:NO];
[self.view addSubview:self.overlay];
[self.view addConstraint: [NSLayoutConstraint
constraintWithItem:self.overlay
attribute:NSLayoutAttributeBottom
relatedBy:NSLayoutRelationEqual
toItem:self.textView
attribute:NSLayoutAttributeBottom
multiplier:1.0
constant:0]];
[self.view addConstraint: [NSLayoutConstraint
constraintWithItem:self.overlay
attribute:NSLayoutAttributeTop
relatedBy:NSLayoutRelationEqual
toItem:self.textView
attribute:NSLayoutAttributeTop
multiplier:1.0
constant:0]];
[self.view addConstraint: [NSLayoutConstraint
constraintWithItem:self.overlay
attribute:NSLayoutAttributeLeft
relatedBy:NSLayoutRelationEqual
toItem:self.textView
attribute:NSLayoutAttributeLeft
multiplier:1.0
constant:0]];
[self.view addConstraint: [NSLayoutConstraint
constraintWithItem:self.overlay
attribute:NSLayoutAttributeRight
relatedBy:NSLayoutRelationEqual
toItem:self.textView
attribute:NSLayoutAttributeRight
multiplier:1.0
constant:0]];
[self.view layoutIfNeeded];
Here's how it should look:
Initial before keyboard showing
Keyboard showing
Keyboard removed. Layout should be back to initial state, but instead I get this
Solution: Set the content hugging priority for the tool bar to 1.000 to avoid that it gets all stretched out.