verticallyBetween act like "below"

[Patrick Bonneau]

I tried to use verticallyBetween to position one view vertically centred between two other view and no matter the combinaisons I tried, the view was always stick immediately below the top view

Exemple:

view1.pin.top().horizontally().height(100)
view2.pin.bottom().horizontally().height(100)
betweenView.pin.verticallyBetween(view1, and: view2)

Expected: betweenView is in the middle of view1 and view2
Reality: betweenView is directly below view1

[Patrick Bonneau]

@lucdion 👋 😄

[Luc Dion]

Hi @thermech, long time no see!

1. Are you sure there is some some vertical space available between your view1 and view2? In that case you should have a warning in your console: "... there is no vertical space between these views...".
2. The betweenView may have an empty width. But I'm pretty sure that is not your issue.

Also, verticallyBetween will stretch the view vertically. If you want to set a specific height and center the view between view1 and view2, you must to something like that:

betweenView.pin.horizontally().verticallyBetween(aView, and: bView).height(50).align(.center)

Here is my result on a sample app:

        aView.pin.top().horizontally().height(100)
        bView.pin.bottom().horizontally().height(100)
        aViewChild.pin.horizontally().verticallyBetween(aView, and: bView).height(50).align(.center)

If you still have an issue, you can share me your full view source code, there is maybe something else.

[Patrick Bonneau]

Ok, I think I got it, in my exemple I dont have .align(.center)!

So what I understood is that verticallyBetween only position a view between two others, it's not "between centered"

I think this part is not intuitive as I didn't know I had to add .align

Would it be better to add a valign optional parameter (like the align param) ?

Also, does it make sens that it's not "valign center" by default, if bottom/top are selected, shouldn't we use pin.bottom/pin.top?

[Luc Dion]

No because by default verticallyBetween will stretch the view's height to fill the space between the two views. If you don't want this behavior you need to specify the view's height (ref: .height(50)).

Also, by default the vertical alignment is always top, not center.

Why not adding a parameter valign? The reason is that PinLayout API is based on aggregation of commands and not by adding more parameters:

// PinLayout API using `.align(...)`
aViewChild.pin.horizontally().verticallyBetween(aView, and: bView).height(50).align(.center)
// VERSUS your proposed API
aViewChild.pin.horizontally().verticallyBetween(aView, and: bView, valign: .center).height(50)

It would do the same thing, but the first one use .align(...)` command, which can be used in many other situations.

[Patrick Bonneau]

Thanks @lucdion