I have an UIImageView with the image of a gradient with a thin line at the bottom. As the image isn't the same size as the imageview I want to scale it in some way. I don't care if I stretch the image but I would like the line at the bottom to be visible. Therefore I chose "Scale To Fill". But as you can see on the second screenshot the bottom line is not showing up in the simulator.
I thought that "Scale to fill" meant that the image got stretched so that all content is visible but that doesn't seem to be the case.
I highly appreciate your answers!
As the image isn't the same size as the imageview I want to scale it in some way. I don't care if I stretch the image
So use a resizable image (resizableImageWithCapInsets:). This is exactly what it is for.
but I would like the line at the bottom to be visible.
Well, there are some extra complications here, and you are not explaining how you are handling them. You have a UIImageView; it has a size. Perhaps it is bigger than the view we are seeing in the screen shot. Perhaps it is being overlapped by the text view that we see below it. In other words, it matters how this image view is being placed in the interface and sized.
Related
I'm having issues with constraints in XCode 12: Even if I describe accurately all measures involved, there is no way apparently to resize a 850x600 image to make it fit proportionally in the screen of an apple device. As you can see in the image, the constraints are defined to make the original image fit WITH BORDERS on the Iphone's screen, but nevertheless is turns out to be a disaster afterwards...
As you can see in the screen capture, the image overflows the screen when the model device is changed. So...we have a problem. And the answer or clue that I'm seeking night and day is...
How to make this image to become RESPONSIVE to screen size, and keep it's proportions. No way how the hell something so basic is so difficult in XCode...
must edit... look how the alignment constrainst are shown in grey...no idea why...this avoids me to try the solution provided by the good fellow above...
It seems you've defined constraints to center the imageView and having it a size of 850x600 pixels. This will keep the image of that exact same size, regardless the device it is shown on.
If you want the image to shrink, keeping the aspect ration you need to define constraint for the top, bottom, leading and trailing edge.
And you need to set the imageView's contentMode to "Aspect Fit", which is the default, afaik.
This is an image shown on an iPhone 11:
And this the same image shown on an iPhone 4s:
Edit:
One way to add those constraints is to select (highlight) the imageView and click on the button with the little square in the middle surrounded by those "T"s. :-)
I feel like I'm going crazy. I set my UIImageView.contentMode = UIViewContentModeScaleAspectFill, but it is still stretching the image. (Not a clipping issue, it is stretching the image.)
It even shows it stretched in my Storyboard. I created an image of green and brown squares to test:
I added a UIImageView in my Storyboard. I added the image to that image view, and when I'm setting to Aspect FIT then it does what it is supposed to do (maintain aspect ratio and show the whole image allowing gaps as needed), but when I switch to Aspect FILL then it stretches the image. Here is an animated gif from my storyboard:
What the heck is going on? This is in a storyboard in a project that is a few years old. If I create a brand new project with a brand new storyboard, then this insanity doesn't happen.
Is there something in my underlying storyboard that is causing this bug?
Any help is appreciated. I feel like I'm taking crazy pills.
It's not stretching it. It's filling the area while keeping the aspect ratio. If it were stretching it, the horizontal white line in the middle would not be as tall as the vertical white lines are wide.
Set the content mode to "Scale To Fill" to see what it would look like if it were getting stretched (like this):
Note the difference in line thickness of the middle white line, as opposed to when it's set to Aspect Fill:
If you turn off Clip to Bounds on the image view, then you can see how the image is getting cropped when set to Aspect Fill:
If you want to show the full image at the full width while keeping the aspect ratio, you'll have to increase that cell's height to accommodate the height of the image.
I'm trying to build a simple tableview with a tableView showing a list of images people posted and comments their friends added.
This is a subclass of TableViewCell, and I used stack views to lay it out. The problem is that I want to show the photos without stretching them - I want them to keep their original aspect ratio, but people can upload images of any dimensions. You see in the screenshot that the image is squished.
What I noticed is that the larger the uploaded .jpeg file, the taller the cells grew (I'm guessing the image size is dictating the intrinsic height?), but since the width can't change, each image is squished differently. A huge picture will show up super tall but with the same width.
I tried setting the image to Aspect Fit, but only the visible image itself does what I want: fit to width and not warp the aspect ratio. However, the UIImageView itself is still super tall and pushing all other UI elements out of the way.
I must be missing something here... It shouldn't be so hard, should it?
To constraint the image as aspect ratio , first give it width of screen , then give it a static height in IB and hook that constraint as IBOutlet
and set it inside cellForRow
cell.imageHeightcon.constant = imageRealHeight*imageWidthInIB/imageRealWidth
You should fix the size of the image view for whatever you want. Then you should use aspect to fill instead of aspect to fit and select the option clip to bounds in the attribute inspection
I have simply dragged UIImageView into storyboard and made it square. I added a pink background to show the effects of the leftover space in the ImageView. In each case I added either a taller image (1st image) and a wider image (2nd image), as well as a text label. Here are my results.
So the obvious question is....how can I get rid of this extra (pink) space and keep the integrity of the photo (that is, to not have to stretch or lose part of the image)? If I wanted to be able to scroll through photos, it would be nice to have them all the same width to the edge so they look neat and orderly (if they were portrait), and if I wanted to have text under each, I'd want the text to be closer to it, rather than have all the blank (pink) space in between if it were landscape. And obviously different size images will give different sizes of blank space.
So I'm thinking what I could do is before displaying the image, get the size of it, then just have a designated distance from either the label or the edge of screen, depending on the orientation of the picture, and then creating/changing the size of the UIImageView with a bit of math and using the image dimensions before inserting the picture into the ImageView. Is this possible? Is there another method I can't quite figure out?
Just look at any decent photo app and they are nice and neatly organized/displayed despite being different sizes, orientations, etc and I'm wondering how to pull this off. I obviously haven't gotten too deep into using images past simply showing them in a pre-determined ImageView.
Thanks for the help/suggestions!
Try this... set your UIImageView to AspectFit (not AspectFill since that will lose some of the image) and using constraints do the following:
centre the UIImageView in the container both horizontally and vertically
set the UILabel to float below the UIImageView by whatever distance you desire ("standard" is usually good)
set the left, right, and top constraints on the UIImageView to be >= whatever distance you desire
set the bottom constraint on the UILabel to be (once again) >= whatever distance you desire
The effect of this should be that the UIImageView will properly resize itself to its intrinsic size and the constraints should properly position it and the label.
I am developing a universal app for iOS-7. this particular question is specific to iPad only. I want to place an image as background of root view of a View Controller i.e. the image should fill the whole screen. The 1x image has size:768x1024. This works for Portrait orientations as non-retina resolution of iPad is also 768x1024 in portrait. In Landscape however the image does not fit. I have tried using ScaleToFit but since aspect ratio of image is not preserved I can not use ScaleToFit(their are things in image which look odd when not scaled proportionally in both axis). AspectFill resizing seems most suitable for my need, but their is a small problem. As defined in Apple Documentation "The content is resized to completely fill the bounds rectangle, while still preserving the aspect of the content. The content is centered in the axis it exceeds.". I do not want the content to be centered in axis in which it exceeds, I want it to be aligned to top/left edge.
So basically I want two things:
Aspect Fill
The content remains aligned on the Left/Top edge.
Is it possible to achieve this. Any code-snippet will be great.
Thanks
You will have to subclass the View Controller's view and manually scale and align.
Look at the code snippets in THIS answer.
Adjust imageViewXOrigin and imageViewYOrigin to align however you want.
Really the only way to get around the content fill mode is to have two different images, one for each orientation. I'd suggest changing the image in the view controllers willAnimateToOrientation: method so that you can put the image changes inside UIKit's animation block.