I have a custom tableViewCell with an imageView inside it. Layout as such:
I want to use autolayout to calculate height of the cell in method
CGSize size = [cell.contentView systemLayoutSizeFittingSize:UILayoutFittingCompressedSize];
so I set up constraints like this
Basically these constraints just pin each element to the edge of its superView or to the view above/below.
The problem is that there is one more constraint I want to add which is the imageView's aspect ratio. I want set imageView's height is always half of its width. If I directly set up aspect ratio constraint to 2:1 I always get Unable to simultaneously satisfy constraints error. I tried change the priority to high and still no luck.
Can I achieve this by using autolayout?
The reason why your constraints work and the automatic height is correctly calculated is that all the UI elements have their own intrinsic size (the size that would make it fit their content).
Therefore, the imageView already has a size to fit the image you put inside. You can't both use the intrinsic size and specify your own (even if you just want to change one of the dimensions).
A solution I see would be to have a static height constraint on your UIImageView, plus the aspect ration one for the width. Then in the code you set the constant for the height constraint to the image.size.height value.
[self.imageHeightConstraint setConstant:self.imageView.image.size.height];
[self.view layoutIfNeeded];
In this way you sort of keep half the intrinsic size (just the height) and get custom width.
Hope my explanation made sense 😊. Let me know if you have questions though.
Related
Following are the autolayout constraints I have added:
And the final result is as follows:
UIImage Content mode : Aspect Fit.
Label content hugging priority vertical : 253 (rest all are default for both imageview and label)
I have added a placeholder image until the image is actually downloaded. I have used 2 prototype cells in tableView - One with label. Another with Image and Label.
What I want to achieve is set the width of UIImage to 50% of screen size and let the height be calculated automatically based on aspect ratio.
cell.layoutSubviews also didnt help
Any help is really appreciated. Would like to achive this via storyboard itself if thats possible.
Thanks in advance
Set the width to 50% of the screen width. Programmtically it is written as imageView.frame.width = UIScreen.main.bounds.width / 2 I'm not sure how that would be done in storyboard. And set your desired aspect ratio constraint in the storyboard. The only constraints for the image should be its position in the cell, the aspect ratio, and the width. No height constraints.
I have an UIImageView and an UILabel next to each other with horizontal spacing constraint 0 and vertical alignment constraint. Now I want the image to be 80% as high as the label, so I set an equal height constraint with multiplier 0.8. But now instead of the image shrinking the image and the label grow insanely big. The constraint is still applied since the image is smaller than the label, but they are just way to big. My guess is that the constraint resizes the label based on the image instead of the other way around. So how can I tell it to do what I want?
Ary you trying to achieve like I shown in following image?
Where UIImageView view will be having 80% height of your UILabel?
If yes then Height Constraint will be key here.
Select both UI elements and apply Equal Heights constraint
It will make both as same height.
Then select the Height Constraint of UIImageView and add
Multiplier = 0.8 in Size inspector
Apply One by One constraints to each element first to show in expected way then add Equal Heights constraint. It will show conflict because other constraints are already present, then apply Multiplier = 0.8 and finally you are good to remove the unwanted constraints i.e. Fixed Height.
To avoid auto resizing of UIImageView according to Image, you need to have fix Height constraint for UILabel.
I am having issues maintaining a circular uiimageview when using autolayout without fixed height and width.
Example with fixed height / width inside a uiview container that has a fixed height.
storyboard constraints
Circular image
in viewwillayoutsubview
profileImageView.layoutIfNeeded()
profileImageView.layer.cornerRadius = profileImageView.frame.size.height / 2
profileImageView.layer.masksToBounds = true
Example without fixed height / width inside a uiview container that has a fixed height.
Storyboard constraints
Circular image
Goal: What I am trying to achieve is create a circular uiimageview that scales for all device screen sizes. I believe the issue is that without fixed height and width my cornerRadius is not correct for a circle.
What would be the best way to achieve this without setting a fixed width and height as that does not work on all screen sizes.
The first problem is that you’re pinning your view to all the edges of its parent with a fixed margin.
That may well produce a square in your storyboard, but doesn’t necessarily on your device (it depends on if your parent is constrained as a square or not, which I can’t see in your screenshots). If the parent stretches it’s width to fit it’s own superview, but doesn’t adjust its height, then your image is stretched into a rectangle.
That looks like it is the case, as the image appears stretched horizontally.
I’d suggest you remove all constraints from your image view and start again.
Make the image have a width equal to, say, 0.8 of its superview, give it a 1:1 ratio, and center it horizontally and vertically with its parent.
The second problem, is that you may be setting the cornerRadius too early.
When the view is loaded from your Storyboard, its width and height are whatever it was in storyboard.
Once the view has been laid out in its parent, the width/height will be adjusted and you’ll be left with an incorrect cornerRadius.
To solve this, simply make sure you have a 1:1 aspect ratio constraint on the view, and set the cornerRadius in viewDidLayoutSubviews (instead of viewWillLayoutSubviews).
A while ago I thought it might be a good idea to replace my own layout for a number of views inside a scrollview with a UIStackView.
But after more than a week of frustration I'm asking for help:
I'd like to place subviews like these:
inside a vertical UIStackView (alignment fill, distribution fill). The UIImageView's content mode is aspect fill, the image is set at runtime and can change at runtime (especially its aspect).
I'd like the subviews to horizontally fill the stack view and to resize vertically in order to keep the image's aspect ratio intact.
When I don't add any special constraints, I don't get layout warnings, but the subview inside my stack view doesn't resize when I change the image.
If I add an aspect constraint to the UIImageView every time the image is being set, I get a layout warning the first time I change the image and afterwards it doesn't resize the subview.
Can someone of you auto layout wizards please help me out?
You cannot set a constraint on an ImageView based on an image that will be loaded later. What you should do instead is
Set a height constraint on your ImageView
Connect an IBOutlet to this constraint
When the image is loaded, find out it's aspect ratio
Calculate the desired height since you already know the width
(stackView's width)
Set this height to your ImageView's height constraint
I have a custom square view that can grow and shrink as needed. My custom view just overrides drawRect to render the content.
The containing view is a rectangle, but not a square. The aspect ratio changes depending on device orientation and type. I need to fit my custom view so that it takes maximum space in the container, but retains the 1:1 aspect ratio.
I would like to set the constraints in IB rather than code if possible. I have the following constraints:
Vertical centering in the container
Horizontal centering in the container
Aspect ratio (1:1)
Content mode set to scale to fill
I tried various things to make the custom view fit the container, which give me IB layout errors, for example:
Width <= container width
Height <= container height
I can't set any of the sizes equal, because I don't know if the container is vertical or horizontal...
This seems like a basic task, but I can't figure this out. What is the best way to fit square in a rectangle?
Keep the constraints you already have, and add new constraints:
width and height equal to the superview, but with lower priorities than the aspect ratio constraint
width and height <= the superview size
first three constraint are right., remove others and set the
leading or trailing and
top or bottom
constraint to superview
Now select the newely added constraint and make them >= (greater than or equal) to 0.
now you'll need to give the width or height constraint to your view which it can have it from its subview's same as we do it for scroll view or give a width equal to 320 to you view and make it also greater than or equal to.