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

Table of Content

StackLayout – XAML

StackLayout은 수평 또는 수직 방향인 한 줄로 여러 요소를 배치하는 레이아웃이다. 시각적 요소를 화면에 배치하는 가장 간단한 방식이다.

주요 속성

  • VerticalOptions: 수평 배치 옵션. 기본값은 Fill.
  • HorizontalOptions: 수직 배치 옵션. 기본값은 Fill.
  • Spacing: 요소 사이의 간격. StackLayout의 각 요소 사이에는 약간의 공간이 있음. 기본값은 6.
  • Padding: 레이아웃과 요소 사이의 공간
  • Orientation: 요소 배치 방향. 기본값은 Vertical.
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage Padding="0, 20, 0, 0"
             xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MyFirstXamarinApp.StackPage">
    <StackLayout BackgroundColor="Yellow"
                 Orientation="Horizontal"
                 HorizontalOptions="Center"
                 VerticalOptions="Center"
                 Spacing="50">
        <StackLayout>
            <Image Source="http://placehold.it/100x100"></Image>
            <Label Text="Label 1" BackgroundColor="Silver"></Label>
        </StackLayout>
            <Label Text="Label 2" BackgroundColor="Silver"></Label>
            <Label Text="Label 3" BackgroundColor="Silver"></Label>
    </StackLayout>
</ContentPage>

실행결과

 

 

StackLayout – C#

C# 코드로 레이아웃을 구현하는 건 선택의 여지가 없는 경우가 아니라면 사용하지 않는 것이 좋다. 코드가 너무 장황해지기 때문이다.

using Xamarin.Forms;

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

            /* StackLayout 객체 생성 */
            var layout = new StackLayout
            {
                Spacing = 50,
                Padding = new Thickness(0, 20, 0, 0),
                Orientation = StackOrientation.Horizontal
            };

            /* StackLayout의 Children 속성에 여러 요소를 추가. StackLayout 추가도 가능 */
            layout.Children.Add(new Label { Text = "Label 1" });

            /* 페이지의 Content 속성을 레이아웃 객체로 설정 */
            Content = layout;
        }
    }
}

 

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

로그인, 등록 페이지를 만들어 보기

조건

  • 페이지 배경색: #127ac7
  • 버튼 배경색: #1dabf0
  • ‘환영합니다!’ 라벨 속성
    • FontSize = “30”
    • FontAttributes = “Bold”
    • HorizontalOptions=”Center”
  • ‘크로스 플랫폼…’ 라벨 속성
    • FontSize = “18”

실행화면

<?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.StackLayoutTest" 
    BackgroundColor="#127ac7" >
    
    <StackLayout 
        BackgroundColor="#127ac7" 
        HorizontalOptions="FillAndExpand" 
        VerticalOptions="CenterAndExpand"
        Spacing="10">
        
            <Label 
                Text="환영합니다! Xamarin" 
                FontSize="30" 
                FontAttributes="Bold" 
                HorizontalOptions="Center"
                HorizontalTextAlignment="Center"
                TextColor="White"></Label>
            <Label 
                Text="크로스 플랫폼 개발을 쉽게" 
                FontSize="18" 
                TextColor="White"
                HorizontalOptions="Center"
                HorizontalTextAlignment="Center"></Label>
            <Button 
                Text="Login" 
                BackgroundColor="#1dabf0"
                TextColor="White"></Button>
            <Button 
                Text="Register" 
                BackgroundColor="#1dabf0"
                TextColor="White"></Button>
        
    </StackLayout>
    
</ContentPage>

 

StackLayout 연습문제 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.StackLayoutTest">
    
    <StackLayout VerticalOptions="Start" HorizontalOptions="Fill" Padding="10">
        
            <Label Text="GanziBoy"></Label>
            <Image Source="IMAGE_URL"></Image>
        
            <StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand">
                    <Button Text="Like"></Button>
                    <Button Text="Comment"></Button>
                    <Button Text="Share"></Button>
            </StackLayout>
        
            <BoxView Color="#F0F0F0" HeightRequest="1"></BoxView>
            <Label FontAttributes="Bold" Text="좋아요 222개"></Label>
            <Label Text="이것은 짭스타그램입니다..."></Label>
        
    </StackLayout>
    
</ContentPage>

 

댓글 남기기