freshOS / Stevia

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

Update the Wiki, more complex examples #138

Open norbdev opened 4 years ago

norbdev commented 4 years ago

The title says everything.

s4cha commented 4 years ago

@norbdev I'm all for it, could you elaborate with the type of layout you maybe had trouble with?

GoldenJoe commented 4 years ago

For one, I think you should have an example specifically explaining that layout doesn't create constraints to the parent by default. This has tripped me up many times:

// No vertical constraint to parent. myView will have a height of 0 without additional constraints.
layout(
    |myView|
)

// No vertical constraint to parent. myView will have a height of 200, but the parent will still have a height of 0 without additional constraints.
layout(
    |myView|
)
myView.Height == 200

// myView will match the height of the parent.
layout(
    0,
    |myView|,
    0
)

// The parent will match the height of myView
layout(
    0,
    |myView|,
    0
)
myView.Height == 200
norbdev commented 4 years ago

@norbdev I'm all for it, could you elaborate with the type of layout you maybe had trouble with?

sdykae commented 4 years ago

@s4cha how can I control the overlapping behavior, I was thinking something like ZStack behavior but couldn't find examples :(

s4cha commented 4 years ago

Hi @sdyalor, Stevia is pure Autolayout so you can always (and should) use the native way. The simplest way being changing the view's layer's zPosition value like so :

import UIKit
import Stevia

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        let v1 = UIView()
        v1.backgroundColor = .red
        let v2 = UIView()
        v2.backgroundColor = .blue

        view.subviews {
            v1
            v2
        }

        v1.size(100).centerInContainer()
        v2.size(100).centerHorizontally(offset: 50).centerVertically(offset: 50)

        // v1.layer.zPosition = 1 // This makes the red (v1) view show on top
    }
}

Another solution would be to use UIView insertSubview(v1, aboveSubview: v2) and relayout afterwards.

Hope this helps,

gerchicov-vg commented 1 day ago

@s4cha what about the same example but with "Visual Layout Api"?