This question already has answers here:
Auto-Layout: Get UIImageView height to calculate cell height correctly
(5 answers)
Closed 4 years ago.
I'm struggling with the following problem:
I have a TableViewController in which every cell has only an imageView. It uses autolayout to cell's contentView's margins and it is set to aspectFit.
What I want is the height of cell to size accordingly to the imageView's height.
In the first screenshot you see the white spaces at each side of the first image and at the top (and also the bottom - second screenshot) of the second image.
Note: my images' aspect ratio is variable.
I've already set this with no luck:
self.tableView.rowHeight = UITableViewAutomaticDimension
self.tableView.estimatedRowHeight = 300
Also this in cellForRowAt:
cell.setNeedsLayout()
cell.layoutIfNeeded()
Any advice is well received.
Thank you.
Images with aspect fill here
The constraints
You need to create these constraints , aspect ratio here is 3:1 you can change it according to yours , also the real image should have same aspect to stretch completely as you set contentMode to aspectFit
Edit:
If the aspect is variable then you need these constraints
then hook the height constraint and do this in cellForRowAt after you download / get from cache
cell.imageHeight.constant = imageRealHeight * imageCellWidth / imageRealWidth
This is due to the way the image view returns it's intrinsicContentSize. I currently believe this is a bug and should be changed. I have raised a radar for this.
When you put an image into an image view with .scaleAspectFit and with a constraint on one dimension (width or height).
Then it will scale the image down.
So if you start with an image of 300x300 and put it into an image view with a width constraint of 100 then you will get an image view that is 100 points wide.
However, the image view uses the unscaled image for the intrinsicContentSize and so it will want to be 300 points high.
This is the problem you are facing now.
The only fix for this currently is to calculate the aspect ratio of the image and manually set that as a constraint on the image view.
So you might have a line like this...
imageView.image = theImage
You can add to that to add an aspect ratio constraint...
imageView.heightAnchor.constraint(equalTo: imageView.widthAnchor, multiplier: image.size.height / image.size.width).isActive = true
Of course, you will also need to remove any constraints added already. Or possibly create the constraint as a property of the cell etc...
Related
I am trying to round the corners on my UIImageView in tableViewCells, however, for some reason, they are clipped. I have tried this:
cell.characterThumbnail.layer.masksToBounds = true
cell.characterThumbnail.layer.cornerRadius = 15
and this is the result I get:
If I use the debug 3D viewer I get the frame is larger than I've set (I want 84 * 84 but it shows 84 * 110). Shown here:
Why are there different sizes? And why are the rounded corners clipped? I have to point out that the image in the UIImageView is downloaded from an URL for each thumbnail.
Any help on this matter is much appreciated. It has bugged me for a week lol.
P.S. I forgot to mention that I've read almost every single "rounded corner" question here on SO and elsewhere on the internet, but no mention of clipped corners. Also, I have thought about rounding the actual image before displaying it in the UIImageView, but that makes the tableView scrolling jerky.
Edit: Whole project at https://github.com/Aecasorg/WoWilvlChecker
I suspect your image views are set to 'aspectFit', not aspectFill:
You have to set clipsToBounds true and give it a desired radius.
cell.image.contentMode = .ScaleAspectFill
cell.image.layer.cornerRadius = 10
cell.image.clipsToBounds = true
//Use this to add border
cell.image.layer.borderWidth = 3
cell.image.layer.borderColor = UIColor.whiteColor().CGColor
The problem what see is that round corner is getting drawn on 84X110 and not 84X84. That's why it looks strange.
Please call sizeToFit() (this resizes and moves the receiver view so it just encloses its subviews.).
cell.characterThumbnail.sizeToFit()
cell.characterThumbnail.clipsToBound = true
just before
cell.characterThumbnail.layer.masksToBounds = true
cell.characterThumbnail.layer.cornerRadius = 15
However, if you want to keep thumbnail-view fixed 84X84 and resize the image then you need to set aspectFill.
And in the storyboard of (WoWilvlChecker) fix the width and height of the view to 84X84
Also I think cornerRadius not needed to be 15. A value like 3-5 should be sufficient.
I checked your repo.
Remove centerY constraint, it seems centerY is causing this "stretched height" problem.
If you want to make imageView's Size applied,
then set width, height, (centerX, CenterY) or (vertical one, horizontal one)
Project has problems with layout constraints and content mode in the imageView.
Just add height constraint for the imageView and change content mode to Aspect fill.
Also I recommend to use smaller corner radius, for example 5.0. You can exam my changes in the pull request.
It is all due to constraints. All I needed was to get rid of the "Leading Space to: Superview" and "Bottom View to: Superview" constraints I had set up and add an "Align Center Y to: Superview" and that sorted it. Thanks to everyone for responses and suggestions!
i have this problem in 2 projects.Normally, profile image is displayed in circle like
and this is ok for iphone5 size.problem raises on bigger devices.like
as you can see size of profile imageview, it looks small compare to cover image.if i let it increase based on outer image then xocde ignores the aspect ratio constrains which results in non cricular profile imageview
here's current constrains image
any suggestion how should i handle it?
Update
here's result if i set constrain on profile imageview to increase with ratio to background image.
asks for y of image view,as i want it to be center so i sets fixed hight = 68 in hopes that xcode will break this constrain to keep aspect ratio, result
so if i remove hight = 68 and add constrain like width.
result
Select your image view and it's super view together and give equal width constraint,
then select that equal width constraint from size inspector, and reduce its multiplier until you get your desired width!
Now select your image view and give aspect ratio constraint!
And finally give position constraint for x and y position!
In your case center x and center y with it's super view I think!
And your imageview will increase or decrease with device width and will remains square always!
And You should set dynamic corner radius(half of width or height of your imageview) in layoutSubviews method of tableviewcell's class as you need rounded imageview and your size is dynamic!
Instead of setting the height and width as constants, set equal width constraints between the background image and the profile image:
And then select the profile image and set the multiplier value to the desired value:
Now you can also set an aspect ratio for the profile image.
This is simple:
Provide Aspect Ratio constraint and make the width of the profile pic = width of the screen
Select the equal width constraint and give the ratio in multiplier
I have to show an imageview in a universal app ans it's size should increase as the screen design in every devices without reducing image quality. The image given to the imageview is a static image. If I use static width and height constraints using size classes it will work. But I don't think it as the correct way. If i use width & height
Proportional to the superview, it increases the image height but image clarity reduced in ipads. Any suggestion will be helpfull.
To make Imageviewsize respect to device for universal application , you need to give correct multipler to imageview.
please follow step to get desire output,
Step 1 :- Set Aspect Ratio to your imageview . (you can also set leading and trialing top , bottom etc. and then give aspect ratio.)
Aspect ration required to maintain to set image equal width and Height (Square)
Step 2 :- Set Horizontal center and vertically center imageview . (it will be differ according to your requirement , you can also take this step as step 1 and then set aspect ratio)
Step 3 :- Set Equal height to Superview from imageview.
(Don't panic , you will get warning to update frames or constrain but don't update it)
Step 4 :- Count Accurate Multiplier.
imageviewHeight / superview's height = Accurate Multipliar
Here ,
imageviewheight = 200 , superviewheight=600 so ,
200(imageviewheight)/600(superviewheight)=0.333
(set multipler to imageview where proposanal height = superview)
Step 5 :- check output to different simulator.
I hope this detail explanation is enought to understand your question.
you can give equal height or width with superview with different multiplier. for example multiplier is 0.5 five then your height or width will be half of superview's height.
hope this will help :)
Anchor the edges of the image view as you want. so that the size of image view will change based on device. But set the mode of image view to "Aspect Fit" which will make sure the image will resize but maintain the aspect ratio. You can change mode in Attribute inspector.
Please refer Difference between UIViewContentModeScaleAspectFit and UIViewContentModeScaleToFill?
I want a UIImageView to expand based on the actual image's height and width. Specifically, I take the image's height and width, and then divide both by ([larger value] / 300) so that the aspect ratio is maintained and the image is optimized to fit in the space I have designed for it (a width that is never smaller than 320 and a height that is always exactly 320). In the code I give the UIImageView the new height and width that I acquired from this procedure. All of this works exactly as I intend it to when viewed in the iPhone Simulator. However, Xcode is giving me warnings about my constraints for the UIImageView, saying that the "position and size" are ambiguous. What is the correct way to make these warnings go away?
Here is the ViewController:
http://i.imgur.com/cVWmVET.png
And here are the constraints I have for the UIImageView in the middle:
http://i.imgur.com/4orUyeh.png
For maintaining aspect ratio and showing image, you don't have to do manual calculations. Just set the following property of UIImageView and assign the image to it
yourimageView.contentMode = UIViewContentModeScaleAspectFit;
For keeping UIImageView in the center of screen, use following autolayout constraints
Constant Height
Constant Width
Horizontal Center in Container
Vertical Center in Container
If you are intending your imageview to expand, then you got to give a bigger values to the Imageview's Content Hugging property,
By Default its 250, give its horizontal and vertical value as 751 as 750 is the default value for Content Compression, so u have to give it a bigger value than that. Tell me if this works.
I currently try to get a fullscreen background for my iOS Project this means the image should stretch over the full background.
I currently try 2 things but won't worked out as solution.
1)
self.view.backgroundColor = UIColor(patternImage: UIImage(named: "background.png")!)
This only set the background image on the actual image size and repeat it in x and y, it does not stretch the image to fullscreensize.
2)
use a UIImage and make it equal to width and height and use aspect fill, this also does not give the wanted solution and also use much memory
Is there any other way to get this done?
So you have two ways to do it always with AutoLayout
1) With an addition of an Inequality constraint like shown in the images below.
2) Or by adding Leading, Trailing space and Top, bottom space Constraint and centering vertically and horizontally constraints but NO explicit height nor width constraint.