I have a UIImageView as a subview of UIView (frame size 300 x 300). My UIImage would be either portrait, landscape or some odd sizes. How do I fill in the UIImage within the UIView frame size without stretching the image to 300 x 300?
The purpose of this, I will be adding another UIImageView as the image border.
Please help.
Thanks.
Try
[img setContentMode:UIViewContentModeScaleAspectFit];
UIViewContentModeScaleAspectFit: Scales the content to fit the size of the view by
maintaining the aspect ratio. Any remaining area of the view’s bounds is transparent.
or [img setContentMode:UIViewContentModeScaleAspectFill];
UIViewContentModeScaleAspectFill: Scales the content to fill the size of the view. Some
portion of the content may be clipped to fill the view’s bounds.
if you are clipping subviews, then you need to do
[imgView clipToBounds:YES];
Ah I just reread what you were asking, I know what your question is now.
Your UIImageView's frame changes, and when it does so does your image. You don't want your image to change, but you do want your ImageView to adjust to fill the view it is contained in.
UPDATE
I figured it out.
[self.imageView setContentMode:UIViewContentModeCenter];
No matter what orientation, the size stays the same.
You also have the option of setting it to align top, bottom, left, right, top left, top right, bottom left, bottom right, all of which only help to align your image and NOT redraw or re-size the image.
Does that help?
[image setContentMode:UIViewContentModeScaleToFill];
Set the contentMode property of UIImageView to either of this values depending on where you want to put it in the superview:
UIViewContentModeCenter,
UIViewContentModeTop,
UIViewContentModeBottom,
UIViewContentModeLeft,
UIViewContentModeRight,
UIViewContentModeTopLeft,
UIViewContentModeTopRight,
UIViewContentModeBottomLeft,
UIViewContentModeBottomRight,
As this values:
UIViewContentModeScaleToFill,
UIViewContentModeScaleAspectFit,
UIViewContentModeScaleAspectFill,
Will indeed cause the image to be 300 x 300, which is what you don't want.
Use the contentMode property of UIImageView.
Edit: and set the image size to 300x300.
Related
I have a UIImageView. For some reason, the circle crop is not working properly. What it winds up doing is cropping the edges to a circle, but leaves the sides completely straight, any ideas why?
Here is my code:
self.avatarTwo.layer.cornerRadius = self.avatarTwo.frame.size.height /2;
self.avatarTwo.layer.masksToBounds = YES;
self.avatarTwo.layer.borderWidth = 0;
The image is 2448 by 3264 (pixels) and this is how it looks right now cropped:
Although the UIImageView is square, the UIImage's height is much larger than the width. The default content mode for UIImageView is UIViewContentModeScaleToFill which scales the content "to fit the size of itself by changing the aspect ratio of the content if necessary." To make the image centered and filling the UImageView you must use:
self.avatarTwo.contentMode = UIViewContentModeScaleAspectFill;
See contentMode for more information on this.
In essence, your UIImageView is being cropped fine, but the content in that image view is being scaled to not crop any of the content.
I want image coordinates in Uiimageview not UIImageview coordinates.
Because if i have a landscape mode image and i set the property of UIImageview contentmode aspectfit, It will show in portrait mode with white spaces and centered.
Please tell me how to get the x,y coordinate of images in UIImageView.
Thanks
UIImage does not have a frame,Frame is for UIImageview
Try to create a UIImage from your image data or file, then use the size property to get a CGSize structure representing the image's dimensions. See Apple reference doc.
Hope this helps you!
I have a UIImageView with a UIImage inside set to scale aspect ratio. The image is more tall than wide and there is a transparent region on either side of the UIImageView. How can I convert the tap location of the UIImageView to correct locations inside of the UIImage?
you have the original width and height of the image. divide it with the width and height of the view. multiply the factor image.size.height/view.frame.size.height with the y you tapped and image.size.width/view.frame.size.width with the tapped x.
I have an Image inside UIScrollView which i can zoom in and out.
I have a button that let the user rotate the Image 90 degrees:
(void)RotateImage {
CGAffineTransform rotateTrans = CGAffineTransformMakeRotation(-90.0 / 180.0 * 3.14);
BaseImg.transform = rotateTrans;
}
After the imaged is rotated i cannot zoom in and out.. the image is going crazy on the screen and going back to the UNRotated state.
What am i doing wrong? code examples will be great!
Thanks :)
UIScrollView likes to take over the transforms of the views it contains. There are two solutions:
Rotate the image without changing the containing view.
Create a UIView subclass that displays an image within a sublayer.
To rotate the image, see How to Rotate a UIImage 90 degrees?. If you're always and only doing 90 degree rotation, see #Peter Sarnowski's solution. To adapt it to what you're doing here, assuming that BaseImg is a UIImageView:
- (void) rotateImage
{
UIImage *sourceImage = [baseImg image];
UIImage *rotatedImage = [UIImage imageWithCGImage:[sourceImage CGImage] scale:1.0 orientation:UIImageOrientationRight];
[baseImg setImage:rotatedImage];
}
This will only rotate once. To have rotateImage work repeatedly, read the existing orientation property and move it on to the next in clockwise or anticlockwise order.
If the image is not square, you may also need to resize baseImg to reflect its new aspect ratio.
To create a UIView subclass, you need to have it store a CALayer as a sublayer of the view layer. Store the image in the sublayer, and transform the sublayer at will. This is faster, and allows arbitrary rotation, but you need to calculate your own scaling to prevent the rotate image going outside the view bounds.
To simply rotate image the code is perfect but to add zoom in and out and then add rotation you need to retain its transforms.Here is a sample code that can help you.
https://github.com/elc/iCodeBlogDemoPhotoBoard
I have a UIImageView that is displaying an image that is wider and taller than the UIImageView is. I would like to pan the image within the view using an animation (so that the pan is nice and smooth).
It seems to me that I should be able to just adjust the bounds.origin of the UIImageView, and the image should move (because the image should paint inside the view with that as its origin, right?) but that doesn't seem to work. The bounds.origin changes, but the image draws in the same location.
What almost works is to change the contentsRect of the view's layer. But this begins as a unit square, even though the viewable area of the image is not the whole image. So I'm not sure how I would detect that the far edge of the image is being pulled into the viewable area (which I need to avoid, since it displays by stretching the edge out to infinity, which looks, well, sub-par).
My view currently has its contentsGravity set to kCAGravityTopLeft via Interface Builder, if that makes a difference (Is it causing the image to move?). No other options seemed to be any better, though.
UPDATE: to be clear, I want to move the image inside the view, while keeping the view in the same spot.
I'd highly recommend enclosing your UIImageView in a UIScrollView. Have the UIImageView display the full image, and set the contentSize on the UIScrollView to be the same as your UIImageView's size. Your window into the image will be the size of the UIScrollView, and by using scrollRectToVisible:animated: you can pan to particular areas on the image in an animated fashion.
If you don't want scroll bars to appear, you can set the showsHorizontalScrollIndicator and showsVerticalScrollIndicatorproperties to NO.
UIScrollView also provides pinch-zooming functionality, which may or may not be useful to you.
Brad Larson pointed me down the right road with his suggestion to put the UIImageView inside a UIScrollView.
In the end I put the UIImageView inside of a UIScrollView, and set the scrollView's contentSize and the imageView's bounds to be the same size as the image in the UIImage:
UIImage* image = imageView.image;
imageView.bounds = CGRectMake(0, 0, image.size.width, image.size.height);
scrollView.contentSize = image.size;
Then, I can animate the scrollView's contentOffset to achieve a nice panning effect:
[UIView beginAnimations:#"pan" context:nil];
[UIView setAnimationDuration:animationDuration];
scrollView.contentOffset = newRect.origin;
[UIView commitAnimations];
In my particular case, I'm panning to a random space in the image. In order to find a proper rect to pan to and a proper duration to get a nice constant speed, I use the following:
UIImage* image = imageView.image;
float xNewOrigin = [TCBRandom randomIntLessThan:image.size.width - scrollView.bounds.size.width];
float yNewOrigin = [TCBRandom randomIntLessThan:image.size.height - scrollView.bounds.size.height];
CGRect oldRect = scrollView.bounds;
CGRect newRect = CGRectMake(
xNewOrigin,
yNewOrigin,
scrollView.bounds.size.width,
scrollView.bounds.size.height);
float xDistance = fabs(xNewOrigin - oldRect.origin.x);
float yDistance = fabs(yNewOrigin - oldRect.origin.y);
float hDistance = sqrtf(powf(xDistance, 2) + powf(yDistance, 2));
float hDistanceInPixels = hDistance;
float animationDuration = hDistanceInPixels / speedInPixelsPerSecond;
I'm using a speedInPixelsPerSecond of 10.0f, but other applications might want to use a different value.