Image ScaleAspectFit empty space - ios

I'm trying to add pictures in a vertical manner using three imageViews. I want them to maintain aspect ratios, however, every time I add them to the view using ScaleAspectFit, there is a lot of empty space above and below the imageViews due to the aspect ratio being maintained. Here is the picture of what I mean. The blue is the imageView, and as you can see, it is much taller than the actual picture. I just don't know how I would go about making the imageView only as tall as the actual image. Thanks for the advice.

If you want to set the size of imageview from image try this it might help you.
UIImage *img = _myImageView.image;
_myImageView.frame = CGRectMake(_myImageView.frame.origin.x, _myImageView.frame.origin.y, img.size.width, img.size.height);

Related

Displaying image with different aspect ratio in ImageView

I have a UIImageView of fixed Size 210*230 for movie Poster. the images coming from server for different movie are of different aspect ratio and size. How make all image good in that poster imageView. I need to keep the poster imageView of fixed size.
Use the contentMode property on the UIImageView. If you don't want any of the images to be cut off, you probably want to use scaleAspectFit so you would do something like myImageView.contentMode = .scaleAspectFit
You have two options here
Change the contentMode property of UIImageView to be scaleAspectFit. In this case, empty space would be shown inside image view if image view and image's aspect ratio is not same. If ratio is same, your image will fit perfectly inside imageView.
Change the aspect ratio of each image programatically to fit perfectly into the image view. Just google how to resize image in swift. I had done this my self, code is available on SO. Just search a bit.
Hope it helps

How to set image UniformToFill stretch mode

I'm coming from XAML world where we have image stretch mode of Fill, UniformToFill, and Uniform. I'm targeting to achieve UniformToFill mode in my iOS app. In iOS, I came across ScaleToFill, AspectToFit, AspectToFill, and many others. None of them fulfill my requirement.
Required behavior: UIImageView (image container) size in layout remains fixed. Scale image according to fixed size of UIImageView and maintain aspect ratio of image itself. Upon matching either of side (vertical, horizontal), clip rest of the image.
To illustrate it better, here's the screenshot; I'm looking to achieve third from left.
Image stretch mode
XAML to iOS conversion is as follows.
Fill = ScaleToFill
Uniform = AspectToFit &
UniformToFill = AspectToFill
This is the exact match. If you are not getting this result, then it means you have done mistake in something else. Otherwise, this is perfect matching.
That's what .ScaleAspectFill does.
You are talking about a UIImage as a container ? I think you should look into UIImageView. Something like that would work ( that's written in Swift but easily adaptable to Objective-C
let image = UIImage(named: "your_image")
let imageView = UIImageView(image: image)
imageView.contentMode = .ScaleAspectFill
I think you should set UIViewContentModeScaleAspectFill as content mode of your image view.
You can refer Apple documentation for more details.
It states about scaleAspectFill,
The option to scale the content to fill the size of the view. Some
portion of the content may be clipped to fill the view’s bounds.
scaleAspectFit
The option to scale the content to fit the size of the view by maintaining the aspect ratio. Any remaining area of the view’s bounds is transparent.
Try both to feel real difference.

how to resize image without affecting its resolution in ios

I have an image view in which I have set image.It works fine if the size of image and image view is almost same. But what if we change the device, Image view is inc in size but the image gets stretched. I am unable to find any way to resize this image such that the image is not affected by the size of image view and at the same time remain centralized also. Also resolution of the image should not be affected.
you can use
[imageView setContentMode:UIViewContentModeScaleAspectFill];
or
[imageView setContentMode:UIViewContentModeScaleAspectFit];
Aspect Fit: Will size your image until the whole image will fit within your UIImageView Box. Thats why you are left with the extra space on top and bottom.
Aspect Fill: Will size your image proportionally until the whole UIImageView is full of your image. So that is why you see clipping of your image. It will actually size it proportionally to make sure there is no blank space left in your imageview.
In a nutshell: Aspect Fit makes sure your whole image is visible proportionally. Aspect Fill will make sure there is no space left in the imageview while sizing your image proportionally.
so it is upon you what you can compromise.
a rendom google image for example.
use this imageViewName.contentMode = UIViewContentModeScaleAspectFit;
as per docs This option is used to scale the content to fit the size of the view by maintaining the aspect ratio

iOS - Get framing of Visible part of UIImage from UIImageView

I am trying to make a transition like APP Tinder.
Detail:
In Screen One there is a Vertical Rectangular UIImaveView with contentMode = Aspect Fill, so it hides some portion of Image to adujust Aspect Ratio.
In Screen Two (Detail Screen) the same image after transition has to to be passed, but the ImageView in Second screen is Square One.
I want to make a Morphing kind of Transition in which User should think that the same ImageView from Screen One become square one in Second one without stretching the Image.So What should i do?
Currently i am trying to get Frame of UIImage that is in visible area of UIImageView so that I can do some Logical stuff to achieve this. but can anyone help me to Get the Frame of Visible Portion of UIImage.
EDIT
Please Find out the Attached Image for understanding
I think there's a little ambiguity in the question: a frame must be specified in a coordinate system. But I think you're looking for a rect relative to the original, unclipped image.
If that's right, then the rect can be computed as follows. Say the image is called image, and the image view is imageView. The size of the rect is the size of the image view:
imageView.bounds.size
And, since aspect fill will center the oversized dimension, it's origin is:
CGPointMake((image.size.width - imageView.bounds.size.width) / 2.0, 0.0);

UIImage distorted when using it for UIImageView

I have taken a photo, and then I'm initializing a UIImageView object with this photo. The only problem is, when I take the photo, the photo is being taken using the full iPhone screen (portrait).
The UIImageView that is being initialized with this photo is only set to take up the top 50% of the iphone's screen. So you can imagine the image looks distorted.
I have been able to make it look a lot better by using the following code:
UIImageView *halfView = [[UIImageView alloc]initWithImage:image];
[self.view addSubview:halfView];
halfView.frame = CGRectMake(0, 0, self.view.bounds.size.width, self.view.frame.size.height/2);
halfView.contentMode = UIViewContentModeScaleAspectFill;
The only problem is, the final UIImageView called "halfView" is still slightly distorted.
I have a feeling that this is impossible to fix, because the original photo is being taken with the full iphone screen and can never perfectly scale to fit a UIImageView that only takes up the top 50% of the iphone screen.
I was basically trying to copy the frontback app. Here is what it looks like when you are taking the original image in their app:
This is what my app's screen looks like when you are taking the picture:
And then right after you take the picture, my app's screen changes to look like the frontback screen and takes the picture you just took and places it in the top half and tries to scale it.
I hope that makes sense. I know it is a long question, but I just really wanted to let the user use the full screen while taking the photo and then just scale it to half the screen.
Am I going about this all wrong? Am I crazy to think I could ever properly scale the image to half the screen when it was originally captured as a "full screen" image?
Thanks for the help.
For the sake of argument let's say your captured image size is 640x1136 (twice the size of an iPhone 5 screen) and you are trying to display it in a UIImageView with of size 320x284 (half the size of an iPhone 5 screen).
As you can already see from these dimensions the captured image's width is smaller than its height whereas the UIImageView's width is larger than its height - the proportions are different.
Therefore, scaling the captured image to fit the UIImageView's width (scale by 0.5) means the captured image will be of size 320x568 - its height is larger than the UIImageView's height.
Scaling the captured image to fit the UIImageView's height (scale by 0.25) means the captured image will be of size 160x284 - its width is smaller the the UIImageView's width.
The image can't scale exactly like you want it to scale. However, you can use UIViewContentModeScaleAspectFill to fill the entire UIImageView but lose some of the image (image's height is too big to fit). You can also choose to use UIViewContentModeScaleAspectFit which will show the entire image but will leave some space on the sides (image's width is too small).
Another option you have is to actually capture the image in the proportions of your UIImageView in the first place but that means you won't be able to capture a full screen image.
Try this function, pass your UIImage in this function along with the new size, in turn it will return you the UIImage with size specified by you.
- (UIImage *)imageWithImage:(UIImage *)image scaledToSize:(CGSize)newSize {
UIGraphicsBeginImageContextWithOptions(newSize, NO, 0.0);
[image drawInRect:CGRectMake(0, 0, newSize.width, newSize.height)];
UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return newImage;
}
I guess this is what you want.
Hope this helps.
You mention the image takes up the full size of the screen. If it's to display the UIImageView taking up half the screen, then you'll need to add this code to clip the frame
halfView.clipToBounds = YES;
Despite making the size of the imageview half the screen, the actual image will show outside the boundaries of the imageview if it's original size is bigger with the aspectFit property. clipToBounds will fix this.
I hope this is what you're looking for. Thanks, Jim.

Resources