How to do this custom auto layout?

Question

I am trying to get this layout to work but have failed in these past two days trying.

All the labels have a constant height. All squares on the left are images of icons that are not important.

My problem is regarding the Y axis. This is a frame of an iPhone SE. I need it to expand accordingly to bigger screens like iPhone 8 Plus and iPhone X. Similarly, I could design it in Interface Builder for iPhone X and it should shrink reasonably until iPhone 4s. As far as my understanding goes, size classes don't work on iPhone - iPhone variation since they are all compact width and regular height.

These vertical lines highlighted in blue are not visible in the real app. They are an attempt to always center the black horizontal lines between two UILabel frames. So, what I really need is: if the screen gets smaller, the blue vertical lines should shrink. If the screen gets larger, the blue vertical lines should expand. The problem arises when I try to also make the UITableView have a variable height.

Anyone has any ideas to how I could solve this problem? It's very important to me.

Are you showing a table view, with 4 rows? And the last row is a cell with a table view inside the cell? Or, are these subviews with one or two labels + image, and the bottom subview has a table view as a subview? Two suggestions: 1. show a better diagram of what objects you are trying to lay out, and 2. show another image of how you want it to look on a taller screen. — DonMag, Sep 28 '17 at 18:30

score 0 · Answer 1 · answered Sep 28 '17 at 17:45

If you want them to be the same proportion depending on your screen, you can make them with multiplier:

Try make them the same height as your container view, but with multiplier 0.15, or something. If they equal, you need one constraint for 1:0.15 and all others to be equal to this one

Au Ris · Accepted Answer · 2017-09-28T20:58:56.757

There are many ways to achieve what you're asking for, but UIStackView is great for these kind of things. To answer your question in detail would take too long, but here's a screenshot of a quick mockup in interface builder, perhaps you can figure it out.

I didn't quite understand what you meant by those blue lines, in my example the tableview height is dynamic as its hugging priority is lower than other elements. But you could give desired height to each element and set stackview distribution property to "fill equally", then the stack view will fit your screen in y axis and will create equal spacing between elements.

and the simulator screenshot:

And here I gave each container view a static height and set the main stack view distribution to "equal spacing", as you can see it adjusts the spacing between the container views:

How to do this custom auto layout?

2 Answers2