How to overlap one layout over another, so that two have different z-index?

[YoonjaeYoo]

Hi, this is my first time using LayoutKit and I have trouble overlapping two layouts. I want to overlap two Layouts(above for buttons, below for background image). There's only one Layout with multiple sublayout, which is StackLayout but I can't seem to get it working.

FYI, what I want to achieve is possible in Android with FrameLayout.

Thank you.

[AlexLittlejohn]

Perhaps something like an InsetLayout<UIImageView> with with a StackLayout passed in as a sublayout

For example:

class LoginScreenLayout: InsetLayout<UIImageView> {
    init() {

        let insets = UIEdgeInsets(top: 64, left: 32, bottom: 64, right: 32)
        let sublayout = loginStackLayout()

        super.init(insets: insets, sublayout: sublayout) { view in
            view.image = #imageLiteral(resourceName: "background")
            view.contentMode = .scaleAspectFill
        }
    }
}

func loginStackLayout() -> StackLayout<View> {

    let imageLayout = SizeLayout<UIImageView>(width: 200, height: 200, alignment: .center) { view in
        view.image = #imageLiteral(resourceName: "logo")
    }

    let labelLayout = LabelLayout(text: "Sign up", alignment: .center) { view in
        view.textColor = .white
    }

    let insets = UIEdgeInsets(top: 16, left: 24, bottom: 16, right: 24)
    let buttonLayout = InsetLayout(insets: insets, alignment: .center, sublayout: labelLayout) { view in
        view.backgroundColor = .blue
    }

    let stackLayout = StackLayout(axis: .vertical, distribution: .fillEqualSpacing, sublayouts: [imageLayout, buttonLayout])

    return stackLayout
}

and then use it

let layout = LoginScreenLayout()
layout.arrangement(origin: .zero, width: view.frame.width, height: view.frame.height).makeViews(in: view)

Produces this:

[YoonjaeYoo]

@AlexLittlejohn Does your code ensure overlapping of layouts in z-index? What's the essential code?

[staguer]

@YoonjaeYoo The layout<->sublayouts relationship translates into superview<->subviews relationship. So the button and logo are subviews and subviews get rendered on top. Does this help?

[YoonjaeYoo]

@AlexLittlejohn @staguer I got it perfectly. Thank you both guys!