iOS 10 square UIIMageView in Stackview breaks Autolayout when hidden - ios

I have a UITableViewCell with something I thought was a pretty straight forward layout. The main content is a UIStackView (horizontal). In it I have UIImageView and two UILabels. On the UIImageView I have 2 constraints. One is an aspect ratio of 1:1 to make it square and the other is a height constraint to 55 points. The UIStackView is pinned to all sided of the cells contentView.
Now when I don't have an UIImage to display in the UIImageView, I simply call imageView.isHidden = true and the UIStackView hides the image. At the same time, on the Console I see AutoLayout breaking. It's telling me that it cannot satisfy the height of 55 together with the width of 0.
Well makes sense because due to the aspect ratio, the UIImageView wants to have a width of 55 as well. However, on the device itself I don't see any weird glitches. It exactly behaves as I would expect it.
So the question is
Is this a bad thing and how would I solve this with the least amount of code?
By the way, I'm using a dynamic height self sizing UITableView and let AutoLayout determine the height of my cells. It might happen that the UIImageView is the only content of the cell.

It's not a bug StackView Adds constraint to it's arrangedSubviews. when you call the hide on your view which in your case is the imageView. stackView tries to set the height Constraint to 0 but the Height constraint that you have added conflicts with the one which was added by stackView.
you can change the Priority of the height constraint to something less than 1000 it will fix the conflicting issue

Related

What constraints should single UIImageView have in UITableViewCell?

I just want to display UIImageView with 150 px height and 100% width of content view in UITableViewCell. I just knew that I am not able to do this, because I clearly do not understand how Auto Layout works. First of all, I gave trailing and leading constraints, because image should have full width. Ok. AutoLayout still requires constraints, because it cannot solve its inner equation. Ok, then I gave 150 px height constraint. It still requires one additional constraint. And I really do not know which constraint should I give. Let it be vertical centering constraint, but in this case my image will not appear in its own full height. Let it be bottom constraint, but it also ruins my design as top constraint. So, what is the answer?
Here is something that I cooked up on Xcode. Hope this helps.

UIStackView within UIScrollView is cut off

I'm trying to use a UIStackView within a UIScrollView and I was hoping someone could point me in the right direction in creating the right constraints because I can't figure out what the problem is.
These are my constraints and ViewController structure.
So DestCont is a UIView that has a fixed height and ContentCont should take up the rest of the space, which could be (and is) larger than the screen so it should be able to scroll.
When I test it out in the simulator, I have the following problem. (Resized it so it would fit in the 2MB cap)
The green is the Root View and the black color is the ScrollView, as you can see, it cuts off the bottom portion of the ContentCont view.
EDIT
I changed the constraints, removed the fixed UIStackView height, but now, it doesn't show the bottom UIView that's in the UIStackView:
From your screenshot we know that you have set the StackView's height constraint equals to the self.view's height. Then the height is fixed(equal to one screen's height), even though its content view's height may be larger than the screen.
And UIScrollView will calculate its contentSize depending on its content, so in your case its contentSize's height will always be one screen heigt.
Delete this height constraint, let the ContentCont's content decide the height of it. Also please make sure your constrains in your ContentCont are correct.
I ended up with being fine that just my "ContentCont" UIContainerView will scroll and fixed the switching by using the following tutorial: https://spin.atomicobject.com/2015/09/02/switch-container-views/.

autolayout view gets overlapped on smaller devices

Basically I have one view with some height x
and 4 other views with same height y all these 5 views are vertically one after another with 10 px space
all these views have again some child views which depends on them.
For this scenario stackview is ideal but it support starts from iOS 9 unfortunately I have to support from iOS 6
so basically I fixed all the views with leading,trailing,top,bottom and height constraint...
it works good in iPhone 7s ... but in iphone 4s the view gets overlapped on each other
in iphone se the views are very much congested..
I was always thinking the height will change according to the screen size for iPHone 4s but that didn't happen
How can I work this out ?
There are two ways to solve the problem you are facing.
First:
Instead of giving a fixed height to any of your UIView you can use a proportional height constraint. Select your UIView and control + drag from your UIView to the main superview. Select equal height constraint. Now, double click the height constraint and set the multiplier to 0.15 or any value you seem nice. This will ensure the view thus created is always 0.15 times the entire view's height. Now you can create your other views either proportional to this view following the same steps or to the superview.
Second:
(I prefer this approach as for items as sometimes you need to create forms the above approach might still push elements off the screen).
This will use a UIScrollView. To your main view add a UIScrollView and add a leading, trailing, top and bottom constraint to your superview. Add a UIView to this UIScrollView and give it a leading, trailing, top and bottom as well. Additionally give it a equal height and width constraints to the superview of the UIScrollView with a low priority of like say 250. Now add all your elements inside this UIView however you seem fit. With fixed height, proportional height whatever and happily run it. But ensure you add a bottom of >= a minimum value for your bottom most view.
The screen will automatically become scrollable if the content will go off screen otherwise it won't be scrollable at all.
fixed all the views with leading,trailing,top,bottom and equal height constraint instead of only height(not give fixed height to any view)

UITableViewCell with two UIStackViews

I'm facing a layout issue with a UITableViewCell which consists (from top to bottom) of (1)a UIStackView, (2)a UIView with a fixed height and (3)another UIStackView. In the top UIStackView I want to place a few instances of UILabel vertically, depending on some datastructure. These labels can vary in height. In the bottom UIStackView I want to place a few instances of UIButton vertically. This number also depends on some data structure.
The problem has to do with AutoLayout (at least I think it does). How would I set up the constraints in such a way, that the UITableViewCell creates both enough space for the top UIStackView and the bottom UIStackView when it needs to be placed on screen. The layout of the cell is defined in a separate XIB file.
So far I have a heightconstraint on the top UIStackView. Depending on the frameheight of the labels the height of the stackview is adjusted. But it turns out, that the height always has the same value. I know this, because I need two instances of this particular UITableViewCell in my TableView.
The bottom UIStackView does NOT have a heightconstraint and has always a correct layout.
Do I need to adjust the properties for vertical hugging/compression resistance priority?
Any help is greatly appreciated.
Maybe I misunderstood your issue, but why are you fixing the height of the top StackView if it's height is supposed to be dynamic ? You should remove this constraint and set intrinsic sizes (below "Content compression resistance priority") of both StackView to "placeholder" to keep IB happy.
The top StackView will then behave the same as the bottom one, provided you don't have other constraints issues.

Resize UITextView inside a UITableViewCell with iOS Autolayout

My Goal
I'm creating a custom UITableViewCell (MessageCell), and I'd wish to have my UITextView resizing both in width and height whenever the cell changes its size, while keeping some basic constraint like margins to the edges.
Note : I also change my cell's height in the heightForRowAtIndexPath method depending on the content which will be placed into UITextView.
What I tried
Here are all the constraints currently applied & the cell :
I tried :
With a UILabel.
To fix a Vertical Space from the bottom, thinking it would change the height to fit all the constraints.
To override Height with an User Constraint Height >= 43 (my initial height), but the purple-automatic Height is re-created again whenever I do this.
To find a solution on SO first, but didn't find a case like (even if the UITextView's height's resize with autolayout seems to be a frequent issue).
Plenty of combinations of various & random constraints until my fingers bleds.
How it render now
So...
If someone has any clue or guideline to achieve my goal, I'd appreciate!
I might add, I'm totally new to Autolayout & constraints. My reference : Ray Wenderlich's awesomeness
You need to get rid of that height constraint that the text view has. Make sure you have constraints to something above and below the text view (usually the top and bottom of the cell), and then you should be able to delete that height constraint.

Resources