[Xamarin] Xamarin.Forms으로 UI 만들기 - 레이아웃

HTML, CSS로 화면을 만드는 경우 <div> 등의 태그로 뼈대를 만들고 CSS로 모양이든 배치든 하는 스타일을 넣지만

자마린의 경우, 태그 자체에 스타일이 들어있다(?) 라고 표현하면 되려나.

 

예를 들어 아래의 화면을 만든다면

 

 

원래라면, 부모 <div> 안에 자식 <div>들이 들어있는 형태로 html을 만들고

css로 가로 스크롤되는 형태나 카드들을 가로로 배치되게끔 만들것이다.

 

자마린의 경우라면 <ScrollView> 안에 <FlexLayout> 안에 <StackLayout>들을 넣어 xaml을 만들고

자마린 스타일 속성값들로 색이나 모양을 만들것이다.

 

자마린에서는 스크롤을 원하는 영역은 <ScrollView>로 감싸야한다.

그리고 가로스크롤을 원하면 HorizontalScrollBarVisibility 속성을 추가해주면되고 기본값은 VerticalScrollBarVisibility(세로스크롤)이다.

카드들을 가로배치 하는것도 원래라면 css 속성으로 만들면되지만 자마린의 경우 <FlexLayout> (display: flex 와 같다고 보면됨) 태그를 사용하는 방법도 있고, <StackLayout>으로 만들고 Orientation="Horizontal" 속성을 추가하는 방법도 있다.

css에서도 같은 모양이지만 방법은 여러가지인것처럼.

 

이처럼 자마린은 특정 레이아웃에 필요한 특정 태그들이 각각 다르다.

display:block, display: grid, display: flex, display, position: absolute 등을 태그화 시켜놨다고 보면된다.

따라서 레이아웃에 맞는 태그를 사용하여 xaml을 만들어야한다.

 

01 StackLayout

StackLayout은 가장 기본적으로 많이 사용하는 태그이다. html에서 div 정도로 생각하면되겠다.

처음 자마린을 접하고 화면을 만들다보면 ['Content' 속성이 두 번 이상 설정되었습니다.] 이런 오류를 만날때가 종종 생길 수 있는데, 그럴때는 StackLayout으로 감싸주면된다.

Orientation 속성을 사용하여 자식들을 가로로 나열할것인지 세로로 나열할것인지 정할 수 있다.

내가 처음에 몰랐던것중에 하나는 StackLayout에 디폴트값으로 Margin이나 Padding같은 Spacing값으로 6이 설정되어있다는 것이었다. 나중에 알게되고 리소스 딕셔너리에 Spacing값을 초기화 시킨다음 그동안 만들었던 페이지들의 Margin값이나 Padding값들을 다 수정했었다;; 

자세한 설명은 https://learn.microsoft.com/ko-kr/xamarin/xamarin-forms/user-interface/layouts/stacklayout 참고

 

 

02 FlexLayout

FlexLayout은 css의 display: flex 를 생각하면된다.

Direction, AlignItems, JustifyContent 등 css에서 사용하는 flex 스타일 속성도 사용가능하다.

자세한 설명은 https://learn.microsoft.com/ko-kr/xamarin/xamarin-forms/user-interface/layouts/flex-layout 참고

 

 

03 Grid

Grid는 css의 display: grid 를 생각하면된다.

<Grid>태그 안에 <Grid.RowDefinitions>, <Grid.ColumnDefinitions> 태그를 사용하여 RowDefinition, ColumnDefinition을 설정한뒤, Grid.Row, Grid.Column 속성으로 배치하면된다.

 

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="48" />
        <RowDefinition Height="48" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="100" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>

    <Button Grid.Row="0" Grid.Column="0" Text="버튼 01"></Button>
    <Button Grid.Row="0" Grid.Column="1" Text="버튼 02"></Button>
    <Button Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" Text="버튼 03"></Button>
</Grid>

 

자세한 설명은 https://learn.microsoft.com/ko-kr/xamarin/xamarin-forms/user-interface/layouts/grid 참고

 

 

04 AbsoluteLayout

AbsoluteLayout은 position: absolute 와 비슷한 기능을 가진 태그다.

AbsoluteLayout.LayoutBounds로 위치 및 크기를 설정한다.

AbsoluteLayout.LayoutFlags은 기기에 따라 위치 및 크기를 비율로 사용할 것인지 선택하는 속성이다.

 

이분이 쉽게 설명을 잘 해주셨다 https://panpro.tistory.com/374

공식페이지 설명은 https://learn.microsoft.com/ko-kr/xamarin/xamarin-forms/user-interface/layouts/absolutelayout 참고

 

 

05 RelativeLayout

솔직히 AbsoluteLayout과 RelativeLayout의 차이를 잘 모르겠다.

 

자세한 설명을 https://learn.microsoft.com/ko-kr/xamarin/xamarin-forms/user-interface/layouts/relativelayout 참고

AbsoluteLayout과 RelativeLayout의 차이는 https://stackoverflow.com/questions/39178880/absolute-layout-vs-relativelayout-in-xamarin 참고