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
image1101×664 70 KB

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

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

image
image800×238 50.6 KB 

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