전체 페이지뷰

2017년 1월 25일 수요일

Chapter 1. How does Xamarin.Forms fit in? Part.2

Xamarin.Forms를 소개합니다

2014.3.28에 자마린은 Xamarin.Forms를 발표했습니다.

Xamarin.Forms의 옵션

다섯개의 application 플랫폼으로 구성되어 있습니다.
  • iOS: iPhon, IPad, iPod Touch에서 작동
  • Android: 안드로이드 폰과 태블릿에서 작동
  • UWP : 윈도우즈 10과 10 모바일에서 작동
  • 윈도우즈 8.1 WinRT API 
  • 윈도우즈 폰 8.1에 WinRT API
일반적인 케이스에서 Xamarin.Forms 어플리케이션은 이 다섯개의 플랫폼에 대응하는 다섯개의 프로젝트와 공통 코드를 담고 있는 여섯번째 프로젝트로 이루어집니다. 그러나 그 다섯개의 프로젝트의 크기는 아주 작아서 단순한 boilerplate startup 코드로만 이루어져 있습니다.

반면 PCL 또는 SAP는 UI 코드를 포함하므로 크기가 훨씬 클 것입니다.

아래 그림은 IOS, Android, UWP와의 관계를 보여줍니다.(WinRT의 경우는 UWP와 유사하여 표시하지 않았습니다.)

Xamarin.Forms.Core와 Xamarin.Forms.Xaml 라이브러리는 Xamarin.Forms API를 구현합니다.  플랫폼에 따라 Xamarin.Forms.Core는 Xamarin.Forms.Platform 라이브러리 중 하나를 사용합니다. 이 라이브러리는 대부분 Xamarin.Forms 사용자 인터페이스 개체를 플랫폼 별 사용자 인터페이스로 변환하는 renderer라는 클래스 모음입니다.

예를 들어, 사용자가 부울 값을 전환 할 수 있도록 앞에서 설명한 user-interface 객체가 필요하다고 가정합니다. Xamarin.Forms를 프로그래밍할 때 이를 Switch라고하고 Switch라는 클래스를 Xamarin.Forms.Core 라이브러리에 구현합니다. 3 개의 플랫폼에 대한 개별 렌더러에서이 스위치는 iPhone의 UISwitch, Android의 Switch 및 Windows Phone의 ToggleSwitch에 매핑됩니다.

또한 Xamarin.Forms.Core에는 사용자가 숫자 값을 선택하기 위해 조작하는 가로 막대를 표시하는 Slider라는 클래스가 있습니다. 플랫폼 별 라이브러리의 렌더러에서는 iPhone의 UISlider, Android의 SeekBar 및 Windows Phone의 Slider에 매핑됩니다.

다시 말해, Switch 또는 Slider가있는 Xamarin.Forms 프로그램을 작성할 때 실제로 표시되는 것은 각 플랫폼에 구현된 해당 객체입니다.

다음은 "Hello, Xamarin.Forms!"라는 Label을 가지는 작은 Xamarin.Forms 프로그램입니다. 버튼에는 "Click Me!"라 써있고, SwitchSlider가 있습니다. 왼쪽에서 오른쪽 순서로 각각 iPhone, Android 폰, 윈도우 폰입니다.

아이폰은 iOS 9.2에서 실행된 시뮬레이터 화면이고, 안드로이드는 6.0 버전의 LG Nexus 5, 윈도우즈10 모바일은 Nokia Rumia 935입니다.

앞으로 종종 이런 스크린샷을 만나게 될텐데 모두 앞에서 소개한 기기, 순서, 버전임을 알아두시기 바랍니다.

보다시피 Button, Switch, Slider가 각각의 플랫폼에 맞게 렌더링 되었기 때문에 모두 다르게 생겼습니다.

더욱 흥미로운 점은 이 프로그램에 6 개의 ToolBarItem 객체가 포함되어 있다는 것입니다. 3 개는 아이콘이 있는 primary item으로 식별되고 나머지 3 개는 아이콘이 없는 secondary item으로 식별됩니다. iPhone에서는 UIBarButtonItem 객체를 페이지 상단에 3 개의 아이콘과 3 개의 버튼으로 렌더링합니다. Android에서 처음 세 개는 ActionBar의 항목으로 렌더링되며 페이지 상단에도 표시됩니다. Windows 10 Mobile에서는 페이지 하단의 CommandBar에있는 항목으로 인식됩니다.

Android ActionBar에는 세로 줄임표가 있고 UWP CommandBar에는 수평 줄임표가 있습니다. 이 줄임표를 누르면 두 가지 플랫폼에 적합한 방식으로 secondary item이 표시됩니다.


Xamarin.Forms는 모바일에서만 작동하는 것이 아니라 태블릿에서도 작동합니다.
iPad Air 2 시뮬레이터에의 화면입니다.

이 책의 대부분의 프로그램은 매우 간단하므로 세로(portrait) 모드의 전화 화면에서 가장 잘 보이도록 설계되었습니다. 그러나 그들은 가로(landscape) 모드와 태블릿에서도 실행됩니다.

다음은 마이크로소프트 Surface pro 3에서 실행한 UWP 프로젝트입니다.

화면 상단의 툴바에 유의하시기 바랍니다. 세 개의 secondary item을 표시하기 위해 줄임표를 이미 눌러 놓았습니다.

Xamarin.Forms에서 지원하는 다른 두 플랫폼은 Windows 8.1 및 Windows Phone 8.1입니다. 다음은 Windows 10 데스크톱의 창에서 실행되는 Windows 8.1 프로그램과 Windows 10 Mobile 장치에서 실행되는 Windows 8.1 프로그램입니다.


toolbar의 다양한 구현은 Xamarin.Forms이 각 플랫폼의 유저 인터페이스 요소뿐만 아니라 사용자 인터페이스 패러다임을 가상화하는 API라는 것을 의미합니다.

XAML 지원

Xamarin.Forms는 또한 Microsoft에서 개체를 인스턴스화하고 ,초기화하기위한 범용 마크 업 언어로 개발 된 XML 기반 Extensible Application Markup Language 인 XAML ( "camel"과 운율이 유사한 "zammel"로 발음됨)을 지원합니다. Xamarin.Forms에서 사용된 XAML은 사용자 인터페이스의 초기 레이아웃을 정의하는 것에만 국한되지 않습니다.
지금까지 보아온 스크린샷의 XAML 파일은 다음과 같습니다.

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
             x:Class="PlatformVisuals.PlatformVisualsPage" 
             Title="Visuals">
  <StackLayout Padding="10,0">
    <Label Text="Hello, Xamarin.Forms!" 
           FontSize="Large" 
           VerticalOptions="CenterAndExpand" 
           HorizontalOptions="Center" />
    <Button Text = "Click Me!" 
            VerticalOptions="CenterAndExpand" 
            HorizontalOptions="Center" />
    <Switch VerticalOptions="CenterAndExpand" 
            HorizontalOptions="Center" />
    <Slider VerticalOptions="CenterAndExpand" />
  </StackLayout>
  
  <ContentPage.ToolbarItems>
    <ToolbarItem Text="edit" Order="Primary">
      <ToolbarItem.Icon>
        <OnPlatform x:TypeArguments="FileImageSource" 
                    iOS="edit.png" 
                    Android="ic_action_edit.png" 
                    WinPhone="Images/edit.png" />
      </ToolbarItem.Icon>
    </ToolbarItem>
    
    <ToolbarItem Text="search" Order="Primary">
      <ToolbarItem.Icon>
        <OnPlatform x:TypeArguments="FileImageSource" 
                    iOS="search.png" 
                    Android="ic_action_search.png" 
                    WinPhone="Images/feature.search.png" />
      </ToolbarItem.Icon>
    </ToolbarItem>
    
    <ToolbarItem Text="refresh" Order="Primary">
      <ToolbarItem.Icon>
        <OnPlatform x:TypeArguments="FileImageSource" 
                    iOS="reload.png" 
                    Android="ic_action_refresh.png" 
                    WinPhone="Images/refresh.png" />
      </ToolbarItem.Icon>
    </ToolbarItem>
    <ToolbarItem Text="explore" Order="Secondary" />
    <ToolbarItem Text="discover" Order="Secondary" />
    <ToolbarItem Text="evolve" Order="Secondary" />
  </ContentPage.ToolbarItems>
</ContentPage>
cs

XAML에 대한 지식이 없다면 혼란스러울 수도 있겠지만 차차 배우게 될 것이므로 걱정 마시기 바랍니다. 그러나 모른다 할지라도 Label, Button, Switch, Slider 태그가 보일 것입니다. 실제 프로그램에서 Button, Switch, Slider에는 C#으로 구현된 이벤트 핸들러가 붙어 있게 됩니다(여기에는 구현하지 않았습니다). VerticalOption, HorizontalOption의 attribute가 보이는데 그것은 다음에 다시 언급하겠습니다.

Platform specificity

ToolbarItem과 관련된 해당 XAML 파일의 섹션에서 OnPlatform이라는 태그를 볼 수 있습니다. 이것은 Xamarin.Forms에서 플랫폼 독립적인 코드 또는 마크업에 특정 플랫폼 특수성을 도입 할 수있는 여러 기술 중 하나입니다. 그것은 각각의 플랫폼에서 아이콘과 관련된 이미지 형식과 크기 요구 사항이 서로 다르기 때문에 사용됩니다.

유사한 기능이 Device 클래스의 코드에 있습니다. 코드가 실행중인 플랫폼을 판별하고 플랫폼을 기반으로 값 또는 오브젝트를 선택할 수도 있습니다. 예를 들자면, 각 플랫폼마다 다른 글꼴 크기를 지정하거나 플랫폼을 기반으로 다른 코드 블록을 실행할 수 있습니다. 사용자가 어떤 플랫폼에서는 슬라이더를 조작하여 값을 선택하지만, 다른 플랫폼에서는 명시적 값 세트에서 숫자를 선택하게 할 수 있습니다.

일부 application에서는 더 깊은 플랫폼 특수성이 필요할 수 있습니다. 예를 들어 응용 프로그램에 사용자 폰의 GPS 좌표가 필요하다고 가정합니다. 이것은 Xamarin.Forms가 제공하는 것이 아니므로, 이 정보를 얻기 위해서는 각 플랫폼에 고유한 코드를 작성해야 합니다.

DependencyService 클래스는 구조화된 방식으로 이 작업을 수행할 수 있도록 합니다. 필요한 메소드 (예 : IGetCurrentLocation)로 인터 페이스를 정의한 다음, 각 플랫폼 프로젝트의 클래스로 해당 인터페이스를 구현합니다. 그런 다음 API의 일부인 것처럼 쉽게 Xamarin.Forms 프로젝트에서 해당 인터페이스의 메소드를 호출 할 수 있습니다.

Label, Button, SwitchSlider와 같은 표준 Xamarin.Forms 시각적 객체는 다양한 Xamarin.Forms.Platform 라이브러리의 렌더러 클래스에서 지원됩니다. 각 렌더러 클래스는 Xamarin.Forms 객체에 해당되는 특정 플랫폼 객체를 구현합니다.

고유한 사용자 정의 렌더러를 사용하여 사용자 정의 시각 객체를 만들 수 있습니다. 사용자 지정 시각 개체는 공용 코드 프로젝트에 포함되고, 사용자 지정 렌더러는 개별 플랫폼 프로젝트에 포함됩니다. 좀 더 쉬운 방식으로 하기 위해선, 일반적으로 기존 클래스에서 상속받는 것이 편할 것입니다. 개별 Xamarin.Forms 플랫폼 라이브러리 내에서 모든 해당 렌더러는 공용 클래스이므로 이를 통해 파생되게 할 수도 있습니다.

Xamarin.Forms를 사용하면 필요에 따라 플랫폼 독립형 또는 플랫폼 고유형 중 하나를 택할 수 있습니다 . Xamarin.Forms는 Xamarin.iOS 또는 Xamarin.Android를 대체하는 것이 아니고  통합하는 것입니다.


cross-platform 만병통치약?

대부분 경우에 Xamarin.Forms는 iOS, Android 및 WinRT API에 공통으로 존재하는  모바일 UI 영역에 중점을두고 추상화를 정의합니다. 이러한 Xamarin.Forms 시각적 객체는 platform-specific한 객체에 매핑되지만, Xamarin.Forms는 어느 특정 플랫폼에만 고유한 구현은 피하는 경향이 있습니다.

그렇기 때문에 Xamarin.Forms가 플랫폼 독립적인 앱을 만드는데 지대한 도움을 주기는 하지만, native API를 완전히 대체할 수 있는 것은 아닙니다. 만약 어플리케이션이 특정 타입의 control이나 widget에 매우 많이 의존하는 종류의 것이라면, Xamarin.iOS나 Xamarin.Android, native 윈도우 폰 API에 집중하는 것이 옳을 것입니다.

또한 벡터 그래픽이나 복잡한 touch interaction을 요하는 종류의 app이라면, 아직 Xamarin.Forms가 그것을 지원하지는 못할 수 있습니다.

반면, Xamarin.Forms는 프로토 타이핑 또는 개념 증명용(proof-of-concept) 앱을 신속하게 작성하는 데 적합합니다. 그리고 이 작업을 끝내면 Xamarin.Forms 기능을 계속 사용하여 전체 응용 프로그램을 빌드 할 수 있습니다. Xamarin.Forms는 기간 업무 (LOB, line-of-business) 응용 프로그램에 이상적입니다.

만약 Xamarin.Forms로 앱 작성을 시작하고, 중요한 부분은 각각의 플랫폼 API를 써서 구현하더라도, 프레임워크는 각 앱들의 기본 구조적 기틀을 제공하고 코드를 공유하게 할 수 있을 것입니다.

개발 환경

하드웨어와 소프트웨어를 어떤 식으로 세팅하는가는 어떤 플랫폼을 목표로 하는가와 어떤 환경이 개발자에게 편한가에 따라 달라집니다.

Xamarin.Forms의 개발환경은 Xamarin.iOS, Xamarin.Android, Windows환경과 다르지 않습니다. 따라서 이제 언급할 내용은 Xamarin.Forms에만 해당하는 것이 아닙니다. 

Machine과 IDE

iPhone을 타겟팅하려면 Mac이 필요합니다. Apple은 iPhone 및 기타 iOS 응용 프로그램을 작성하는 데 Mac을 사용해야 합니다. 이 머신에 Xcode를 설치하고, 필요한 라이브러리와 Xamarin Studio가 포함 된 Xamarin 플랫폼을 설치해야 합니다. 그러면 Mac에서 Xamarin Studio 및 Xamarin.Forms를 사용하여 iPhone 앱을 개발할 수 있습니다.

Xcode 및 Xamarin 플랫폼이 설치된 Mac이 있으면, PC에서 Visual Studio로도 Xamarin 플랫폼을 PC에 설치하고 iPhone 용 프로그램을 설치할 수 있습니다. PC와 Mac은 네트워크 (예 : Wi-Fi)를 통해 연결해야 합니다. Visual Studio는 SSH (Secure Shell) 인터페이스를 통해 Mac과 통신하고 Mac을 사용하여 응용 프로그램을 작성하고 장치 또는 시뮬레이터에서 프로그램을 실행합니다.

Mac의 Xamarin Studio 또는 PC의 Visual Studio에서 Android 프로그래밍을 수행할 수도 있습니다.

Windows 플랫폼을 대상으로하려면 Visual Studio 2015가 필요합니다. 네트워크를 통해 Mac에 연결된 PC에서 Visual Studio 2015를 실행하여 단일 IDE에서 모든 플랫폼을 대상으로 지정할 수 있습니다. (이 책의 샘플 프로그램이 만들어진 방법입니다.) 또 다른 옵션은 Mac의 가상 컴퓨터에서 Visual Studio를 실행하는 것입니다.

Device와 Emulator

여러분은 USB로 연결된 실제 폰을 대상으로 프로그램을 테스트할 수도 있고, 컴퓨터 상에서 에뮬레이터로 테스트할 수도 있습니다.

각각의 방법에는 장단점이 있는데, 실제 폰으로 하는 방법은 복잡한 터치 액션이나, 시작시간, 반응 시간 등을 테스트 하는데에 필수적입니다. 그러나 에뮬레이터는 다양한 크기와 모양에 어떻게 반응하는지를 살필 수가 있습니다.

iPhone 및 iPad 에뮬레이터는 Mac에서 실행됩니다. 그러나 Mac에는 터치 스크린이 없으므로 터치를 시뮬레이션하려면 마우스 또는 트랙 패드를 사용해야합니다. Mac 터치 패드의 터치 제스처는 에뮬레이터로 변환되지 않습니다. 실제 iPhone을 Mac에 연결할 수도 있지만 개발자 장치로 provisioning 해야 합니다.

역사적으로 Google에서 제공 한 Android 에뮬레이터는 너무나도 다양한 Android 기기를 에뮬레이션하는데 매우 적절하기는하지만, 느리고 까다로운 경향이 있습니다. 다행히도 Visual Studio에는 자체 Android 안드로이드 에뮬레이터가 있습니다. 또한 실제 Android 휴대 전화를 Mac 또는 PC에 연결하여 테스트하는 것은 쉽습니다. 기기에서 USB 디버깅을 활성화하기만 하면 됩니다.

Windows Phone 에뮬레이터는 여러 가지 화면 해상도가 가능하며 많은 메모리를 소모하긴 하지만 상당히 원활하게 실행됩니다. 터치 스크린에서 Windows Phone 에뮬레이터를 실행하는 경우 에뮬레이터 화면을 직접 터치 할 수 있습니다. 실제 Windows Phone을 PC에 연결하는 것은 간단하지만 설정 섹션에서 전화를 사용하도록 설정해야 개발할 수 있습니다. 하나 이상의 전화를 잠금 해제하려면 개발자 계정이 필요합니다.


Installation


Xamarin.Forms용 응용프로그램을 작성하기 전에 Mac, PC 또는 둘 다 (해당 설정을 사용하는 경우)에 Xamarin 플랫폼을 설치해야합니다. Xamarin 웹 사이트의 다음 글을 참조하십시오.


빨리 첫번째 Xamarin.Forms 앱을 만들고 싶겠지만, 그 전에  iPhone, Android 및 일반 Windows, Windows Phone 및 Windows Mobile 프로젝트 용 Xamarin 프로젝트를 반드시 각각 생성해봐야 합니다.

이것이 중요한 이유는, 만약 여러분이 각각의 Xamarin.iOS, Xamarin.Android, Windows에서 normal project를 생성하고 사용하는데 문제가 있다면, Xamarin.Forms를 사용하기 전에 개별 플랫폼에서 문제를 해결해야 하기 때문입니다.

iOS 앱 생성

iPhone을 타겟팅하기 위해 Xamarin.Forms를 사용하고 싶다면 먼저 Xamarin 웹 사이트에서 적절한 Getting started 문서를 숙지하기 바랍니다.


Xamarin.iOS 라이브러리를 사용하여 C #에서 iPhone 응용 프로그램을 개발하는 방법에 대한 지침을 제공합니다. 이 단계에선 실제 iPhone 또는 iPhone 시뮬레이터에서 간단한 iPhone 응용 프로그램을 빌드하고 배포 할 수있는 지점에 도달하기만 하면 됩니다.

Visual Studio를 사용하고 있고 모든 것이 올바르게 설치되어있는 경우, 메뉴에서 파일> 새로 만들기> 프로젝트를 선택하고 새 프로젝트 대화 상자의 왼쪽에서 Visual C# iOS를 선택한 다음 Universal(iPhone 및 iPad 모두 타겟팅), 중앙의 템플릿 목록에서 Blank App (iOS)을 선택합니다.

Xamarin Studio를 사용하는 경우, 메뉴에서 파일> 새로 만들기> 솔루션을 선택하고 왼쪽의 새 프로젝트 대화 상자에서 iOS를 선택한 다음 App을 선택하고 중앙의 템플릿 목록에서 Single View App을 선택합니다.

두 경우 모두 솔루션의 위치와 이름을 선택하십시오. 프로젝트에서 생성된 골격 응용 프로그램을 빌드하고 배포하십시오. 이 문제가 발생하면 Xamarin.Forms 문제가 아닙니다. Xamarin.iOS 포럼을 통해 다른 사람과 비슷한 문제가 있는지 확인할 수 있습니다.


Android 앱 생성

안드로이드를 타겟팅하길 원하시면 아래의 자마린 Getting started 사이트를 참고하세요.


Visual Studio를 사용하고 있고 모든 것이 올바르게 설치되어 있는 경우, 메뉴에서 파일> 새로 만들기> 프로젝트를 선택하고 새 프로젝트 대화 상자의 왼쪽에서 Visual C#을 선택한 다음 Android를 선택해야합니다. 중앙의 템플릿 목록에서 Blank App(Android)을 선택합니다.

Xamarin Studio를 사용하는 경우 메뉴에서 파일> 새로 만들기> 솔루션을 선택하고 왼쪽의 새 프로젝트 대화 상자에서 AndroidApp를 선택하고 중앙의 템플릿 목록에서 Android App을 선택해야합니다.

위치와 이름을 지정하십시오. 빌드하고 배포하십시오. 이 프로세스가 작동하지 않는다면 Xamarin.Forms 문제가 아니며 Xamarin.Android 포럼에서 유사한 문제를 확인할 수 있습니다.

http://forums.xamarin.com/categories/android/

Windows 앱 생성


윈도우 계열 개발을 타겟팅한다면 아래의 사이트를 방문해 보시기 바랍니다.

http://dev.windows.com/

Visual Studio 2015에서 모든 것이 올바르게 설치 되었다면 메뉴에서 파일> 새로 만들기> 프로젝트를 선택하고 왼쪽의 새 프로젝트 대화 상자에서 Visual C # 및 Windows를 선택해야합니다. Windows 제목 아래에 다음과 같은 계층 구조가 표시됩니다.
(여기서 잠깐...저는 해당 항목이 보이지 않아서 당황했습니다. UWP용 비주얼 스튜디오 도구들을 설치하려면 먼저 C#이 아닌 Visual C++ 항목으로 가서 "Universal Windows Platform Tools"를 먼저 설치하시기 바랍니다...)


아래 유니버설은 Windows 10 또는 Windows 10 Mobile을 대상으로하는 범용 Windows 플랫폼 응용 프로그램을 만드는 데 사용됩니다. 그것을 선택하고 중앙 영역에서 비어 있는 앱 (유니버설 Windows)을 선택하여 UWP 응용 프로그램을 만듭니다.

Xamarin.Forms에서 지원하는 다른 두 프로젝트 유형은 Windows 8 헤더에 있습니다. 범용 항목은 실제로 Windows 데스크톱 응용 프로그램과, 코드를 공유하는 Windows Phone 응용 프로그램이라는 두 개의 프로젝트를 만듭니다. Windows 응용 프로그램만 만들려면 Windows를 선택한 다음 가운데 섹션 비어 있는 앱 (Windows 8.1)을 선택합니다. Windows Phone 응용 프로그램의 경우 Windows Phone을 선택하고 비어 있는 앱(Windows phone)을 선택하면 Windows Phone 8.1을 대상으로하는 프로젝트가 만들어집니다.

이것이 Xamarin.Forms가 제공하는 세가지 프로젝트 타입입니다.

이 스켈레톤 애플리케이션을 빌드하여 데스크탑이나 실제 전화기 또는 에뮬레이터에 배포 할 수 있어야 합니다. 그렇지 않은 경우 스택 오버플로와 같은 포럼이나 Microsoft 웹 사이트 등을 참고 하십시오.

준비 됐나요?

여러분이 Xamarin.iOS, Xamarin.Android, UWP, WinRT를 각각 빌드할 수 있었다면 이제 여러분은 첫번째 Xamarin.Forms 앱을 만들어 보실 준비가 된 겁니다.
"Hello, Xamarin.Forms"를 외칠 시간입니다.

댓글 없음:

댓글 쓰기