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
Related
I'm having difficulty adding some constraints automatically. Usually when I add a constraint in Storyboard I click on the item and add a constraint to it (be that align to center x or leading edges etc)
However, when I add a constraint programmatically I'm unsure how to achieve the same results. With the following code I'm hoping to make my _spinner view to be half the width and half the height of it's parent _loadingView.
[_loadingView addConstraint:[NSLayoutConstraint constraintWithItem:_spinner
attribute:NSLayoutAttributeWidth
relatedBy:NSLayoutRelationEqual
toItem:_loadingView
attribute:NSLayoutAttributeWidth
multiplier:0.5
constant:0]];
[_loadingView addConstraint:[NSLayoutConstraint constraintWithItem:_spinner
attribute:NSLayoutAttributeHeight
relatedBy:NSLayoutRelationEqual
toItem:_loadingView
attribute:NSLayoutAttributeHeight
multiplier:0.5
constant:0]];
However running this produces some conflicts. The _loadingView has constraints stating that it should be 80% width and height of it's parentview which is the ViewController.view So _loadingView should be 80% of ViewController.view and then _spinner should be 50% of _loadingView. But by adding the constraints on the spinnerview it is causing a conflict.
So I thought it needs an x and a y coordinate so I specified the spinner to be placed in the center of the _loadingView as follows:
[_loadingView addConstraint:[NSLayoutConstraint constraintWithItem:_spinner
attribute:NSLayoutAttributeCenterY
relatedBy:NSLayoutRelationEqual
toItem:_loadingView
attribute:NSLayoutAttributeCenterY
multiplier:1
constant:0]];
[_loadingView addConstraint:[NSLayoutConstraint constraintWithItem:_spinner
attribute:NSLayoutAttributeCenterX
relatedBy:NSLayoutRelationEqual
toItem:_loadingView
attribute:NSLayoutAttributeCenterX
multiplier:1
constant:0]];
But this still produces conflicts and the spinner constraints are not being added.
I'm working on an iOS project in which I need to programmatically use constraints for my views. I'm used to storyboards, but am using xibs for this particular project due to the nature of the project specification.
I have a MainViewController, in which I create the following properties in the .h file:
#property (nonatomic, strong) IBOutlet UIImageView *backgroundImageView;
#property (nonatomic, strong) IBOutlet UIImageView *logoImage;
I added these UIImageView instances to my XIB file, and selected the appropriate images via the Attributes inspector.
In my .m file, I have a addConstraints method, which is called in viewDidLoad. Inside this method, I make sure to turn off converting autoresizingMasks into constraints:
self.backgroundImageView.translatesAutoresizingMaskIntoConstraints = NO;
self.logoImage.translatesAutoresizingMaskIntoConstraints = NO;
Then, I've set up constraints so that the background image takes up the entirety of the superview:
id mainView = #{#"background": self.backgroundImageView};
//Set constraints so that the background takes up the entirety of the superview
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:#"H:|[background]|" options:0 metrics:nil views:mainView]];
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:#"V:|[background]|" options:0 metrics:nil views:mainView]];
Finally, I set constraints so that the logo view is in the center of the view (which is where I am going wrong):
// Width constraint
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:self.logoImage
attribute:NSLayoutAttributeWidth
relatedBy:NSLayoutRelationEqual
toItem:self
attribute:NSLayoutAttributeWidth
multiplier:0.5
constant:0]];
// Height constraint
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:self.logoImage
attribute:NSLayoutAttributeHeight
relatedBy:NSLayoutRelationEqual
toItem:self
attribute:NSLayoutAttributeHeight
multiplier:0.5
constant:0]];
// Center horizontally
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:self.logoImage
attribute:NSLayoutAttributeCenterX
relatedBy:NSLayoutRelationEqual
toItem:self
attribute:NSLayoutAttributeCenterX
multiplier:1.0
constant:0.0]];
// Center vertically
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:self.logoImage
attribute:NSLayoutAttributeCenterY
relatedBy:NSLayoutRelationEqual
toItem:self
attribute:NSLayoutAttributeCenterY
multiplier:1.0
constant:0.0]];
The error I receive is
*** +[NSLayoutConstraint constraintWithItem:attribute:relatedBy:toItem:attribute:multiplier:constant:]:
Constraint items must each be an instance of UIView or subclass'
, which I don't fully understand, as my constraint items (two UIImageView instances) are either subclasses of UIView, but I may be misunderstanding this. Can anyone help point out where I'm going wrong?
Try that :
// Width constraint
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:self.logoImage
attribute:NSLayoutAttributeWidth
relatedBy:NSLayoutRelationEqual
toItem:self.backgroundImageView
attribute:NSLayoutAttributeWidth
multiplier:0.5
constant:0]];
// Height constraint
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:self.logoImage
attribute:NSLayoutAttributeHeight
relatedBy:NSLayoutRelationEqual
toItem:self.backgroundImageView
attribute:NSLayoutAttributeHeight
multiplier:0.5
constant:0]];
// Center horizontally
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:self.logoImage
attribute:NSLayoutAttributeCenterX
relatedBy:NSLayoutRelationEqual
toItem:self.backgroundImageView
attribute:NSLayoutAttributeCenterX
multiplier:1.0
constant:0.0]];
// Center vertically
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:self.logoImage
attribute:NSLayoutAttributeCenterY
relatedBy:NSLayoutRelationEqual
toItem:self.backgroundImageView
attribute:NSLayoutAttributeCenterY
multiplier:1.0
constant:0.0]];
You were trying to define constraints between your UIImageView and your view controller. You must define constraints between views which are subviews of a same view.
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().
To save performance I'm creating the date picker only once in my app via a Singleton class and want to add the date picker then programmatically. This works, however I don't really know how to set the constraints in order to center the Date picker within its cell. This is my code:
//Inserting and aligning the date picker
self.datePicker = [[Singletons sharedManager] datePicker];
[self.datePickerCell addSubview:self.datePicker];
// Width constraint, half of parent view width
[self.datePickerCell addConstraint:[NSLayoutConstraint constraintWithItem:self.datePicker
attribute:NSLayoutAttributeWidth
relatedBy:NSLayoutRelationEqual
toItem:self.datePickerCell
attribute:NSLayoutAttributeWidth
multiplier:0.5
constant:0]];
// Height constraint, half of parent view height
[self.datePickerCell addConstraint:[NSLayoutConstraint constraintWithItem:self.datePicker
attribute:NSLayoutAttributeHeight
relatedBy:NSLayoutRelationEqual
toItem:self.datePickerCell
attribute:NSLayoutAttributeHeight
multiplier:0.5
constant:0]];
// Center horizontally
[self.datePickerCell addConstraint:[NSLayoutConstraint constraintWithItem:self.datePicker
attribute:NSLayoutAttributeCenterX
relatedBy:NSLayoutRelationEqual
toItem:self.datePickerCell
attribute:NSLayoutAttributeCenterX
multiplier:1.0
constant:0.0]];
// Center vertically
[self.datePickerCell addConstraint:[NSLayoutConstraint constraintWithItem:self.datePicker
attribute:NSLayoutAttributeCenterY
relatedBy:NSLayoutRelationEqual
toItem:self.datePickerCell
attribute:NSLayoutAttributeCenterY
multiplier:1.0
constant:0.0]];
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.