자알못 자마린: Xamarin.Forms 앱의 기본 구조

Table of Content

Xamarin.Forms 프로젝트의 기본 구조를 정리해보기 위한 글. 더불어 Button을 클릭하면 간단한 경고 창을 띄우는 앱 만들어보는 설명도 추가해보았다.

일부 설명이 이상한 부분이 있다. 이해가 잘 안돼서…

 

공유 프로젝트

솔루션 탐색기 맨 위 쪽에 프로젝트 이름만 나타나있는 부분이 공유 프로젝트다. 모든 플랫폼에서 공통적으로 구현될 코드를 공유 프로젝트에 작성한다.

플랫폼마다 특성화된 코드를 작성하려면 프로젝트명.Android, 프로젝트명.iOS 등에 작성한다.

MyFirstXamarinApp이 공유 프로젝트

UI 구현부: XAML

XAML(eXtensible Application Markup Language)로 앱의 시각적 모양을 정의한다. 예를 들어 어떤 레이아웃을 사용할 것인지, Button 또는 Label 등을 어디에 어떻게 배치할 것인지 등을 정의할 수 있다.

XAML의 이면에 C# 코드가 뒤따라오는데 이를 코드 숨김(Code-Behind)이라 부른다. 이는 UI는 외부로 보여지고 앱의 동작 방식은 내부에서 구현됨을 뜻한다.

xaml 파일 뒤에 cs 코드 파일이 뒤따라온다.

 

앱의 시작지점 및 수명주기를 정의: app.xaml.cs

Xamarin.Forms  프로젝트의 app.xaml.cs 파일의 기본 내용은 다음과 같다.

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

[assembly: XamlCompilation (XamlCompilationOptions.Compile)]
namespace MyFirstXamarinApp
{
	public partial class App : Application
	{
		public App ()
		{
			InitializeComponent();

			MainPage = new MainPage();
		}

		protected override void OnStart ()
		{
			// Handle when your app starts
		}

		protected override void OnSleep ()
		{
			// Handle when your app sleeps
		}

		protected override void OnResume ()
		{
			// Handle when your app resumes
		}
	}
}

app.xaml.cs  파일은 앱이 어떻게 동작할 것인지를 정의한다.

app()은 생성자다.

  • MainPage 객체는 기본 Application 클래스에 정의된 속성. 애플리케이션의 시작 페이지를 설정함.

OnStart(), OnSleep(), OnResume()은 수명 주기 메소드다.

  • OnStart(): 앱이 시작될 때 호출되는 메소드
  • OnSleep(): 앱이 백그라운드 상태로 전환될 때 호출되는 메소드
  • OnResume(): 백그라운드 상태에서 앱이 다시 실행될 때 호출되는 메소드

 

XML NameSpace

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

    <!-- 생략... -->

</ContentPage>

xmlns는 XML NameSpace를 정의하기 위해 사용한다.

xmlns=”http://xamarin.com/schemas/2014/forms”

  • XAML 네임스페이스 기본값을 매핑
  • 이 네임스페이스는 자마린 소유임을 의미

xmlns:x=”http://schemas.microsoft.com/winfx/2009/xaml”

  • 접두사 x에 XAML 네임 스페이스를 매핑
  • 이 네임스페이스는 마이크로소프트 소유이며, 마이크로소프트가 2009년에 도입한 표준 XAML을 의미

x:Class=”MyFirstXamarinApp.MainPage”

  • cs 파일에서 정의할 네임스페이스 및 클래스 명을 매핑
  • MainPage.xaml.cs 파일을 열어보면 MyFirstXamarinApp 네임스페이스 내 MainPage 클래스가 존재한다. 그리고 이 MainPage 클래스는 ContentPage 클래스를 상속받음.

위 설명이 많이 이상한데… 이해가 잘 안가서 그렇다. 나중에 별도로 공부좀 해야할 듯…

 

Button이 하나 있는 간단한 앱 만들어 보기

Button을 클릭하면 경고창을 띄우는 앱을 만들어 본다.

프로젝트 생성 및 페이지 추가

Xamarin.Forms 프로젝트를 생성한다. 여기서 프로젝트 명은 MyFirstXamarinApp, 코드 공유 전략은 ‘.Net Standard’로 설정한다.

솔루션 탐색기의 공유 프로젝트 마우스 우클릭 -> 추가 -> 새 파일 클릭, Forms 항목의 Forms ContentPage XAML을 선택하고 이름을 입력한다. 여기서는 GreetPage로 입력한다.

XAML로 Button 구현

GreetPage.xaml 파일을 열어 ContentPage 태그 안 쪽에 Button 태그를 추가한다. Button의 주요 속성은 다음과 같다.

  • HorizontalOptions: 수평(가로) 기준 위치 설정
  • VerticalOptions: 수직(세로) 기준 위치 설정
  • Text: Button에 나타낼 텍스트
<?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.GreetPage">
    <Button HorizontalOptions="Center" 
              VerticalOptions="Center" 
              Text="안녕요?ㅎ" />
</ContentPage>

C# 코드로 Button 이벤트 구현

Button을 클릭할 때 반응이 나타나도록 이벤트를 추가한다. 다음과 같이 Button 태그의 Clicked 속성을 추가한다.

Clicked 속성에 추가되는 값은 이벤트 처리기(메소드)의 이름이다. 이름은 자동으로 입력하거나 직접 명명할 수 있다.

  • Xamarin.Forms의 Button에는 Clicked라는 이벤트가 존재함
<Button HorizontalOptions="Center" 
        VerticalOptions="Center" 
        Text="안녕요?ㅎ" 
        Clicked="Handle_Clicked"/>

이제 GreetPage.xaml.cs 파일을 열어보면 Handle_Clicked 라는 이벤트 처리기(메소드)를 자동 추가할 수 있다. 이 메소드 코드 블록에 경고창을 띄우는 코드를 입력한다.

  • 매개변수 sender: 이벤트의 발신자 또는 출처인 객체
  • 매개변수 e: 이벤트에 대한 추가 세부정보를 제공하는 EventArgs
  • 경고창을 띄우는 메소드: public System.Threading.Tasks.Task DisplayAlert(string title, string message, string cancel)
void Handle_Clicked(object sender, System.EventArgs e)
{
    DisplayAlert("Title", "안녕요?ㅎ", "OK");
}

MainPage 객체 수정

이렇게 만들어진 ContentPage를 앱을 실행할 때 보이도록 해야 한다. App.xaml.cs 파일을 열어 MainPage 객체를 GreetPage로 새롭게 만들어 준다.

[assembly: XamlCompilation(XamlCompilationOptions.Compile)]
namespace MyFirstXamarinApp
{
    public partial class App : Application
    {
        public App()
        {
            InitializeComponent();

            MainPage = new GreepPage(); // 앱 실행 시 보여줄 페이지
        }

        // ...
    }
}

실행 결과

 

댓글 남기기