Table of Content
Grid
Grid는 요소를 행과 열 기준으로 배치하는 레이아웃이다. 요소 안에 Grid.Row와 Grid.Column 값을 정의하여 구현하며 그 기본값은 0이다.
주의해야 할 점은, 요소 안에 Grid.Row와 Grid.Column 값을 정의해도 그 요소에 Row와 Column 속성이 정의되는 건 아니라는 점이다. Grid 객체에 정의되는 것이다.
Grid 사용 예
키패드, 계산기, 메트로 스타일 디자인(Windows 8 이후), 포토 앨범 등
주요 속성
- RowSpacing: 행 여백 설정
- ColumnSpacing: 열 여백 석정
<?xml version="1.0" encoding="UTF-8"?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="MyFirstXamarinApp.GridPage" Padding="0, 20, 0, 0"> <Grid BackgroundColor="Yellow" RowSpacing="40" ColumnSpacing="40"> <Label Grid.Row="0" Grid.Column="0" Text="Label 1" BackgroundColor="Silver"></Label> <Label Grid.Row="0" Grid.Column="1" Text="Label 2" BackgroundColor="Silver"></Label> <Label Grid.Row="1" Grid.Column="0" Text="Label 3" BackgroundColor="Silver"></Label> <Label Grid.Row="1" Grid.Column="1" Text="Label 4" BackgroundColor="Silver"></Label> </Grid> </ContentPage>
실행결과
Grid.Definition
- 속성 요소 구문을 사용하여 행, 열의 속성을 정의
<?xml version="1.0" encoding="UTF-8"?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="MyFirstXamarinApp.GridPage" Padding="0, 20, 0, 0"> <Grid BackgroundColor="Yellow" RowSpacing="40" ColumnSpacing="40"> <!-- Grid의 RowDefinitions 속성에 대한 속성 요소 구문을 사용 --> <!-- 배치될 행의 개수만큼 차례대로 속성을 정의해주면 됨 --> <Grid.RowDefinitions> <RowDefinition Height="100"></RowDefinition> <RowDefinition Height="*"></RowDefinition> <!-- *: 다른 요소들에 비례하여 값을 설정 --> <RowDefinition Height="2*"></RowDefinition> <!-- 2*: 값을 *로 지정한 요소보다 2배의 값을 설정 --> </Grid.RowDefinitions> <!-- Grid의 ColumnDefinitions 속성에 대한 속성 요소 구문을 사용 --> <!-- 배치될 열의 개수만큼 차례대로 속성을 정의해주면 됨 --> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto"></ColumnDefinition> <!-- 값을 자동으로 설정 --> <ColumnDefinition Width="2*"></ColumnDefinition> <ColumnDefinition Width="*"></ColumnDefinition> </Grid.ColumnDefinitions> <Label Grid.Row="0" Grid.Column="0" Text="Label 1" BackgroundColor="Silver"></Label> <Label Grid.Row="0" Grid.Column="1" Text="Label 2" BackgroundColor="Silver"></Label> <Label Grid.Row="1" Grid.Column="0" Text="Label 3" BackgroundColor="Silver"></Label> <Label Grid.Row="1" Grid.Column="1" Text="Label 4" BackgroundColor="Silver"></Label> <Label Grid.Row="2" Grid.ColumnSpan="3" Text="ColumnSpan" BackgroundColor="Silver"></Label> <!-- 1개의 행과 3개의 열을 갖는 레이블 --> <Label Grid.Column="2" Grid.RowSpan="3" Text="RowSpan" BackgroundColor="Silver"></Label> <!-- 3개의 행과 1개의 열을 갖는 레이블 --> </Grid> </ContentPage>
실행결과
Grid – C#(Code-Behind)
캘린더 앱에서 달력을 구현한다거나, 사진 앱에서 사진을 실시간으로 가져오는 등의 동적인 작업이 아니라면 XAML을 사용하는 것이 좋다.
using Xamarin.Forms; namespace MyFirstXamarinApp { public partial class GridPage : ContentPage { public GridPage() { InitializeComponent(); var grid = new Grid { RowSpacing = 20, ColumnSpacing = 40, }; var label = new Label { Text = "Label 1" }; grid.Children.Add(label, 0, 0); // grid의 0x0 위치에 label 배치 /* label의 Row 및 Column Span 값 설정 */ Grid.SetRowSpan(label, 2); Grid.SetColumnSpan(label, 2); /* 이런 식으로 요소의 Row 및 Column 위치를 설정할 수도 있음 /* Add() 메소드를 사용한 경우 이 메소드에서 SetRow(), SetColumn() 메소드를 호출하므로 * 굳이 사용할 필요는 없으나 이런 정적 메소드도 있다는 언급만 잠깐 해봄... */ Grid.SetRow(label, 0); Grid.SetColumn(label, 0); /* 행, 열의 속성 정의 * 배치될 행, 열의 개수만큼 차례대로 속성을 정의해주면 됨 */ grid.RowDefinitions.Add(new RowDefinition { Height = new GridLength(100, GridUnitType.Absolute) }); grid.RowDefinitions.Add(new RowDefinition { Height = new GridLength(1, GridUnitType.Star) }); grid.RowDefinitions.Add(new RowDefinition { Height = new GridLength(2, GridUnitType.Star) }); grid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(100, GridUnitType.Absolute) }); grid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(2, GridUnitType.Star) }); grid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) }); Content = grid; } } }
연습문제 1: 전화걸기 UI
전화걸기 UI 만들어 보기
<?xml version="1.0" encoding="UTF-8"?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="MyFirstXamarinApp.GridPage" BackgroundColor="#354242"> <Grid Padding="40" RowSpacing="10" ColumnSpacing="10"> <Grid.RowDefinitions> <RowDefinition Height="2*"></RowDefinition> <RowDefinition Height="*"></RowDefinition> <RowDefinition Height="*"></RowDefinition> <RowDefinition Height="*"></RowDefinition> <RowDefinition Height="*"></RowDefinition> <RowDefinition Height="*"></RowDefinition> </Grid.RowDefinitions> <Label Grid.Row="0" Grid.ColumnSpan="3" FontSize="40" HorizontalTextAlignment="Center" TextColor="White" Text="01012345678"></Label> <Button Grid.Row="1" Grid.Column="0" FontSize="30" TextColor="#28282C" BackgroundColor="#FFF" BorderRadius="30" Text="1"></Button> <Button Grid.Row="1" Grid.Column="1" FontSize="30" TextColor="#28282C" BackgroundColor="#FFF" BorderRadius="30" Text="2"></Button> <Button Grid.Row="1" Grid.Column="2" FontSize="30" TextColor="#28282C" BackgroundColor="#FFF" BorderRadius="30" Text="3"></Button> <Button Grid.Row="2" Grid.Column="0" FontSize="30" TextColor="#28282C" BackgroundColor="#FFF" BorderRadius="30" Text="4"></Button> <Button Grid.Row="2" Grid.Column="1" FontSize="30" TextColor="#28282C" BackgroundColor="#FFF" BorderRadius="30" Text="5"></Button> <Button Grid.Row="2" Grid.Column="2" FontSize="30" TextColor="#28282C" BackgroundColor="#FFF" BorderRadius="30" Text="6"></Button> <Button Grid.Row="3" Grid.Column="0" FontSize="30" TextColor="#28282C" BackgroundColor="#FFF" BorderRadius="30" Text="7"></Button> <Button Grid.Row="3" Grid.Column="1" FontSize="30" TextColor="#28282C" BackgroundColor="#FFF" BorderRadius="30" Text="8"></Button> <Button Grid.Row="3" Grid.Column="2" FontSize="30" TextColor="#28282C" BackgroundColor="#FFF" BorderRadius="30" Text="9"></Button> <Button Grid.Row="4" Grid.Column="1" FontSize="30" TextColor="#28282C" BackgroundColor="#FFF" BorderRadius="30" Text="0"></Button> <Button Grid.Row="5" Grid.ColumnSpan="3" FontSize="40" BackgroundColor="#96CA2D" BorderRadius="30" Text="Dial"></Button> </Grid> </ContentPage>
연습문제 2: 로그인 페이지 만들기
좀 더 간지나는(?) 로그인, 등록 페이지 만들어 보기
<?xml version="1.0" encoding="UTF-8"?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="MyFirstXamarinApp.GridPage" BackgroundColor="#127AC7"> <Grid Padding="20"> <Grid.RowDefinitions> <RowDefinition Height="*"></RowDefinition> <RowDefinition Height="40"></RowDefinition> <RowDefinition Height="40"></RowDefinition> </Grid.RowDefinitions> <StackLayout Grid.Row="0" VerticalOptions="Center"> <Label Text="환영합니다! Xamarin" FontSize="30" TextColor="White" HorizontalOptions="Center"></Label> <Label Text="크로스플랫폼 앱 개발을 쉽게" FontSize="18" TextColor="White" HorizontalOptions="Center"></Label> </StackLayout> <Button Grid.Row="1" Text="Login" BackgroundColor="#1dabf0" TextColor="White"></Button> <Button Grid.Row="2" Text="Register" BackgroundColor="#1dabf0" TextColor="White"></Button> </Grid> </ContentPage>