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.
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. :-)
How could I use UIImageView with aspectFill and alignment to the top? Auto-layout or programmatically don't mind.
It can be done, but you are talking about quite a bit of coding. Let's start with a detailed description of what you are asking for.
We'll start with an iPhone6s in portrait mode with a screen size of 667x375 points, or a regular height by compressed width in size classes.
(Keep in mind, on any iPad you'll also need to work with slide-over and split screen too.)
But for now we'll go with 667x375. Into that we'll add our imageView as a square size of 375x375. Along the top of the screen when in portrait mode.
(Keep in mind that with AutoLayout you'll also have it pinned, and without putting some code in to determine if it's in landscape or portrait, otherwise, that 375x375 will shrink in landscape if you have other views underneath it.)
So now, stripped out to the most minimum (for now), we are talking about how to pin "an image" to the top of a UIImageView that is 375x375 in size and with a contentMode of aspectFill.
We need to find the size of the image next, based on both the largest dimension (height or width) AND how that dimension compares to the size of the imageView, calculate how the imageView will normally render it. The key figure you want is the height it will render it as
For instance, how will a 480x1020 (HxW) image fit into it? The 1020 width will be taken down to 375, so the height will be 480/(1020375) or 176.4705 points.
Always do the math for both dimensions - if your imageView isn't square or if the height isn't the "bounded" dimension, you'll be off.
Once you've calculated what the "Aspect Filled" height will be, check it against the dimensions of the imageView, and adjust the height of it as needed.
Here's where the real work comes in. If you are using AutoLayout, you can do a heightAnchor adjustment, but depending on how you pinned those other views things may be laid out really bad after you do. If you are using frames and CGRects be aware that you have to take into account iPad slide-out and split screen, etc.
Finally, if you want your app to load a different image in that imageView after it was loaded, you will have to "reset" the height back to what it originally was, at least in your calculations.
My recommendation is to find an alternative to what you are asking. For instance, put a small border around the image view to let the user know the true dimensions of that view.
I'm new to iOS development and am struggling with interface builder to layout a view that has 3 images. I want three images going across the view. So the images will need to be scaled a little differently for different devices. I am hoping to do this with constraints. I am fairly close. Here is a screenshot:
The images are actually resizing and becoming bigger on the larger device screens which is what I want and the spacing is working to stop them from overlapping each other on small devices. I just need to stop the two side images from being stretched tall. I don't want to specify a height constraint because they do need to resize for specific devices sizes. Any help to add a constraint that will make the outer images not stretch tall is much appreciated.
Set the UIImageView 's content mode to be aspect fit. It will be always stretched in it's correct aspect ratio
Instead of Scale to Fill select Aspect Fit
So I'm trying to create a user profile that has a user picture that changes sizes with the screen size so it doesn't take up too much space on the smaller iPhone screens.
Everything else in my simulator is sizing correctly during simulation, but the user picture changing size correctly without breaking the ability to stay circular. I tried using aspect ratio, but the picture stays the same size when I simulate on smaller screens. I tried using aspect ratio in relation to the whole view (so that it changes sizes depending on the view), but since the view is rectangular, the picture cannot hold it's ability to stay circular (since it needs to be a square to correctly make the picture circular).
How would I achieve this without creating different views for each phone screen size?
If you set the contentMode of your UIImageView to UIViewContentModeScaleAspectFit, it doesn't matter if the view itself is not square - the image will always show in the right aspect ratio.
I'm trying to place a background image on a view, using a UIImageView or anything else that will work. I want it to fill the entire view, but maintain the aspect ratio, and allow me to control which side(s) get clipped. I'd like to use Auto Layout if possible (not code).
By setting Auto Layout constraints to keep the UIImageView the full size of the container, and setting Scale Mode to Aspect Fill, I am very close. The only problem is the image is always centered in the view, in that it is cropped on top and bottom in landscape layout and both sides in portrait. I want to be able to control that. I want to be able to "crop just the right side" (keep left edge docked to left of container), or "crop just the top". I have different images and I'll want each one to crop a different way, and possibly I'll allow users to use their own images and select from a few cropping options.
In this image, I currently get the top result, but want the option to get the bottom. The red box shows the visible area in portrait view (roughly):
My question is similar to this one: iOS Aspect Fill Image Resizing with Content Aligned to Left/Top Edge
However, I do not feel it is a duplicate because my needs are different, and I'm also including an image to help explain better. Also, I will not accept an answer of "use different images for portrait vs landscape" because that doesn't really solve the problem. If you understand my question, you would see that you would actually need a different image for every different aspect ratio, pre-cropped in each alignment I want to support. Obviously that's not really a robust solution.