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

AbsoluteLayout (절대 레이아웃)

AbsoluteLayout은 요소를 원하는 위치에 원하는 크기로 배치할 수 있는 레이아웃이다. 특정 요소를 가정자리에 고정하거나 여러 요소를 겹쳐서 표현하려는 경우에 유용하다.

• 예: 이미지(배경) 위에 여러가지 요소들을 표현

주요 속성

AbsoluteLayout.LayoutBounds: 요소의 위치와 크기를 결정하는 사각형

• 첫번째 값: 요소를 배치할 X 좌표
• 두번째 값: 요소를 배치할 Y 자표
• 세번째 값: 요소의 가로 길이
• 네번째 값: 요소의 세로 길이
• 비례값으로 설정할 경우 0과 1 사이의 double형으로 표현해야 함

AbsoluteLayout.Flags: 플래그: 어떤 값을 비례값으로 지정할 지를 결정하는 플래그

• None: 레이아웃 값 전부가 절대값임을 지정 (기본값)
• All: 레이아웃 값 전부가 비례함을 지정.
• WidthProportional
• HeightProportional
• XProportional
• YProportional
• PositionProportional
• SizeProportional

<?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.AbsolutePage">
    <AbsoluteLayout>
        <BoxView 
            AbsoluteLayout.LayoutBounds="0, 0, 1, 1" 
            AbsoluteLayout.LayoutFlags="All"
            Color="Aqua"></BoxView>
        <BoxView
            AbsoluteLayout.LayoutBounds="0.5, 0.1, 100, 100"
            AbsoluteLayout.LayoutFlags="PositionProportional"
            Color="White"></BoxView>
        <Button
            AbsoluteLayout.LayoutBounds="0, 1, 1, 50"
            AbsoluteLayout.LayoutFlags="PositionProportional, WidthProportional"
            Text="Get Started"
            BackgroundColor="#1dabf0"
            TextColor="White"></Button>
    </AbsoluteLayout>
</ContentPage>

실행결과

 

AbsoluteLayout – C#(Code-Behind)

C# 코드를 이용한 AbsoluteLayout 구현

using Xamarin.Forms;
using Xamarin.Forms.Xaml;

namespace MyFirstXamarinApp
{
	[XamlCompilation(XamlCompilationOptions.Compile)]
	public partial class AbsolutePage : ContentPage
	{
		public AbsolutePage ()
		{
			InitializeComponent ();

            var aquaBox = new BoxView { Color = Color.Aqua };
            var layout = new AbsoluteLayout();

            /* Add() 메소드는 여러 오버로딩이 존재
             * 두 번째 매개변수의 Rectangle 객체는 위치와 크기를 지정하기 위해 사용 */
            layout.Children.Add(aquaBox, new Rectangle(0, 0, 1, 1), AbsoluteLayoutFlags.All);

            /* 이런 식으로 요소의 위치 및 크기, 플래그를 설정할 수 있음
             * 위의 Add() 메소드를 사용하면 이 메소드에서 SetLayoutBounds(), SetLayoutFlags() 정적 메소드를 호출하므로
             * 굳이 사용할 필요는 없으나 이런 정적 메소드도 있다는 언급만 잠깐 해봄... */
            AbsoluteLayout.SetLayoutBounds(aquaBox, new Rectangle(0, 0, 1, 1));
            AbsoluteLayout.SetLayoutFlags(aquaBox, AbsoluteLayoutFlags.HeightProportional);

            Content = layout;
        }
	}
}

 

연습문제 1: 일급 협상

버튼을 클릭하여 4달라 협상을 하는 페이지를 만들어 보기 (……)

실행 결과

AbsolutePage.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" x:Class="MyFirstXamarinApp.AbsolutePage">
    <AbsoluteLayout>
        
        <BoxView 
            AbsoluteLayout.LayoutBounds="0, 0, 1, 0.3" AbsoluteLayout.LayoutFlags="All"
            BackgroundColor="#F7F7F7"></BoxView>
        
        <StackLayout 
            AbsoluteLayout.LayoutBounds="0, 0, 1, 0.3" AbsoluteLayout.LayoutFlags="All"
            HorizontalOptions="Center" VerticalOptions="Center">
            <Label 
                x:Name="labelWage" 
                TextColor="#33353A"
                FontSize="40"
                FontAttributes="Bold">일급: $1.00</Label>
            <Button 
                x:Name="buttonNego"
                BackgroundColor="#1695A3"
                BorderRadius="15"
                Clicked="Handle_Clicked"
                FontSize="15" FontAttributes="Bold"
                TextColor="White" Text="4달라로 협상하기"></Button>
        </StackLayout>
        
        <StackLayout 
            AbsoluteLayout.LayoutBounds="0, 0.5, 1, 0.3" AbsoluteLayout.LayoutFlags="All"
            Padding="20" Spacing="20">
            <Label x:Name="labelAmerican" FontSize="15" FontAttributes="Bold">미군동무: I can't believe this. This is ridiculous…</Label>
            <Label x:Name="labelKimdoohan" FontSize="15" FontAttributes="Bold">김두한: 4딸라!!!!</Label>
        </StackLayout>
        
    </AbsoluteLayout>
</ContentPage>

AbsolutePage.xaml.cs

using Xamarin.Forms.PlatformConfiguration.iOSSpecific;

using Xamarin.Forms;

namespace MyFirstXamarinApp
{
    public partial class AbsolutePage : ContentPage
    {
        public AbsolutePage()
        {
            InitializeComponent();

            // iOS Safe Area 설정
            if (Device.RuntimePlatform == Device.iOS)
                On<Xamarin.Forms.PlatformConfiguration.iOS>().SetUseSafeArea(true);
        }

        void Handle_Clicked(object sender, System.EventArgs e)
        {
            labelWage.Text = "일급: $4.00";
            labelAmerican.Text = "미군동무: I can't help with this... Alright. 4 dollars!";
            labelKimdoohan.Text = "김두한: 오케이, 땡큐! 오케이, 4딸라!!";
        }
    }
}

 

연습문제 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.AbsolutePage">
    <AbsoluteLayout>
        
        <Image AbsoluteLayout.LayoutBounds="0, 0, 1, 1" AbsoluteLayout.LayoutFlags="All"
               Source="https://pbs.twimg.com/media/CwgG7J0UoAAwXDb.jpg"
               Aspect="AspectFill"></Image>
        
        <Label AbsoluteLayout.LayoutBounds="0, 0.1, 1, 0.1" AbsoluteLayout.LayoutFlags="All"
               HorizontalOptions="Center" 
               FontSize="40" FontAttributes="Bold"
               TextColor="White">Kakao Friends</Label>
        
        <BoxView AbsoluteLayout.LayoutBounds="0, 1, 1, 0.15" AbsoluteLayout.LayoutFlags="All"
                 Color="Black" 
                 Opacity="0.5"></BoxView>
        
        <StackLayout AbsoluteLayout.LayoutBounds="0, 1, 1, 0.15" AbsoluteLayout.LayoutFlags="All"
                     Orientation="Horizontal" 
                     Padding="30, 0">
            <Label HorizontalOptions="Center" VerticalOptions="Center" 
                   FontSize="20"
                   TextColor="White">Profile</Label>
            <Label HorizontalOptions="CenterAndExpand" VerticalOptions="Center" 
                   FontSize="20"
                   TextColor="White">Story</Label>
            <Label HorizontalOptions="Center" VerticalOptions="Center" 
                   FontSize="20"
                   TextColor="White">Themes</Label>
        </StackLayout>
        
    </AbsoluteLayout>
</ContentPage>