I am trying to set the contentMode of a UIImageView to be .top, that is contained within a UIView, but it's not set properly or runs out of the boundary of the UIView.
This is what my cell looks like with the red being the container UIView with constraints of the UIImageView:
FYI: The UIImageView is a square size because it will be applied with rounded corners.
What I've attempted to do and the result:
1.
thumbnail.contentMode = .top
thumbnail.clipsToBounds = true
thumbnail.sizeToFit()
2.
thumbnail.contentMode = .top
thumbnail.clipsToBounds = true
also tried adding:
thumbnailContainer.clipsToBounds = true
thumbnailContainer.sizeToFit()
What I'm trying to achieve is the result of the first screenshot with the UIImageView contained inside its container view as seen in the second screenshot.
UPDATE:
Based on the comments and answer, I believe some are confused on what exactly I'm trying to do, so I've attached another screenshot of the result I'm expecting :
As you can see, I want the contentMode of the UIImageView to be .top such that the top-middle of the image is displayed. You can clearly see the difference between the contentMode in the 3rd screenshot, which is .scaleAspectFit, versus the contentMode in the 4th screenshot, which is .top because it is showing the top-middle of the image.
However, I would like the UIImageView to maintain its original size, as seen in the 3rd screenshot where the contentMode is .scaleAspectFit, instead of being stretched out horizontally and vertically, as seen in the 2nd screenshot.
I hope this clarifies what I'm trying to achieve.
To achieve the result you want, you need to set content mode to .aspectFit, so that image will resize itself in UIImageView's size, keeping its original height to width ratio.
Related
I wanted to circle my UIImageView and added this code :
profileImage.layer.cornerRadius = profileImage.frame.size.height/2
profileImage.clipsToBounds = true
and it work perfectly, but when images are horizontal, I get this picture:
as you can see, there is white space at the bottom and top of my circle image view. but what I really wanted was a circle filled with my image!
I've tried changing "content Mode" from attribute inspector, but I didn't get any answer! how can I fix this issue?
You have already set the clipsToBound property. So just update the contentMode.
I you don't want to distort image's scale:
profileImage.contentMode = .scaleAspectFill
If image's scale does not matter, you also can use:
profileImage.contentMode = .scaleToFill
Follow the link for more details: https://useyourloaf.com/blog/stretching-redrawing-and-positioning-with-contentmode/
Use below code:-
profileImage.clipsToBounds = true
profileImage.contentMode = .scaleAspectFill
Set the contentMode of your UIImageView to scaleAspectFill
profileImage.contentMode = .scaleAspectFill
Keep in mind that using this contentMode option some portion of the content may be clipped to fill the view’s bounds.
You can set the Different Content Mode as per you choice from StoryBoard:
You can select
Scale to Fill
Aspect Fill
or any other content mode by using trial and Error method which suits you
Hope it Helps.
If I choose Aspect Fit, I'm getting blank space in top and bottom of the imageview.
Can I trim that space anyhow?
Is there any programatically constraints I can set to re-scale imageview according to actual image size?
I'm using UIImageView with Content Mode set to Aspect Fit. UIImageView resizes correctly my image but it doesn't change own frame after resizing even there is no constraints set.
What I need:
I need UIImageView to resize own frame according image inside. I've configured image view at Storyboard.
I need to layout again other objects at view because UIImageView's size is changed.
What I've tried:
I've created:
UIViewController (white background) → UIImageView (gray background) → sample image inside it.
Constraints: leading & trailing constraints set to zero, Y constraint is set to align UIImageView vertically.
As you see after image scaled correctly UIImageView's frame is still has incorrect size (gray background).
I've tried to set UIImageView size manually:
override func viewDidAppear(_ animated: Bool) {
super.viewDidAppear(animated)
let newSize = AVMakeRect(aspectRatio: backgroundImageView.image!.size, insideRect: backgroundImageView.frame)
backgroundImageView.frame = newSize
}
In that example code I've calculated image size and set frame size to image's size. I don't know if it is better way so I don't need to use AVFoundation's methods.
Problem: other object is place incorrectly because UIImageView's size changed and constraints are invalid now.
That methods doesn't work for me:
self.view.setNeedsLayout()
self.view.layoutIfNeeded()
Even I will call my UIImageView size calculation at viewDidLayoutSubviews() other constraints is still using old UIImageView's size.
Questions
How to change UIImageView's size correctly? Maybe I can do it without code? Maybe I need to play with Hugging/Compression? I've tried something but got no luck.
How to force view to recalculate other constraints so they will use new UIImageView size? For example I can put red square at the top of UIImageView, but after UIImageView has been resized by my method, red square still will be at the old UIImageView's position.
I am displaying images in a UITableViewController inside a cell, currently to show the full image I am setting the UIImageView as aspectFit but it doesn't fill up the entire UIImageView.
Is there a way, where I can show the full image and not distort it like the other contentView modes do?
Hope this will help :)
YourImageview.contentMode = UIViewContentModeScaleAspectFill;
YourImageview.clipsToBounds = true
You should use as below :
Youreimageview.contentMode = UIViewContentModeScaleAspectFit;
This is from the This apple Document:
UIViewContentModeScaleAspectFit
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.
For the Image showing in the Tableviewcell. You need to do customization of the UItableviewCell, and then you need to put imageview in that. That imageview must have this content mode to set image.
I have a UIImageView with Auto-layout to the container margins. I set a UIImage to it in the ViewController. If I use UIViewContentModeScaleAspectFit then the image is centred in the middle of the screen as I wanted and everything looks great, but when I give the UIImageView a background color, I can see it still spreads all the way to the container margins, and doesn't get the image's proportions and dimensions. This is my code:
UIImage *passedImage = [UIImage imageNamed:self.photoTitle];
CGRect imageBounds = CGRectMake(0, 0, passedImage.size.width, passedImage.size.height);
[self.imageView setImage:passedImage];
self.imageView.bounds = imageBounds;
self.imageView.contentMode = UIViewContentModeScaleAspectFit;
I have tried everything to fix it and looked everywhere for answers, please help me, you are my only hope.
Instead of pinning the image view's edges to the container margins, pin its center X and center Y to the container's center X and center Y.
This gives the same visual result — the image is centered — but leaves the image view free to resize itself according to its contents.
UIImageView does not resize itself according to image size it renders. If you need to size it accordingly, you need to do it yourself. Matt's answer is reasonable, but you still need to update your image view size at some point. I'd suggest doing it in layoutSubviews or updateConstraints method of your view or in view controller's viewDidLayoutSubviews.
I'm trying to set the background image of a UIView with animated .gif's that I'm pulling form Giphy.
The problem I'm having is that the UIView is stretching the image. I want to fill the background so the height is 100% and have it centered. So left and right of the .gif would be cut off - but the image would be centered on the screen and not stretched.
Here's a screenshot of what it looks like now.
You can see it's fills height correct but it's shrinking the width of the image to match the UIView dimensions making it look stretched.
Here is the code I have now:
override func viewDidAppear(animated: Bool) {
self.giphyBackground(Title: "dancing") { [weak self] (gifUrl) -> Void in
let gifView = FLAnimatedImageView(frame: self!.giphy.frame)
gifView.animatedImage = FLAnimatedImage(animatedGIFData: NSData(contentsOfURL: NSURL(string: gifUrl)!)!)
self?.view.insertSubview(gifView, aboveSubview: self!.giphy)
}
}
Any ideas
I think you should set the content mode of gifView to Aspect Fit, doing so will not stretch the image and will fully fill at-least one of the length either horizontally/ vertically.
Try setting
gifView.contentMode = UIViewContentMode.ScaleAspectFit
Also you can use scale AspectFill on gifView as
gifView.contentMode = UIViewContentMode.ScaleAspectFill
ScaleAspectFill will fill the entire gifView's frame but will also maintain the aspect ratio, doing so your image won't look stretched but it could happen that content either horizontally or vertically will go outside the frame(which you can clip).
You are definitely looking for the view's contentMode ScaleAspectFit. Simply add a line gifView.contentMode=UIViewContentMode.ScaleAspectFit