자알못 자마린: Xamarin.Forms 레이아웃 기초

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>

월	화	수	목	금	토	일
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31

자알못 자마린: Xamarin.Forms 레이아웃 기초 – Grid

Grid

Grid 사용 예

주요 속성

실행결과

Grid.Definition

실행결과

Grid – C#(Code-Behind)

연습문제 1: 전화걸기 UI

연습문제 2: 로그인 페이지 만들기

댓글 남기기 응답 취소