I was mocking about with Interface Builder and the DetailView of a SplitViewController.
I have a UIImageVIew of size 700px by 700px in the detailView and nothing else, I would like it to always position itself in the center. Because it is 700x700 it should fit in both portrait and landscape. However, there is also a UIToolBar governing the top 44 pixels. If I use IB and set the UIImageViews contentMode to center and the detailViews contentMode to center, the UIImageView is positioned so that it covers a few pixels of the toolbar. (but in the center non the less)
I have tried anchoring the UIImageView to the bottom, but it still positions itself in the center and the layout still covers the toolbar.
How would I go about doing the layout as "UIImageView:Deduct the space the toolbar takes up and position your self in the center of the remaining view" ?
Hope someone can help, the IB layout engine is a bit heavy to figure out by trial and error:)
Thank you in advance.
Add a UIView that goes from the bottom of the toolbar to the bottom of the entire view and stretches completely left to right. Set its Struts and Springs (cmd-3) so that it resizes vertically and horizontally and is attached to all 4 sides. Then put your UIImageView inside THAT view with all of the same centering you've already done. That will change the UIImageView's frame of reference so when it is trying to be in the center, it'll be in the center of that view which doesn't include the toolbar. Let me know if this makes sense.
Related
I have a root UIView (for rendering shadow) and it's content is another UIVIew that contains a UIImage and some labels at the bottom. When I look at a sample poster with my constraints set up in interface builder, it looks more or less how I want it.
In this screenshot, the DropshadowUI View holds the content and renders a shadow. The CardView holds both the UIImageView and the UILabels at the bottom. The DropshadowUI View is transparent, the CardView has a blue background and is the full height/width of the dropshadow (w/ a little bit of margin) and the UIImageView has a green background to help distinguish the views while testing. You can see that the UIImageView takes up roughly 80% of the CardView layout, which is desired. The rest of the CardView is made up of the UILabels.
When I run the app however, the constraints don't seem to be working the same way as shown in interface builder. The UIImageView stretches to take the entire height of the CardView. The UILabels are hidden from sight because of this. Judging from the green blur behind my UINavigationBar and UITabBar, it appears that the UIImageView is stretching vertically beyond the extents of the visible area, despite the image not even being that large.
The UIImageView image is set in the interface builder for now (will be set programmatically when this is working). The Content Mode is Aspect Fit. Why does the UIImageView stretch vertically? The Status label has a Bottom Space to bottom of Superview set at 8 points. The Year label's Bottom Space is constrained to the top of Status. The Movie Titles bottom is constrained to the top of Year. Movie Title has it's top constrained to the bottom of the UIImageView. The assumption was that the labels would prevent the image view from growing on the bottom, and instead getting taller by stretching the top (which is constrained to the superview views top.
Is there something wrong with my constraints? I'm still learning the auto-layout system, so if there's something in the screenshots that don't help explain my constraints, let me know what I could do to help clarify them.
Edit
I reset the UIImageView to the suggested constraints and ended up with this at runtime, despite the design-time view looking correct.
Is there a way for me to constrain the UIImageView so that the image can only grow taller, until it runs out of space to fit the rest of the content? I'm missing my bottom label here because now the image is fitting into the UIImageView but pushing everything else to far down. I'd rather it try to fill as much horizontal space as it can, until the siblings beneath it can no longer be pushed further down.
What I get, vs what i want
Select your image and go to Layout Issues tool > Reset to Suggested Constraints
I have a UIView and inside that there is a subview which is UIView again, inside that UIView i want to add a UILabel at the centre , I am using Autolayout. I have added all the constraints to all the views , but UILabel at the centre is only visible on iPad screens, it goes missing on smaller screen, my doubt is, when its coordinates, when are calculated on resized parent UIView, turns out to be wrong or it gets squeezed so much that it becomes invisible.
Please help me on this, I am not an expert in auto layout so obvious.
Thanks
Also the outer UIView will be presented fullscreen in parent ViewController
These are my constraints
And this is my Layout in all screens
Where your label is centered and also the Black View is increasing height with aspect ratio as per the device's height
set leading,trailing,horizontal center in container and top constrain to label with it's container view.
You should align it horizontally in the container.and also no one will be able to help unless you show all the constraints.
so, I'm pretty sure I have my auto layout constraints set up correctly... And I have my view controller embedded in a navigation controller. I put all of the things inside of a uiview that's constrained to the 4 sides of the phone (including the bottom of the navigation bar) but this is happening.
I have the picture constrained to the vertical center of the view, and at a 1:3 ratio to it's height. the buttons are constrained on the sides
the problem is that (as you can see by the button borders and the button text being off centered) everything seems to be larger than it should be and is causing an overlap, when the buttons are supposed to be flush against the bottom and top of the image view, but instead overflow on top of it (again, shown by the button borders)
ah, I'm just an idiot. Image View wasn't clipping subviews. Auto Layout's working just fine! Thanks. My b.
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).
In Interface Builder I have my main UIView however inside of this I have another UIView which acts as a header (different colour background and contains centered text whereas the main UIView behind and seen below the header contains other centered text).
The app was originally built for portrait mode. Now that I have allowed landscape mode, when I rotate the device, all the text auto resizes to remain in the center of the screen, but the header view remains the same width and locked to the left of the screen so I have a lot of trailing space to the right of it as it doesnt go all the way to the other side of the screen.
After looking for a solution I still haven't found one which fixes the problem so how do I set this UIView to stretch automatically on orientation change like all the text labels?
This is simple using auto layout. Give that view a constraint to the left, right, and top of its superview, and no fixed width. You can give it a fixed height if that's what you want, or give it a height that's proportional to the height of the screen (this would have to be done in code) if you want it to be shorter in landscape.