xamarin 강좌 005. 데스크탑, 스마트폰 등 디바이스 타입마다 다른 UI 만들기

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

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

xamarin 강좌 이전 글

2018/09/12 - [프로그래밍/xamarin] - xamarin 강좌 004. 안드로이드, 아이폰, 윈도우, 플랫폼마다 다르게 실행되는 코드 만들기

2018/09/12 - [프로그래밍/xamarin] - xamarin 강좌 003. iOS 빌드를 위한 맥북 설정 - 아이폰 실행화면 보기

2018/09/11 - [프로그래밍/xamarin] - xamarin 강좌 002. xamarin 기본생성 프로젝트의 구조 - 버튼 추가

2018/09/10 - [프로그래밍/xamarin] - xamarin 강좌 001. xamarin의 시작

xamarin 5번째 시간입니다.

스마트폰은 세로로 긴 화면을 가지고 있고,

데스크탑은 가로로 긴 화면을 가지고 있습니다. 

그리고 타블렛은 스마트폰과 화면비율도 다르고 화면도 크게 되어 있죠.

하나의 UI, 하나의 코드에서 모든 디바이스에서 다 돌아가는 프로그램을 만드는 건 좋지만

이렇게 해서는 화면 비율이나 많은 것들이 전반적으로 딱 맞아 떨어지지는 않아요.

그래서 각 디바이스 타입마다 다른 UI를 갖게 하는 방법을 소개합니다.

xamarin에서 구분하는 디바이스 타입은 다음과 같습니다. 

- Phone(아이폰, 안드로이드폰 등)

- Tablet (갤럭시 노트 등)

- Desktop (UWP 프로그램)

- TV (아마도 셋탑박스용)

- Watch (갤럭시 기어, 애플 와치 등)

xamarin에서 별도의 작업없이도 Device라는 객체에서 이 타입을 알려줍니다. 

Device.Idiom 을 get 하면 바로 타입을 알려주는데요,

switch(Device.Idiom)

{

   case Phone : ...

   case Table : ...

}

이런 식으로 사용할 수 있습니다. 

이런 식으로 코드, 기능은 공유하지만

가로로 넓은 화면과 세로로 긴 화면을 가진 디바이스들 마다마다 UI 구성요소들의 배치는 달리하는 프로그램을 만들 수 있습니다. 

xamarin 참 좋죠?

이 xamarin 동영상 강의에서 사용한 소스코드입니다.

[공용코드(xa005 프로젝트)]

Page_Desktop.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="xa005.Page_Desktop">

    <ContentPage.Content>

        <StackLayout>

            <Label Text="데스크탑용 UI"

                VerticalOptions="CenterAndExpand" 

                HorizontalOptions="CenterAndExpand" />

        </StackLayout>

    </ContentPage.Content>

</ContentPage>

---

Page_Desktop.xaml (새로 생성)

using System;

using System.Collections.Generic;

using System.Linq;

using System.Text;

using System.Threading.Tasks;

using Xamarin.Forms;

using Xamarin.Forms.Xaml;

namespace xa005

{

[XamlCompilation(XamlCompilationOptions.Compile)]

public partial class Page_Desktop : ContentPage

{

public Page_Desktop ()

{

InitializeComponent ();

}

}

}

---

App.xaml.cs

using System;

using Xamarin.Forms;

using Xamarin.Forms.Xaml;

[assembly: XamlCompilation(XamlCompilationOptions.Compile)]

namespace xa005

{

    public partial class App : Application

    {

        public App()

        {

            InitializeComponent();

            //MainPage = new MainPage();

            switch (Device.Idiom)

            {

                case TargetIdiom.Phone: MainPage = new MainPage(); break;

                case TargetIdiom.Desktop: MainPage = new Page_Desktop(); break;

            }

        }

        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

        }

    }

}

아래 xamarin 동영상 강좌로 자세히 확인하세요.