Table of Content
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>