freshOS / Stevia

:leaves: Concise Autolayout code
https://freshos.github.io/SteviaDocs/
MIT License
3.38k stars 213 forks source link

Stick two views with space between #146

Open sdykae opened 4 years ago

sdykae commented 4 years ago

|-a - 10 - b-| Above work fine but forces the entire width How to achieve this? I was working with

a.Left == a.Right This way is like SnapKit but is there a way to put padding in the middle ?

s4cha commented 4 years ago

@sdyalor can you provide a image/ visual representation of want you want please ?

cowgp commented 4 years ago

@sdyalor your example forces the entire width because you are using pipes on both sides which creates a constraint with default margins to the edges. With |-a-10-b-| view a is given a left constraint to it's container's left + default margin. view b is given a left constraint to be view a's right + 10 AND a right constraint to be it's container's right - default margin. If you removed the pipes and just did a-10-b then they will not span the whole width. They would likely be left aligned because autolayout has no other instructions of how to lay them out.
if you wanted them centered with 10 pixels between them it's easier to to use the dot notation and do:

a.Right == parent.Center - 5
b.Left == parent.Center + 5

where parent might be an implied "self" depending on the complexity of your layout.

NikKovIos commented 3 years ago

image

Now:

imageView.Trailing == titleLabel.Leading + 12 imageView.Trailing + 12 == titleLabel.Leading image

and

imageView.Trailing == titleLabel.Leading - 12 imageView.Trailing - 12 == titleLabel.Leading image

It's a little bit strange. I wait that it would be like imageView.Trailing == 12 + titleLabel.Leading or imageView.Trailing + 12 == titleLabel.Leading to work as i need, but it don't. I think it should be in wiki.

BayramInanc commented 2 years ago

@NikKovIos when you go right direction, x coordinates increases. If you go left side x coordinates decreases.

In this picture, label's leading edge should be greater than red views's trailing edge. Why? The reason is label is on right side according to red view.