New component planned : SafePosition

[5argon]

If done right, it may serve the purpose of #18 as well. I have think about the design more. I think it should be a new component that :

• Instead of driving itself's RectTransform (and rely on child object anchoring to it), instead this component will drive all its child similar to HorizontalLayoutGroup, etc.
• This allows us to select which cutout / side of the screen to based on, on the component. Then further allows us to customize the child by attaching something similar to how LayoutElement works.
• If on 2019.1 instead of .2, has a fallback to safe area. In effect, the previous point we need to select a side, not a cutout. Then that side will try to figure out how many cutouts are there, and what to do. We can't select a cutout, it's not ubiquitous enough. (For example if I made a field that says adapt to the top center cutout, now will fails on Galaxy S10 where the cutout is not at the center? If it is large enough (how much?) will it be considered center?
• Selecting a side works like adaptation component, where you can also choose to take account of an opposite side.
• The name should not contain the word "safe area" but instead "cutout". Because this should be cutout-first then fallback to safe area. SafeAreaPadding naming is correct because it only cares about safe area, and also cannot be extended to use cutouts. I think it is already completed on its own.
• It should have a concept of "fitting". What I want to use is something like : "do nothing if it fits in the top left corner without overlapping with any cutout, or move down if it overlaps."
• Fitting resolution by moving down (away from that side) seems to be always possible, but what about moving in parallel with the side? For example, I want the top-right anchored UI to instead move left instead of down, if the player used Galaxy S10+, which has a punched hole at the corner, moving left until the hole is not in the way.
• In effect, I may have to categorize the cutout into corner and center category. All category can make things move down, but only corner cutout could do fitting with down or parallel resolution mode.

I already have my use case. With only SafeAreaPadding, I designed so that the corner "Garden" button should be able to stay still at any situation.

This assumption is wrong, since a device like S10+ puts a hole there. So I need to put it under SafeAreaPadding and move down. However, it now looks not as good on iPhone X as it moves down even though there is enough space on the corner.

The solution is this new component which I will say, please try to "fit" the top right corner within this X width. If you can't, move it down. If on 2019.1 instead of .2 then always move it down.

This is getting very complicated...

[5argon]

The first one is planned to be SafePosition where it's spec is :

    /// <summary>
    /// Drive one axis (X or Y) of <see cref="RectTransform.anchoredPosition"> according to a selected screen edge.
    /// First, this position it right at the screen's edge. Check if the rectangle overlaps with what would cause problems?
    /// (e.g. out of safe area, occluded by cutouts)
    /// If there is any problem, resolve by moving the driven position axis perpendicularly away from that edge 
    /// until there is no problem.
    /// 
    /// Therefore the rectangle <see cref="RectTransform.sizeDelta"> of this object is important as it will be used to 
    /// determine if it collides with any <see cref="Screen.safeArea"> or <see cref="Screen.cutouts"> or not.
    /// 
    /// If you designed a component that was not depending their rect to the parent's size before,
    /// you may want to size the parent to enclose them properly to account them as its visual content.
    /// </summary>
    /// <remarks>
    /// "Safe" can be either input-safe (ensure inside <see cref="Screen.safeArea">),
    /// or visually safe (ensure inside <see cref="Screen.cutouts">).
    /// 
    /// The edge is searched by finding root <see cref="Canvas"> travelling up from this object.
    /// 
    /// The <see cref="RectTransform.anchorMin">, <see cref="RectTransform.anchorMax">, 
    /// and <see cref="RectTransform.pivot"> are not driven, 
    /// it is your job to ensure that the driven anchored position
    /// results in an entirely of your content really being in the safe zone.
    /// 
    /// (e.g. if you choose top edge, the anchors should be along the top edge of your rect as well
    /// as the Y pivot should be 1, so the anchored position now refers to your top edge 
    /// and your content expands downwards. Though you can get creative and do something else.)
    /// 
    /// To resolve problems by moving/doing something parallel to the edge instead,
    /// this is not what this component supports. There are plans for that in the future.
    /// </remarks>

[buihuuloc]

is there any update for that?

[5argon]

Nope! Completely busy and still zero progress.

2020年1月23日(木) 21:43 Loc Bui [email protected]:

is there any update for that?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/5argon/NotchSolution/issues/35?email_source=notifications&email_token=ABLEGHHL73RAXUTWPX34GVLQ7GUIVA5CNFSM4IK3IXRKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEJXSYOQ#issuecomment-577711162, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABLEGHGL4LSYNOFRUTYFL2TQ7GUIVANCNFSM4IK3IXRA .