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

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

HorizontalStackLayout 내부에 하나는 Start, 다른 하나는 End 로 하면
당연히 양쪽으로 정렬되어야 하지 않나요??

            <Frame>
        <VerticalStackLayout>
          <HorizontalStackLayout BackgroundColor="BlueViolet" HorizontalOptions="Fill">
            <Label BackgroundColor="Aqua"
                   FontAttributes="Bold"
                   FontFamily="Bison"
                   FontSize="Title"
                   HorizontalOptions="Start"
                   Text="Result:" />
            <Label BackgroundColor="Gray"
                   FontAttributes="Bold"
                   FontFamily="Bison"
                   FontSize="Title"
                   HorizontalOptions="Fill"
                   HorizontalTextAlignment="End"
                   Text="{Binding ResultText}" />
          </HorizontalStackLayout>
          .....

제가 잘못알고 있는건가요??;;;

제목 없음

2개의 좋아요
2
  • MAUI 관련 질문으로 보여 적절하게 카테고리를 변경했습니다.
  • 질문 내용의 이미지가 정상 표시되지 않아 보이도록 수정하였습니다.
3개의 좋아요
3

두번째 Label의 size를 텍스트보다 크게 지정한 후 HorizontalTextAlignment 값이 Start, End일 때,
UI를 비교해보시는게 좋을 것 같네요

1개의 좋아요
5

질문자는 아마 보라색 배경을 그대로 유지한 상태로 NORMAL글자를 보라색 영역의 오른쪽 끝으로 옮기고자 하는 것으로 보입니다.

1개의 좋아요
6

네 그렇게 보입니다 ㅎㅎ
해당 코드에서 HorizontalTextAlignment는 Label 내부의 정렬을 설정합니다.
질문자는 HorizontalStackLayout의 정렬을 변경하고 싶은거 같은데,
Label의 정렬을 변경하니 의도대로 UI가 그려지지 않는 것으로 보이구요.
HorizontalOptions="Fill"으로 Text의 영역이 Label의 영역과 동일하기 때문에 Stat, End의 차이가 없어서 아무런 동작을 하지 않는 이상한 코드라고 생각 할 가능성이 높습니다.

양쪽으로 정렬하는 코드를 드리고 싶은데 현재 그럴 수 있는 상황이 아니라서;;
간단하게 답변을 드렸습니다.
솔루션을 주면 당장 이 문제에 대해 해결이 되지만,
의도대로 되지 않는 UI로 오는 고통, 답답함이 해결 되지는 않습니다.
분명히 맞게 한거 같은데 왜 이상하게 그려지지?, 뭐가 잘 못 된거야등의 의문점을 풀어드릴 의도 였습니다.

1개의 좋아요
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개의 좋아요
8

고맙습니다~ 아직 퍼포먼스 따지고 그럴 단계가 아니라서;;;

UI 가 코드보다 더 어려운거 같습니다. 헉헉

<Frame>
  <VerticalStackLayout>
    <Grid ColumnDefinitions="*,*">
      <Label FontAttributes="Bold"
              FontFamily="Bison"
              FontSize="Title"
              Text="Result:" />
      <Label Grid.Column="1"
              FontAttributes="Bold"
              FontFamily="Bison"
              FontSize="Title"
              HorizontalTextAlignment="End"
              Text="{Binding ResultText}" />
    </Grid>
  </VerticalStackLayout>
</Frame>

image

3개의 좋아요
9

:+1:
배경색은 Background를 BackgroundColor로 변경해주시면 될 것 같아요

<Grid 
    BackgroundColor="BlueViolet"
    HorizontalOptions="Fill">
    <Label 
       BackgroundColor="Aqua"
       FontAttributes="Bold"
       FontFamily="Bison"
       FontSize="Title"
       HorizontalOptions="Start"
       Text="Result:" />
    <Label 
       BackgroundColor="Gray"
       FontAttributes="Bold"
       FontFamily="Bison"
       FontSize="Title"
       HorizontalOptions="End"
       Text="NORMAL"/>
</Grid>

UI는 말씀드린것 과 같이 의도와 알맞는 UI를 찾다보면 도움이 많이 되실 것 같아요.
퍼포먼스나 여러 문제점 등은 나중에 문제점이 있을 때 고려해보시는 것도 괜찮습니다.
App Performance, Best Practice 등으로 검색하면 관련된 포스팅, 문서를 찾으실 수 있을 겁니다.

1개의 좋아요