view to take all remaining space storyboard

Question

How can we design a UI with Storyboard to make a view take all remaining space?

Design Requirements:

I have a view with two labels (Data and New). I want New to be displayed at the bottom and Data to take all remaining space inside the view.

I ended up designing the storyboard like this, which works fine, but I have questions and doubts:

• The attached screenshot shows a vertical spacing constraint of 10px between both labels, but the UI preview shows +55.6. Why is this happening?
• Is there a better way to design the same UI?

Answer 1

... and then take the Data to take all remaining space

This means Data label should have a lower vertical content hugging priority than the New label.

why UI preview shows +55.6?

Because it is designed for prototyping it is telling that what you are seeing in the preview has exactly +55.6 with what you are going to see at runtime.

_{⚠️ Note that it's about the spacing, not the height. On dynamic cells settings, the rowHeight set on the UITableView always overrides the individual cells' rowHeight.}

is three better way to design the same UI?

There is no such a thing as better. You should pick what it most suits you and your team. For example:

• You can use StackView to reduce the constraints, but it may have less dynamicity than autolayout.
• You can use Xib files to enhance reusability, but they may be a bit old-style and also make your project file bigger
• You can use code to reduce Git conflicts, but you may lose the drag-and-drop feature
• etc.

Each method comes with its cons and pros.

_{In MY opinion (which is not the best), go with the StackView when your layout is vertical or horizontal. This way you also prepare for SwiftUI regular layout mechanism.}