xamarin 강좌 011. Layout (4) - Grid

 

xamarin은 마이크로소프트에서 Visual Studio와 함께 무료로 배포하고 있는 스마트폰 앱 개발 툴입니다.

 

xamarin은 크로스 플랫폼(cross platform) 기술로 한번 코드를 작성해 놓으면 안드로이드, 아이폰, 윈도우에서 실행되는 스마트폰 앱을 한꺼번에 만들 수 있는 강력한 도구입니다.

 

 

 

Grid layout은 표처럼 화면을 구성할 수 있게 해주는 layout 입니다.

 

사용하기 전에 표처럼 가로와 세로를 어떻게 구성할지 정의를 해놓고 시작합니다.

 

<Grid.RowDefinitions> 태그와 <Grid.ColumnDefinitions> 태그로 세로와 가로를 각각 구성하는데요,

이렇게 가로와 세로를 구성해 놓고,

그 안에 있는 뷰들은

 

"나는 가로 몇번째 세로 몇번째에 배치해 줘" 라고 요청합니다.

 

그럼 Grid layout은 그 요청을 받아 그 위치에 놓여지도록 합니다.

 

<Label Text="Nice!" Grid.Row="1" Grid.Column="0">

 

이런 식으로 요청해요

아 요청은 가로로 0번째, 세로로 1번째 (0부터 셉니다. zero base)의 위치에 나(label)를 배치해 달라는 요청입니다.

 

 

또 표처럼 여러 칸을 합쳐서 한칸처럼 쓰는 기능도 제공합니다.

 

<Label Text="SPAN" Grid.Row="0" Grid.Column="0" Grid.RowSpan="2"/>

 

이렇게 하면 0, 0의 위치에서 아래로 한칸을 더 쓰게 됩니다.

 

그래서 세로 0 ~ 세로 1까지를 이어서 쓸 수 있어요.

 

 

 

자세한 내용은 아래 Xamarin 동영상 강좌로 확인하세요.

 

 

소스코드

[공용코드(xa008) 프로젝트]

MainPage.xaml

 

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:xa011"
             x:Class="xa011.MainPage">

    <Grid ColumnSpacing="6" RowSpacing="6">
        <Grid.RowDefinitions>
            <RowDefinition Height="*"  />
            <RowDefinition Height="*"/>
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>

        <Label Text="(0, 0)" Grid.Row="0" Grid.Column="0" FontSize="20" BackgroundColor="Red" />
        <Label Text="(1, 0)" Grid.Row="0" Grid.Column="1" FontSize="20" BackgroundColor="Green" />
        <Label Text="(0, 1)" Grid.Row="1" Grid.Column="0" FontSize="20" BackgroundColor="Yellow" Grid.RowSpan="2"/>
        <Label Text="(1, 1)" Grid.Row="1" Grid.Column="1" FontSize="40" BackgroundColor="Blue" />
       
        <Label Text="(1, 2)" Grid.Row="2" Grid.Column="1" FontSize="20" BackgroundColor="Aqua" />

    </Grid>

</ContentPage>

 

사용한 IDE : Visual Studio 2017. community edition