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
Related
I am currently facing an issue where I have a horizontal stack view with a UILabel and a ImageView. I am needing the stackView to dynamically change height depending on how many lines of text there is. I am also wanting the imageView to be aligned with the bottom of the UILabel(even when there is a second line).
I have currently tried:
Adding a UIView and aligning the ImageView in it. This stops the stackView auto-resizing.
Changing the Content Mode to bottom doesn't work either as I am wanting aspect fit.
Thanks for any suggestions!
You should be able to get your desired result pretty easily.
Constrain your Stack View to all 4 sides, using however much top/bottom and left/right "padding" you want.
Give your Image View a Width constraint (I'm guessing you want it around 24), and an Aspect Ratio of 1:1. That will keep it from stretching vertically. Content Mode: Aspect Fit
Set your Stack View properties to:
And... you should be all set.
I'm trying to make a row of buttons on the bottom of the screen and the buttons are images. I was having aspect ratio issues so a few sites recommended making image views and simply put transparent buttons on top of them. I've placed six image views in a stack view and constrained it to the bottom. I thought it would make sense to put six buttons in another stack view and then also constrain it to the bottom, but it always constrains to the nearest neighbor so now the images are actually on the bottom of the screen, but the transparent buttons are vertically sitting above them. Is it possible to have both constrained to the bottom of the screen so that they completely overlap? Thanks!
It is very much possible, from what you have written I assume that your second stackView is pinned to the top of First stackView. Change that constraint to bottom of your superView. This would be enough for your requirement.
Also Instead of using two different stackViews, I would recommend doing this in one single StackView, which will 6 UIViews inside and each UIView will have UIImageView and UIButton inside.
(Thanks, Sujith Chandran and Neil Hiddink for pointing the way!!)
Here is my solution: After selecting the bottom constraint for the stack view that contained the transparent button overlay, I went to the size inspector and changed the "Second Item" to superview, opened second item again and selected bottom, and then set Constant to 0. Eventually I had to change the value of constant to -70 to get the desired position because I previously set the button images to a height of 70.
I implemented a viewcontroller similar to the one in this question:
iOS two views cover exactly half of parent view
I get the desired result. The problem is that when I add a UIImageView into those two containers, the result get resized and ruins the symmetry. How do I prevent Imageviews from changing the size of their containers? I need to use AspectFill for these images.
I don't think the containers' sizes are changed. You just need to set their clipsToBounds property to true to avoid overflow.
If you use Reveal you should see the containers' sizes are not changed even if pictures inside them are bigger than themselves.
I'm unsure I understand what you mean about adding UIImageView into those controllers causing the views to resize, so forgive me if I'm getting this all wrong...
It sounds as though you've created two views of equal height that, together, consume the entire vertical space of the screen. After having done that, you want to add one or more UIImageView's to each of the original two views. Unfortunately, when you add the UIImageView, the enclosing view is resized.
Assuming I have that correct...
Are you doing this with Interface Builder either in an XIB or Storyboard file? If so, you ought to be able to achieve this with the proper set of constraints.
In the following image, I've laid out what I describe above.
As you can see, I have a red view on the top half of the window and a green view on the bottom half. The red view contains a UIImageView that is 75% of the width and height of red view, with its origin at (20, 20) within the red view.
The scene is configured as shown below:
The constraints on "Upper View" are:
You can see from this that Upper View is flush with the left, right, and top of its superview, and that its space to Bottom View is 0. You'll have to trust me that Bottom View is set up the same way.
The height of the Upper and Lower views is "Proportional" as shown in this constraint:
To achieve this "Proportional" setting, you first make the height of Upper View equal to the height of the superview, and then edit the constraint, changing "Multiplier" from "1" to "0.5."
The height (and width) of the Image View is proportional to that of the Upper view, as shown here:
If you set it up this way, you ought to be able to accomplish what (I think) you are looking to accomplish.
If my original assumption of what you are trying to achieve is incorrect, please post images of what you've got and how it's not working.
I have a layout which has a UIScrollView which has certain constraints with its container (the root view).
Now I want to place an UIImageView exactly above this scrollview and place a large image inside it, which should be scaled accordingly.
I set up constraints between the imageview and the scrollview to align their centers and make them equally wide and high. The image shows, what I would like to achieve.
What I would like is that the scrollview is fixed before the imageview is placed so that the scrollview determines the frame of the imageview on top, but what seems to happen is that the imageview (whose image resolution is too large for the screen) determines the frame of the scrollview, resulting in complete mayhem.
How can I make it so the scrollview gets the frame shown in the first image and the imageview is properly positioned on top of it?
EDIT: I uploaded the storyboard here (without constraints on the image view as they don't work)
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.