앱을 제대로 만드려면 화면 크기나 해상도가 다른 여러 기기 모두에서 동일한 디자인을 유지해야 하는데 이를 위해 Xamarin.Forms 에서는 유연한 레이아웃 컨테이너들을 제공한다. 이 컴포넌트들은 UI 컨트롤들의 크기 및 위치를 자동으로 계산해주고, 사용자가 기기를 회전하거나 화면 크기를 변경할 경우 자동 재계산 해준다. 이러한 레이아웃 컨테이너에는 StackLayout, Grid, AbsoluteLayout, RelativeLayout 이 있는데 그 중 StackLayout 과 Grid 이 가장 많이 사용된다.
레이아웃 컨테이너 종류
Xamarin.Forms 에서 제공하는 레이아웃 컨테이너들은 자동 계산이 되기 때문에 각각 UI 컨트롤의 크기를 지정할 때 일반적인 Width, Height 가 아닌 WidthRequest, HeightRequest 속성을 사용하여 크기를 지정하게 된다. 그리고 컨트롤들의 가로, 세로 정렬을 위해 VerticalOptions, HorizontalOptions 속성이 제공된다.
컨트롤 가로, 세로 속성
플랫폼들마다 사용하는 해상도 처리 방식이 아래와 같이 틀리기 때문에 아래와 같이 WidthRequest, HeightRequest 를 지정하면 화면 비율 및 플랫폼에 따라 크기가 틀려지지만 동일한 디자인을 유지하게 된다.
해상도 처리방식
- 윈도우폰 – Effective pixels
- 아이폰 – Points
- 안드로이드 – Density-independent pixels
플랫폼별 컨트롤 크기
많이 사용되어지는 StackLayout 과 Grid 에 대해 잠깐 살펴보겠다.
StackLayout 은 아래와 같이 UI 컨트롤들을 세로 방향으로 추가해 가는 방식인데 간단하여 프로토타이핑에 많이 사용되어진다.
StackLayout 방식
Grid 는 테이블과 동일하다고 생각하면 될 듯하다. <Grid> 태그 안에 각 행, 열의 크기를 미리 지정할 수도 있고 각 UI 컨트롤이 들어갈 셀의 위치를 Grid.Row, Grid.Column 으로 지정하면 된다. HTML 의 RowSpan, ColumnSpan 등과 같은 속성들을 사용하여 유연하게 컨트롤들을 배치시킬 수 있다.
Grid 방식
전반적인 레이아웃 컨테이너 및 컨트롤들에 Spacing, Padding, Margin 과 같은 화면 디자인에 필요한 속성들도 사용할 수 있는 걸로 보아 웹 디자인을 간단하게 이해하고 있으면 이해가 더 수월하리라 생각된다.
Happy Coding!