xamarin 강좌 012. Layout (5) - AbsoluteLayout

 

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

 

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

 

 

 

AbsoluteLayout은 여러 개의 엘리먼트들을 가질 수 있는 layout입니다.

 

absolute 라는 이름처럼 layout 안에서 x와 y의 좌표를 이용해 정확한 위치를 정해줄 수 있습니다.

또 비율을 이용해 위치와 크기를 정해줄 수도 있어요.

 

<Label> 태그 안에 위치를 정해주는 절대 값을 넣을 수 있습니다.

 

<Label Text="test" AbsoluteLayout.LayoutBounds="100, 110, 120, 130" BackgroundColor="Green" />

 

와 같이 하면 Layout 내에서 가로 100, 세로 110의 위치에 폭 120, 높이 130 의 크기로 label을 위치하게 됩니다.

 

 

 

<?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:App2"
             x:Class="App2.MainPage">

    <AbsoluteLayout>
        <!-- Place new controls here -->
        <Label Text="test" AbsoluteLayout.LayoutBounds="100, 110, 120, 130" BackgroundColor="Green" />
    </AbsoluteLayout>

</ContentPage>

 

 

 

여기에서 x: 100, y: 110의 기준점은 layout 입니다.

layout에서 가로로 100, y로 110인 위치인 거죠.

 

 

<?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:App2"
             x:Class="App2.MainPage" Padding="30">

    <AbsoluteLayout BackgroundColor="Yellow">
        <!-- Place new controls here -->
        <Label Text="test" AbsoluteLayout.LayoutBounds="100, 110, 120, 130" BackgroundColor="Green" />
    </AbsoluteLayout>

</ContentPage>

 

 

 

 

 

 

이렇게 절대값을 이용해 위치와 폭, 높이 등 크기를 정해줄 수 있습니다.

 

그런데 이렇게 내 폰에 맞게 절대값을 이용해 위치나 크기를 정해주면, 이게 다른 폰에서도 똑같이 나올까요?

내 폰에서는 가운데 나오게 맞춰줬지만 크기가 더 작은 다른 폰에서는 그게 어느 한쪽으로 치우쳐지게 보이게 될 거에요.

 

그래서 AbsoluteLayout에서도 Layout과의 비율에 맞춰 위치나 크기를 정해줄 수 있는 방법을 제시하고 있습니다.

 

 

AbsoluteLayout.LayoutFlags 라는 속성을 이용해서 어떤 값에 대한 비율을 사용할지 정해줄 수 있는데요,

 

AbsoluteLayout.LayoutFlags 에 올 수 있는 값은,

 

  - All

  - HeightProportional

  - None

  - PositionProportional

  - SizeProportional

  - WidthProportional

  - HeightProportional

  - XProportional

  - YProportional

 

입니다.

 

좀전 예제에서는 AbsoluteLayout.LayoutFlags 값을 따로 정해주지 않았는데, 이렇게 아무것도 정해주지 않으면 "None" 이 기본값으로 설정됩니다.

 

None은 모두 절대값을 사용하겠다는 뜻이 되는거죠.

 

 

 

이 AbsoluteLayout.LayoutFlags 의 값을 XProportional으로 설정하고 좀전에 110을 줬던 x의 자리에 0.5 를 주면,

 

AbsoluteLayout.LayoutBounds="0.5, 110, 120, 130" AbsoluteLayout.LayoutFlags="XProportional"

 

과 같이 될텐데,

 

이렇게 하면 x의 위치는 비율을 사용하겠다는 뜻이 되고, 그 값으로 0.5를 사용합니다.

 

0.5는 50%라는 뜻으로, 자기의 parent인 AbsoluteLayout의 가운데에 위치하겠다는 뜻입니다. 

 

 

<?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:App2"
             x:Class="App2.MainPage" Padding="30">

    <AbsoluteLayout BackgroundColor="Yellow">
        <!-- Place new controls here -->
        <Label Text="test" AbsoluteLayout.LayoutBounds="0.5, 110, 120, 130"

             AbsoluteLayout.LayoutFlags="XProportional" BackgroundColor="Green" />
    </AbsoluteLayout>

</ContentPage>

 

 

 

AbsoluteLayout.LayoutFlags="All"로 하면 x, y, 폭, 높이 모두 비율을 사용하겠다는 뜻이 됩니다.

x는 layout의 폭을 기준으로 몇 %의 위치에 놓일지,

y는 layout의 높이를 기준으로 몇 %의 위치에 놓일지,

폭은 layout의 폭을 기준으로 몇 %를 사용할지

높이는 layout의 높이를 기준으로 몇 %를 사용할지를 결정하게 됩니다.

 

<?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:App2"
             x:Class="App2.MainPage" Padding="30">

    <AbsoluteLayout BackgroundColor="Yellow">
        <!-- Place new controls here -->
        <Label Text="test" AbsoluteLayout.LayoutBounds="0.5, 0.5, 0.5, 0.5" AbsoluteLayout.LayoutFlags="All" BackgroundColor="Green" />
    </AbsoluteLayout>

</ContentPage>

 

 

이렇게 x, y, 폭, 높이 모두 0.5값을 주고 AbsoluteLayout.LayoutFlags를 All로 주면,

모두 비율을 사용하겠다는 건데,

 

0.5니까 50%라는 뜻으로 쓰이게 되어,

layout의 정 가운데에(x위치도 layout 폭의 50%, y위치도 layout 높이의 50%, 폭도 layout 폭의 50%, 높이도 layout 높이의 50%) 높여지게 되었습니다.

 

 

HeightProportional 는 다른 값은 다 절대값인데, 높이만 layout에 대한 비율이라는 뜻입니다.

 

None 은 모두 절대값이라는 뜻입니다.

 

PositionProportional 은 위치를 결정하는 x, y는 비율이고 크기는 절대값이라는 뜻입니다.

 

SizeProportional 은 크기만 비율이라는 뜻이됩니다. x, y는 절대값이죠.

 

WidthProportional 은 폭만 비율

 

HeightProportional 은 높이만 비율

 

XProportional 은 x위치만 비율

 

YProportional 은 y위치만 비율

 

이 됩니다.

 

 

더 자세한 내용은 아래 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:xa012"
             x:Class="xa012.MainPage">

    <AbsoluteLayout BackgroundColor="Green">
        <Label Text="Hello World"
               AbsoluteLayout.LayoutBounds="100, 100, 60, 60" BackgroundColor="Red"/>

        <Label Text="Hello World"
               AbsoluteLayout.LayoutBounds="0.5, 0.5, 30, 100" BackgroundColor="Yellow"

    AbsoluteLayout.LayoutFlags="YProportional"/>

</AbsoluteLayout>

</ContentPage>