모든 자마린 글 보기 (클릭!!)
자마린과 닮은 퓨즈[Fusetools] 알아보기 (클릭!!)

Xamarin.Forms 빠른 시작

이 예제에서는 사용자가 입력한 영숫자 전화 번호를 숫자 전화 번호로 변환하고 번호를 호출하는 응용 프로그램을 만드는 방법을 보여줍니다. 최종 앱은 아래와 같습니다.

다음과 같이 Phoneword 응용 프로그램을 만듭니다.

1. 시작 화면에서 Visual Studio를 시작합니다. 시작 페이지가 열립니다.

2. Visual Studio에서 새 프로젝트(New Project)를 클릭하여 새 프로젝트를 만듭니다.

3. 새 프로젝트 대화 상자에서 크로스 플랫폼을 클릭하고 빈 Xaml 응용 프로그램 (Xamarin.Forms Portable) 템플릿을 선택하고 이름 및 솔루션 이름을 Phoneword로 설정하고 프로젝트에 적합한 위치를 선택한 다음 확인 버튼을 클릭합니다.

4. 솔루션 탐색기(Solution Explorer)에서 Phoneword 솔루션을 마우스 오른쪽 버튼으로 클릭하고 솔루션에 대한 NuGet 패키지 관리(Manage NuGet Packages for Solution)를 선택하십시오.

5. 솔루션 패키지 관리 대화 상자에서 업데이트 탭을 선택하고 Xamarin.Forms 패키지를 선택한 다음 패키지를 최신 안정 릴리스로 업데이트 하십시오.

6. 솔루션 탐색기의 Phoneword 프로젝트에서 MainPage.xaml을 두 번 클릭하여 엽니다.

7. 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"
             x:Class="Phoneword.MainPage">
     <ContentPage.Padding>
        <OnPlatform x:TypeArguments="Thickness"
                    iOS="20, 40, 20, 20"
                    Android="20, 20, 20, 20"
                    WinPhone="20, 20, 20, 20" />
     </ContentPage.Padding>
    <ContentPage.Content>
        <StackLayout VerticalOptions="FillAndExpand"
                     HorizontalOptions="FillAndExpand"
                     Orientation="Vertical"
                     Spacing="15">
            <Label Text="Enter a Phoneword:" />
            <Entry x:Name="phoneNumberText" Text="1-855-XAMARIN" />
            <Button x:Name="translateButon" Text="Translate" Clicked="OnTranslate" />
            <Button x:Name="callButton" Text="Call" IsEnabled="false" Clicked="OnCall" />
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

CTRL + S를 눌러 MainPage.xaml에 변경 사항을 저장하고 파일을 닫습니다.

8. 솔루션 탐색기에서 MainPage.xaml을 확장하고 MainPage.xaml.cs를 두 번 클릭하여 엽니다.

9. MainPage.xaml.cs에서 모든 서식 파일 코드를 제거하고 다음 코드로 바꿉니다. OnTranslate 및 OnCall 메서드는 각각 사용자 인터페이스에서 클릭되는 Translate 및 Call 버튼에 대한 응답으로 실행됩니다.

using System;
using Xamarin.Forms;

namespace Phoneword
{
    public partial class MainPage : ContentPage
    {
        string translatedNumber;

        public MainPage ()
        {
            InitializeComponent ();
        }

        void OnTranslate (object sender, EventArgs e)
        {
            translatedNumber = Core.PhonewordTranslator.ToNumber (phoneNumberText.Text);
            if (!string.IsNullOrWhiteSpace (translatedNumber)) {
                callButton.IsEnabled = true;
                callButton.Text = "Call " + translatedNumber;
            } else {
                callButton.IsEnabled = false;
                callButton.Text = "Call";
            }
        }

        async void OnCall (object sender, EventArgs e)
        {
            if (await this.DisplayAlert (
                    "Dial a Number",
                    "Would you like to call " + translatedNumber + "?",
                    "Yes",
                    "No")) {
                var dialer = DependencyService.Get<IDialer> ();
                if (dialer != null)
                    dialer.Dial (translatedNumber);
            }
        }
    }
}

CTRL + S를 눌러 MainPage.xaml.cs에 변경 사항을 저장하고 파일을 닫습니다.

10. 솔루션 탐색기에서 App.xaml을 확장하고 App.xaml.cs를 두 번 클릭하여 엽니다.

11. App.xaml.cs에서 템플릿 코드를 모두 제거하고 다음 코드로 바꿉니다. App 생성자는 MainPage 클래스를 응용 프로그램이 시작될 때 표시될 페이지로 설정합니다.

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

[assembly: XamlCompilation(XamlCompilationOptions.Compile)]
namespace Phoneword
{
    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
        }
    }
}

CTRL + S를 눌러 App.xaml.cs의 변경 사항을 저장하고 파일을 닫습니다.

12. 솔루션 탐색기에서 Phoneword 프로젝트를 마우스 오른쪽 버튼으로 클릭하고 Add > New Item을 선택하십시오.

13. 새 항목 추가 대화 상자에서 Visual C# > Code > Class를 선택하고 PhoneTranslator라는 새 파일 이름을 지정하고 추가 버튼을 클릭합니다.

14. PhoneTranslator.cs에서 템플릿 코드를 모두 제거하고 다음 코드로 바꿉니다. 이 코드는 전화 단어를 전화 번호로 변환합니다.

using System.Text;

namespace Core
{
    public static class PhonewordTranslator
    {
        public static string ToNumber(string raw)
        {
            if (string.IsNullOrWhiteSpace(raw))
                return null;

            raw = raw.ToUpperInvariant();

            var newNumber = new StringBuilder();
            foreach (var c in raw)
            {
                if (" -0123456789".Contains(c))
                    newNumber.Append(c);
                else
                {
                    var result = TranslateToNumber(c);
                    if (result != null)
                        newNumber.Append(result);
                    // Bad character?
                    else
                        return null;
                }
            }
            return newNumber.ToString();
        }

        static bool Contains(this string keyString, char c)
        {
            return keyString.IndexOf(c) >= 0;
        }

        static readonly string[] digits = {
            "ABC", "DEF", "GHI", "JKL", "MNO", "PQRS", "TUV", "WXYZ"
        };

        static int? TranslateToNumber(char c)
        {
            for (int i = 0; i < digits.Length; i++)
            {
                if (digits[i].Contains(c))
                    return 2 + i;
            }
            return null;
        }
    }
}

CTRL + S를 눌러 PhoneTranslator.cs에 변경 사항을 저장하고 파일을 닫습니다.

15. 솔루션 탐색기에서 Phoneword 프로젝트를 마우스 오른쪽 버튼으로 클릭하고 Add > New Item을 선택하십시오.

16. 새 항목 추가 대화 상자에서 Visual C# > Code > Interface를 선택하고 새 파일의 이름을 IDialer로 지정한 다음 추가 버튼을 클릭합니다.

17. IDialer.cs에서 템플릿 코드를 모두 제거하고 다음 코드로 바꿉니다. 이 코드는 번역된 전화 번호로 전화를 걸기 위해 각 플랫폼에서 구현해야 하는 Dial 메서드를 정의합니다.

namespace Phoneword
{
    public interface IDialer
    {
        bool Dial(string number);
    }
}

Ctrl + S 키를 눌러 IDialer.cs 변경 내용을 저장하고 파일을 닫습니다.

[[ 노트 ]]
응용 프로그램의 공통 코드가 이제 완료되었습니다. 이제 플랫폼별 전화 걸기 코드가 DependencyService로 구현됩니다.

18. 솔루션 탐색기에서 Phoneword.iOS 프로젝트를 마우스 오른쪽 버튼으로 클릭하고 Add > New Item을 선택하십시오.

19. 새 항목 추가 대화 상자에서 Apple > Code > Class를 선택하고 PhoneDialer라는 새 파일 이름을 지정하고 추가 버튼을 클릭하십시오.

20. PhoneDialer.cs에서 템플릿 코드를 모두 제거하고 다음 코드로 바꿉니다. 이 코드는 iOS 플랫폼에서 번역된 전화 번호로 전화를 걸기 위해 사용되는 Dial 메서드를 만듭니다.

using Foundation;
using Phoneword.iOS;
using UIKit;
using Xamarin.Forms;

[assembly: Dependency(typeof(PhoneDialer))]
namespace Phoneword.iOS
{
    public class PhoneDialer : IDialer
    {
        public bool Dial(string number)
        {
            return UIApplication.SharedApplication.OpenUrl (
                new NSUrl ("tel:" + number));
        }
    }
}

CTRL + S를 눌러 PhoneDialer.cs의 변경 사항을 저장하고 파일을 닫습니다.

21. 솔루션 탐색기에서 Phoneword.Droid 프로젝트를 마우스 오른쪽 버튼으로 클릭하고 Add > New Item을 선택하십시오.

22. 새 항목 추가 대화 상자에서 Visual C# > Android > Class를 선택하고 PhoneDialer라는 새 파일의 이름을 지정한 다음 추가 버튼을 클릭합니다.

23. PhoneDialer.cs에서 템플릿 코드를 모두 제거하고 다음 코드로 바꿉니다. 이 코드는 Android 플랫폼에서 번역된 전화 번호로 전화를 걸기 위해 사용할 Dial 메서드를 만듭니다.

using Android.Content;
using Android.Telephony;
using Phoneword.Droid;
using System.Linq;
using Xamarin.Forms;
using Uri = Android.Net.Uri;

[assembly: Dependency(typeof(PhoneDialer))]
namespace Phoneword.Droid
{
    public class PhoneDialer : IDialer
    {
        public bool Dial(string number)
        {
            var context = Forms.Context;
            if (context == null)
                return false;

            var intent = new Intent (Intent.ActionCall);
            intent.SetData (Uri.Parse ("tel:" + number));

            if (IsIntentAvailable (context, intent)) {
                context.StartActivity (intent);
                return true;
            }

            return false;
        }

        public static bool IsIntentAvailable(Context context, Intent intent)
        {
            var packageManager = context.PackageManager;

            var list = packageManager.QueryIntentServices (intent, 0)
                .Union (packageManager.QueryIntentActivities (intent, 0));

            if (list.Any ())
                return true;

            var manager = TelephonyManager.FromContext (context);
            return manager.PhoneType != PhoneType.None;
        }
    }
}

CTRL + S를 눌러 PhoneDialer.cs의 변경 사항을 저장하고 파일을 닫습니다.

24. 솔루션 탐색기의 Phoneword.Droid 프로젝트에서 속성을 두 번 클릭하고 Android Manifest 탭을 선택합니다.

25. 필수 사용 권한(Required permissions) 섹션에서 CALL_PHONE 사용 권한을 사용하도록 설정합니다. 그러면 응용 프로그램에서 전화를 걸 수있는 권한이 부여됩니다.

CTRL + S를 눌러 매니페스트에 대한 변경 사항을 저장하고 파일을 닫습니다.

26. 솔루션 탐색기에서 Phoneword.UWP 프로젝트를 마우스 오른쪽 버튼으로 클릭하고 Add > New Item을 선택하십시오.

27. 새 항목 추가 대화 상자에서 Visual C# > Code > Class를 선택하고 PhoneDialer라는 새 파일의 이름을 지정한 다음 추가 버튼을 클릭합니다.

28. PhoneDialer.cs에서 템플릿 코드를 모두 제거하고 다음 코드로 바꿉니다. 이 코드는 범용 Windows 플랫폼에서 변환된 전화 번호로 전화를 걸기 위해 사용되는 Dial 메서드 및 도우미 메서드를 만듭니다.

using Phoneword.UWP;
using System;
using System.Threading.Tasks;
using Windows.ApplicationModel.Calls;
using Windows.UI.Popups;
using Xamarin.Forms;

[assembly: Dependency(typeof(PhoneDialer))]
namespace Phoneword.UWP
{
    public class PhoneDialer : IDialer
    {
        bool dialled = false;

        public bool Dial(string number)
        {
            DialNumber(number);
            return dialled;
        }

        async void DialNumber(string number)
        {
            var phoneLine = await GetDefaultPhoneLineAsync();
            if (phoneLine != null)
            {
                phoneLine.Dial(number, number);
                dialled = true;
            }
            else
            {
                var dialog = new MessageDialog("No line found to place the call");
                await dialog.ShowAsync();
                dialled = false;
            }
        }

        async Task<PhoneLine> GetDefaultPhoneLineAsync()
        {
            var phoneCallStore = await PhoneCallManager.RequestStoreAsync();
            var lineId = await phoneCallStore.GetDefaultLineAsync();
            return await PhoneLine.FromIdAsync(lineId);
        }
    }
}

CTRL + S를 눌러 PhoneDialer.cs의 변경 사항을 저장하고 파일을 닫습니다.

29. 솔루션 탐색기의 Phoneword.UWP 프로젝트에서 ‘References’를 마우스 오른쪽 버튼으로 클릭하고 Add Reference를 선택합니다.

30. 참조 관리자 대화 상자에서 ‘Universal Windows > Extensions > Windows Mobile Extensions for UWP’를 선택한 다음 확인 버튼을 클릭합니다.

31. 솔루션 탐색기의 Phoneword.UWP 프로젝트에서 Package.appxmanifest를 두 번 클릭합니다.

32. 기능 페이지에서 전화 통화 기능을 사용하도록 설정합니다. 그러면 응용 프로그램에서 전화를 걸 수 있는 권한이 부여됩니다.

CTRL + S를 눌러 매니페스트에 대한 변경 사항을 저장하고 파일을 닫습니다.

33. Visual Studio에서 ‘Build > Build Solution’ 메뉴 항목을 선택하거나 CTRL + SHIFT + B를 누릅니다. 응용 프로그램이 빌드되고 성공 메시지가 Visual Studio 상태 표시줄에 나타납니다.

오류가 있는 경우 이전 단계를 반복하고 응용 프로그램이 성공적으로 빌드될 때까지 실수를 수정하십시오.

34. 솔루션 탐색기에서 Phoneword.UWP 프로젝트를 마우스 오른쪽 버튼으로 클릭하고 시작 프로젝트로 설정을 선택하십시오.

35. Visual Studio 도구 모음에서 시작 버튼 (재생 버튼와 유사한 삼각형 버튼)를 눌러 응용 프로그램을 시작합니다.

36. 솔루션 탐색기에서 Phoneword.Droid 프로젝트를 마우스 오른쪽 버튼으로 클릭하고 시작 프로젝트로 설정(Set as StartUp Project)을 선택하십시오.
37. Visual Studio 도구 모음에서 시작 버튼 (재생 버튼과 유사한 삼각형 버튼)을 눌러 Android 시뮬레이터 내에서 응용 프로그램을 시작합니다.
38. iOS 장치가 있고 Xamarin.Forms 개발을 위한 Mac 시스템 요구 사항을 충족하는 경우 비슷한 기술을 사용하여 iOS 장치에 응용 프로그램을 배포하십시오. 참고로 시뮬레이터에서는 전화 통화가 지원되지 않습니다.

축하합니다. Xamarin.Forms 응용 프로그램을 완료했습니다. 이 가이드의 다음 항목에서는 Xamarin.Forms를 사용하여 응용 프로그램 개발의 기본 사항을 이해하기 위해 이 예제에서 수행된 단계를 검토합니다.

자마린[Xamarin] Hello.iOS – Quickstart 바로가기

자마린[Xamarin] Hello.Android – Quickstart 바로가기

모든 자마린 글 보기 (클릭!!)
자마린과 닮은 퓨즈[Fusetools] 알아보기 (클릭!!)