I selected Aspect Fill under View > Mode for my UIImageView in my XIB but it stubbornly shows the same sized image.
I I
I I
I MY IMAGE HERE I
I I
I I
i.e. there is blank space above and below MY IMAGE.
What could I be doing wrong?
==== UPDATE
With a red backgroundColor:
RRRRRRRRRRRRRRRRRRRRR
RRRRRRRRRRRRRRRRRRRRR
I MY IMAGE HERE I
RRRRRRRRRRRRRRRRRRRRR
RRRRRRRRRRRRRRRRRRRRR
Shouldn't Aspect Fill make it more like the entire rectangle is filled by something like MAG where MY I and E HERE are off-screen.
Doh. Turned out to be something stupid but I'm posting it here in case it saves someone hours of debugging.
Turned out I had AspectFill in the XIB and then AspectFit in my code (which trumped the XIB).
Have you specified the UIImageView to fill the screen?
If you specfify the mode you change the way the actual image will be displayed inside the imageView. But if your UIImageView does not fill the entire screen the embedded image will too not fill the screen neither.
You should specify the layout constraints to align the imageView with the bounds of its superView.
A easy way to test this is setting the backgroundColor of the UIImageView to something different than transparent - that way you can see where the image and where the imageView are
Another way to help debug this is to add a border. My issue was the image that design provided actually had a clear border around it. Chances are you're sizing it right and there's something wrong with the image itself.
I was experiencing a very similar problem only with a horizontally scrolling UIScrollView.
I had constraints on the scrollview and the UIImageView(s) loaded into the scrollview did not aspect fill properly.
Upon removing the constraints on the scrollview, .scaleAspectFill worked as it should.
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'm trying to add an UITableView on top of an image but inside a "rectangle" of that image. The image's size is relative to its parent view.
Here is the image at the back and the table view should be inside the brown area.
Back Image:
I tried Proportional Spacing by setting the Top property of the table to the Bottom of the image and using a multiplier.
Did the same by setting the Leading property of the table to the Right of the image.
It almost work on iPhones, but when I switch to the iPad, the top of the table is much lower than the brown rect.
Here are some screenshots:
iPhone 7:
iPad:
I've been struggling to fix this issue and couldn't find any way to do it.
Do you think there is a way to fix this?
Thank you :)
Set the alignment rect on the image to the inside and then autolayout will be much easier
I use UIImage to display my test image with Aspect Fit mode. I want it to be always positioned to the top and fill as much space as it can (see image below).
How to setup constraints, so that the image will be always positioned to the top (without any gap on taller devices)?
Additional info:
I'm using Xcode 7.0.1
Developing for iOS 8 and above.
I'm using auto layout.
I've tried to set " >= 0" to the bottom constraint, so that the bottom gap could get a double height, but it didn't work.
Any suggestions?
I suggest you programmatically calculate the size of the imageView and set the frame directly.
Do so in your viewWillAppear or viewDidLoad method of your viewController.
this will do the trick
UIImage *image; // yourImage
CGFloat whRatio = image.size.width/image.size.height;
if (whRatio > 1) {
// there will be borders on top -> adjust your view
imageView.frame = CGRectMake(imageView.frame.origin.x,
imageView.frame.origin.y,
imageView.frame.size.width,
imageView.frame.size.height / whRatio);
}
You might want to think about also adjusting the imageView in case the image is narrow, to prevent white spaces completely.
I think you have the correct constraints. Did you try to set the contentMode to "Scale to fill".
maybe you are using aspectFit
Here I'm adding an image showing how constraints are setup for the view that contains the image, as well for the image inside the view.
If anyone want to look at my experiments in details I've made a public repo via the link below. It includes the storyboard solution branch as well as code solution branche.
https://bitbucket.org/AndrejBB/test-layout
I am having a problem with the button image. I have a green background and an icon. The problem is that on larger screens the image stretches due to the button also stretch to the size of the screen.
I found several other topics they were talking about something, but none of them helped me solve this problem.
The next best picture explains the problem:
If you want your button to look like the 3rd image, you will have to use an image of that size and resolution.
Alternatively, you can set contentMode on your UIButton's imageView object. Use this line of code in your viewDidLoad function
button.imageView!.contentMode = UIViewContentMode.ScaleAspectFit
When your constraints increase the size of your button, the image used inside it will abide by the contentMode property set. Using those you can stretch it, which it's doing right now, or you can keep the aspect ratio, in which case it will show empty space on sides.
Play around with the content mode settings, try 'Aspect fit' instead of the currently selected.
It look like your constraints doesn't take on consideration the size of the asset.
You should set a Width and a Heigth constraints to your image asset.
I'm using UITableView with custom cells to create my own selection table.
Each cell has its own UIImageView, it's pinned to the right side of cell and there are three constraints on it: right trailing, top and bottom are pinned to these of the superview.
The image I use to show has template render style, there are 3 different sizes for different screen resolutions (16x16,32x32 and 48x48).
Everything works just fine, except one little quirk: the displayed image seems to be shifted up for one or two pixel lines, and these lines are added to the bottom of the image (at least it looks like that).
The view mode is set up as "Center", I tried others, but all modes that do not scale the image (I just want it to show as it is) have the same quirk.
I tried everything I could think of, but no success - the quirk's still here. In the Xcode view hierarchy everything shows just perfect! No quirk!
Has anyone seen anything similar? Are there any secret magic actions to avoid such an effect? My head explodes :(
Here are the screenshots: https://yadi.sk/d/rtTqVqcYfPJB3
In storyboard you want to set the UIImageView mode to either aspect fit or aspect fill.
Aspect Fit: fits your image proportionally inside the UIImageView so you might end up with white space
Aspect Fill: fills the UIImageView with you image proportionally but you might have some overflow that cuts off part of your image
You can also do this programmatically:
imageView.contentMode = UIViewContentModeScaleAspectFit;
imageView.contentMode = UIViewContentModeScaleAspectFill;
I have fixed the quirk by one (quite straightforward) step: by adding two blank lines, one line to the top, one line to the bottom of the icon.
So resulting icon sizes in my case: 16x18, 32x34, 48x50. The quirk is gone totally, but the reason for this weird behavior is still unknown for me.