Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Padding or margin for UILabels in UIStackView

I want to add margins or paddings on the right of some nested UILabels

View hierarchy

like shown here:

Target layout

Using trailing spaces on the labels seems wrong and old-school somehow.

Any way to make that more elegant on interface builder?

like image 739
hanneskl Avatar asked Oct 25 '15 07:10

hanneskl


People also ask

How do you add margins to UILabel?

Just use a UIView as a superview and define a fixed margin to the label with auto layout. If you're in IB, now is the time to remember the menu Editor -> Embed In -> View. Just select your UILabel first :) This is by far I see as the easiest solution.

How do I label a padding in Swift?

If you have created an UILabel programmatically, replace the UILabel class with the PaddingLabel and add the padding: // Init Label let label = PaddingLabel() label. backgroundColor = . black label.

How do I add padding to labels in Xcode?

You should use a container view and place the label inside of that. Then add constraints for the label, which will be equivalent to a padding. Select the label and click the constraints panel at the bottom right in the Storyboard file.

What is Stackview alignment?

A layout where the stack view aligns the center of its arranged views with its center along its axis. case leading. A layout for vertical stacks where the stack view aligns the leading edge of its arranged views along its leading edge.


Video Answer


1 Answers

Just add a spacer view at the end of the horizontal stack view. Set its color to clear. Give it a width constraint to fix its size.

Or, judging from your screen shot, it looks like you could just move the right edge of the top-level stack view (child of MasterCell) to leave a margin.

UPDATE

You can set layout margins on a stack view, in the Size inspector:

layout margins

Maybe you just want to set the right layout margin.

If you set the stack view's layout margins in code (the layoutMargins property), you must also set its layoutMarginsRelativeArrangement property to YES.

like image 131
rob mayoff Avatar answered Nov 15 '22 18:11

rob mayoff