I have this viewController that shows a navigationBar at the top (white box on top) and a toolbar at the bottom (orange box in picture).
Because the navigationBar is something iOS is adding to the viewController, when the viewController is visible, self.view's high will be reported as the screen size minus 44 points.
I have added an imageView to the view and I want it centralized between the navigationBar and the toolbar, like seen in the following picture.
What I did was to add a constraint to centralize vertically the imageView. As you see in the picture Xcode shows that the imageView is perfectly vertically centered as I want but this is not what happens when the app runs (thanks Apple).
In practice this is what happens: suppose I am running it on iPhone 5. iPhone's 5 screen high is 568 points. Because there is a navigation bar, the hight of self.view will be 524 pt (568 - 44). The constraint stupidly will disregard the top 44 pixels where the navigation bar is and centralize the imageView on the are between the bottom of the navigationBar and the top of the toolbar. The result is that the imageView will be closer to the bottom.
This imageView is carefully chosen to fill completely the space between the toolbar and the navigationBar when the app is running on iPhone 4. Also this imageView has to respect an aspect ratio constraint. Exactly like this:
Instead of centralizing the imageView using a vertically centered constraint I tried to add a top constraint to the superview and a bottom constraint to the toolbar. That works fine in all iPhones, except on the iPhone 4, where these two constraints force the imageView into another aspect ratio, like this:
So, what kind of constraint I have to apply to the imageView to make it center on the space between the navigationBar and the toolbar without losing the aspect ratio?
If you want the view to be centered between the navigation bar and the tool bar, then deselect both "Under Top Bars" and "Under Bottom Bars" for your controller. Add a centerY constraint to your image view, give it 0 length spacing constraints to the 2 sides, and finally, the aspect ratio constraint. I tested this, and it worked at all sizes, with a 1:1 aspect ratio. If you want a taller aspect ratio (your image looks like ~1:1.2 w:h) then you need to do some additional work to make it turn out right for the 3.5" screen because there's not enough height to get that ratio with the image view being full width (assuming that you also have the status bar showing -- if not, then these constraints should work for the 3.5" screen). I can edit my answer to include how to do that, if you say what aspect ratio you want, and if you want some minimum spacing between the two bars, or whether you want the image view to be as wide as possible while still maintaining its aspect ratio (which would mean there would be no space to the two bars).
Related
I have labels and toolbars on the top and bottom of the screen with height constraints. And I got UIImage between toolbars. So toolbars and labels are keeping same height for different devices while space between toolbars is changeable.
My goal is to keep aspect ratio 1:1 for devices from SE to IPad and to center UIImage between toolbars by stretching it until it reach superview margins on sides or toolbars on top and bottom. I was tried different approaches but the best thing I could get is on below screenshot.
It's keeping aspect ratio but I can't figure out how to keep it centered between toolbars.
Constraints for UIImage:
Since I'm working on iOS 8 supported app I didn't use UIStackView and try to find a solution with constraints only.
You need to do following things :
Add a new view (says, centerView) in between the yellow and green view and give it clear color and give below constraints
Leading, trailing to superview as constant = 0.
Top to yellow view as constant = 0
Bottom to yellow view as constant = 0
Now in centerView add ImageView which have Apple logo and give below constraints.
Give it fixed height as you want.
give it vertically and horizontally centered w.r.t. its superView.
Using Xcode 7.3, I have a stop button (just a 100x100 pixel image, no text) that in my Any,Any size class I have added a center horizontally constraint and then a trailing constraint. This keeps it centered and just a bit off the bottom edge of the screen - which works for most cases.
However for a 4-inch iPhone in landscape, my other elements constrain things and I want to put the button vertically centered and somewhat off the right hand side of the screen.
When I go to the Compact Width, Compact Height class view, add Center Vertically in Container and then choose Update Frames to see the result, IB changes the height of my button from 50 to 300. Why does it do this? I want to keep the image dimensions the same.
I have a button on my view that must be positioned in the top left corner throughout all different screen sizes, but proportionate to the margins and scaled accordingly. I had success in doing so with several other IB objects by using the aspect ratio, and X/Y Centering, but this button seems to not be complying. What constraints should I look to add?
I have a viewController, which is configured for the iPhone5 screen size. In red rectangle is the view.
To make this view show properly in iPhone4 - I used auto layout. But when I specify constrains such as: leading edge, trailing edge, bottom space and top space (in top space I even made constraint's priority to LOW ) - the view still goes partially down the screen as if my constraints don't work.
BUT if instead of top space constraint I specify view's heigh and delete top space constraint - everything works perfectly.
Does anyone can explain it please? Thank you.
Thats because when you set up the top space constraint it will move the view by the constant you provided. iPhone 4 and iPhone 5 screen height is different but the constant remains the same so obviously it will behave differently. One way to troubleshoot your interfaces is to switching between iPhone4 and iPhone 5 on storyboard device on storyboard (first button from left to right on the bottom right corner of interface builder).
Auto-layout is all about experience in my opinion. I struggled alot with it until i learned. If you want your view to be attached to the bottom of the screen you should set the BOTTOM SPACE to 0 and specify the view's height like you did or adjust constraints for it's subviews so that the height is set dinamically according to the views inside.
I'm building an app that has a UIImageView below the UINavigationBar as the following screenshot displays.
Before I set the autoresizing constraints, I logged the bounds size, and it says the size is 320x505 which is quite reasonable because the navigation bar and the status bar takes up 64 pts.
The constraints are like this before I set them up:
And later, I've added the "inner cross" part of the constraints like below, and this time, while logging the bounds size, it gave me 320x569, which takes status bar and navigation bar into account.
I'm pretty sure that the "real" size of UIImageView does not increase, because when I load a image, it simply displays the image just fine, there's no difference, but I'm not sure why this happens.
So my question is what leads to this and how to fix it?
Thanks in advance!
The first Autosizing mode sets (among others) Fixed Top Margin & Fixed Bottom Margin & Fixed Height. Basicly, you're telling the view to have the same margins to top and to bottom but not to modify its height, which is pretty impossible, so the interface builder will give priority to the bottom fixed spring.
The second case, having Fixed Top Margin & Fixed Bottom Margin & Flexible height, stretches your images on the whole content. If you haven't unchecked the view controller's option (Extend under top bars) the full content is 568(for 4inch device, which is your case) (on ios 7 if you have that option checked the viewcontroller's view's y origin is under the navigationbar & status bar , right in the very top corner).
If you uncheck the Extend under top bar option, the viewcontroller's view will begin from 64.