XAML HorizontalStackLayout 양쪽 정렬 당연히 되야 하는거 아닌가요?

🖥️ UI/UX 프로그래밍 Q&A Xamarin/MAUI Q&A
7

image

// MAUI 코드입니다. 질문자와 다른 플랫폼으로 추측 됩니다.
<Frame>
    <VerticalStackLayout>
        <Grid 
            Background="BlueViolet"
            HorizontalOptions="Fill">
            <Label 
               Background="Aqua"
               FontAttributes="Bold"
               FontFamily="Bison"
               FontSize="Title"
               HorizontalOptions="Start"
               Text="Result:" />
            <Label 
               Background="Gray"
               FontAttributes="Bold"
               FontFamily="Bison"
               FontSize="Title"
               HorizontalOptions="End"
               Text="NORMAL"/>
        </Grid>
    </VerticalStackLayout>
</Frame>

Grid를 이용해서 할 수 있긴한데 좋은 방법은 아닙니다. ;; (Grid는 자식의 크기에 따라 Resize를 반복 할 수도 있기 때문에 App Performance측면을 고려해봐야 합니다.)
(다른 안좋은 방법으로는 Label사이에 Margin 또는 Space를 넣는 겁니다.)

일단 조사한 부분에 대해서 말씀드리겠습니다.
의도한대로 UI가 그려지지 않아서 많이 답답하실 것 같구요. 앞으로도 그럴수 있기 때문에
기본 배경지식이 필요하다고 생각합니다.

(위에 문서를 추천 드립니다.)
(질문자의 의도를 구현 할 수 있게 설계된 UI를 선택하는 것이 좋습니다. 의도에 맞지 않은 UI를 억지로 끼워 맞추면 다른 문제가 생길 가능성이 큽니다.)

image

사진안의 크고 작은 네모난 박스를 보면 질문자가 원하는 것을 제공해주는 것은 Grid, FlexLayout정도가 될 것 같구요, 어떻게 꼬아서 잘하면 ReleativeLayout로 가능 할 것 같습니다.

Grid의 경우 자식요소의 크기 변경 및 추가가 되는 구조라면 다른 방식을 고려 해보아야하구요.
자유롭고 의도대로 표현 및 기기에 영향 받지 않는 UI를 구성하고 싶다면 FlexLayout을 추천 드립니다.

image

// Can`t build with this code
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="StackLayoutDemos.Views.AlignmentPage"
             Title="Alignment demo">
    <StackLayout Margin="20">
        <Label1 Text="Start"
               BackgroundColor="Gray"
               HorizontalOptions="Start" >
               <ChildLayout HorizontalOptions="End" />
        </Label1>
        <Label2 Text="Center"
               BackgroundColor="Gray"
               HorizontalOptions="Center" />
        <Label3 Text="End"
               BackgroundColor="Gray"
               HorizontalOptions="End" />
        <Label Text="Fill"
               BackgroundColor="Gray"
               HorizontalOptions="Fill" />
    </StackLayout>
</ContentPage>

UI의 부모와 자식을 잘 고려야합니다. 자식은 부모를 상속 받기 때문에 정렬 또한 상속 받을 수 있습니다.
Label1의 ChildLayout 을 End로 정렬을 해도, 부모가 Start로 정렬 되어 있기 때문에 Child의 정렬 설정이 퇴색됩니다…

글로 설명하는게 어렵네요 ㅎㅎ;;

6개의 좋아요