[Getting Started - Hello, Android - Part 1:Quickstart] Hello, Android

원문 : http://developer.xamarin.com/guides/android/getting_started/hello,android/hello,android_quickstart/

자마린 Android 개발 소개

두 가이드는 Xamarin Studio 혹은 Visual Studio 를 사용해 첫번째 Android 어플리케이션을 만들고,

Xamarin Android 어플리케이션 개발의 기초와 이해한다.

도구, 개념 그리고 단계별 필요한 것들을 Xamarin.Android 어플리케이션을 만들고, 배포하며 소개할 것이다.

Hello, Android Quickstart

이번 연습은, 사용자가 입력한 것을 숫자로 변환해 해당 전화번호를 호출하는 어플리케이션을

만든다. 최종 본은 아래와 같다.

시작해 볼까요!

요구사항

Xamarin.Android는 다음 설정에 작동한다.

- OSX Mountain Lion 이상의 Xamarin Studio 최신버전

- Windows 7 이상의 Xamarin Studio 최신버전

- Windows 7 이상의 Visual Studio 2010 Professional 이상버전

이 연습은 당신의 PC에 Xamarin.Android의 최신버전을 설치하고 실행된다는 가정하입니다.

Xamarin.Android 설치 가이드는 Xamarin.Android Installation 설명서를 참조하세요. 시작하기전 Xamarin App Icons & Launch Screen 을 다운받이 압축을 풀고 실행해보세요.

에뮬레이터 구성

몇가지의 Android 에뮬레이터 옵션이 있다. 표준 Android 에뮬레이터는 설정이 간단하지만, 실행이 오래걸린다. Xamarin은 고성능 Xamarin Android Player를 사용할것을 권장한다. Xamarin Android Player를 사용하지 않는다면, 하드웨어 가속을 사용하도록 구성해야 한다. Accelerating Android Emulators 가이드에서 하드웨어 가속을 구성하는 방법을 알 수 있다.

연습

1. Xamarin Studio를 실행하자. 시작 페이지가 열린다.

2. "New Solution" 클릭해 새로운 프로젝트를 만든다.

3. "Choose a template for your new project" 대화창에서, "Android" > "App" 을 클릭하자 그리고 "Android App" 템플릿을 클릭한다.

4. "Configure your Android app" 대화창에서, "App name" 영역에 "Phonework" 를 입력한다.

5. "Configure your new project" 대화창에서, "Project name" 영역에 "Phoneword" 입력 후 "Create" 버튼을 눌러 프로젝트를 생성한다.

6. 프로젝트 생성후, "Solution" 패드에서 "Resources" 폴더를 확장하고 "layout" 폴더도 확장합니다. "Main.axml" 파일을 더블클릭하여 Android Designer 를 엽니다. 화면 레이아웃 파일입니다:

7. 디자인 표면에 "Hello World, Click Me!" 버튼을 선택하고 "Delete" 키를 눌러 삭제합니다. "Toolbox"(오른쪽 영역) 에서 "Text(Large)" 위젯을 디자인표면으로 드레그 하고 입력 필드에 "text"라고 입력한다.

8. 디자인 표면에서 "Text(Large)" 위젯을 선택하고, 아래 그림과 같이 변경하려면, "Text(Large)" 위젯의 "Text" 속성을 "Enter a Phoneword: " 을 사용할 수 있다.

Note : "View" > "Pads" 를 이용하면 언제든지 패드 속성을 가져올 수 있다.

9. 다음으로 "Plain Text" 위젯을 "Toolbox"에서 끌어다 "Text(Large)" 위제 아래다 놓습니다. 검색 필드에 이름으로 위젯을 찾을 수 있다.

10. 디자인 표면에 있는 "Plain Text" 위젯을 선택하고, 속성패드를 통해 "Plain Text" 위젯의 "ID" 속성을 "@+id/PhoneNumberText"로 변경하고 "Text" 속성을 "1-855-XAMARIN:"으로 변경할 수 있다.

11. "Toolbox"에서 디자인 표면으로 "Button" 을 "Plain Text"위젯 아래에 드래그 하자.

12. 디자인 표면에 "Button"을 선택하고, "ID" 속성을 "@+id/TranslateButton" 으로 변경하고, "Text" 속성을 "Translate:"로 변경할 수 있다.

13. "Toolbox"에서 버튼을 드래그하여 "Translate" 버튼 아래에 놓자.

14. "Button"을 선택하고, "ID"속성을 "@+id/callButton"으로, "Text" 속성을 "Call"로 변경할 수 있다.

15. 자, 알파번호에서 번호로 변경하는 코드를 추가하자. "Phoneword"프로젝트 기어아이콘을 확장클릭하고 보이는 팝업에서 "Add > New File" 을 선택해 새파일을 추가한다.

16. "New File" 대화창에서, "General" > "Empty Class" 를 선택하고, 이름은 "PhoneTranslator" 입력후 "New" 버튼 클릭

17. 기본 C#코드가 있는 클래스가 생성됩니다. 모든 코드를 지우고 아래 코드를 따라하세요.

using System.Text;
using System;

namespace Core
{
    public static class PhonewordTranslator
    {
        public static string ToNumber(string raw)
        {
            if (string.IsNullOrWhiteSpace(raw))
                return "";
            else
                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);
                }
                // otherwise we've skipped a non-numeric char
            }
            return newNumber.ToString();
        }
        static bool Contains (this string keyString, char c)
        {
            return keyString.IndexOf(c) >= 0;
        }
        static int? TranslateToNumber(char c)
        {
            if ("ABC".Contains(c))
                return 2;
            else if ("DEF".Contains(c))
                return 3;
            else if ("GHI".Contains(c))
                return 4;
            else if ("JKL".Contains(c))
                return 5;
            else if ("MNO".Contains(c))
                return 6;
            else if ("PQRS".Contains(c))
                return 7;
            else if ("TUV".Contains(c))
                return 8;
            else if ("WXYZ".Contains(c))
                return 9;
            return null;
        }
    }
}

이제 다음 파일을 닫습니다, 파일> 저장을 선택하여 (또는 ⌘ + S를 누르면) PhoneTranslator.cs 파일에 대한 변경 사항을 저장할 수 있습니다.

18. 다음으로 사용자 UI를 잇는 코드를 추가합니다. "MainActivity" 클래스 에 코드를 추가한다. "Solution"패드에서 "MainActivity.cs"파일을 더블클릭해 오픈 한다.

19. "Translate" 버튼 연결부터 시작한다. "MainActivity"클래스에 "Oncreate"매서드를 찾습니다. "OnCreate"내 "base.OnCreate(bundle)"아래 "setContentView(Resource.Layout.Main)" 호출 아래 버튼코드를 추가한다. 다음 코드와 같게 버튼핸들링 템플릿 코드를 삭제한다.

using System;
using Android.App;
using Android.Content;
using Android.Runtime;
using Android.Views;
using Android.Widget;
using Android.OS;

namespace Phoneword
{
    [Activity (Label = "Phoneword", MainLauncher = true)]
    public class MainActivity : Activity
    {
        protected override void OnCreate (Bundle bundle)
        {
            base.OnCreate (bundle);

            // Set our view from the "main" layout resource
            SetContentView (Resource.Layout.Main);

            // Our code will go here
        }
    }
}

20. 다음으로 Android 디자이너 레이아웃 파일에 만들어진 컨트롤을 참조가 필요하다. "OnCreate"메서드 안 "SetContentView"를 호출하는 코드 다음에 아래와 같이 코드를 추가한다.

// Get our UI controls from the loaded layout:
EditText phoneNumberText = FindViewById<EditText>(Resource.Id.PhoneNumberText);
Button translateButton = FindViewById<Button>(Resource.Id.TranslateButton);
Button callButton = FindViewById<Button>(Resource.Id.CallButton);

21. 자, 사용자가 "Translate"버튼을 눌렀을때 반응하는 코드를 추가한다. "OnCreate"메서드에 다음과 같이 코드를 추가한다.(이전 코드 입력 라인 이후)

// Disable the "Call" button
callButton.Enabled = false;

// Add code to translate number
string translatedNumber = string.Empty;

translateButton.Click += (object sender, EventArgs e) =>
{
    // Translate user's alphanumeric phone number to numeric
    translatedNumber = Core.PhonewordTranslator.ToNumber(phoneNumberText.Text);
    if (String.IsNullOrWhiteSpace(translatedNumber))
    {
        callButton.Text = "Call";
        callButton.Enabled = false;
    }
    else
    {
        callButton.Text = "Call " + translatedNumber;
        callButton.Enabled = true;
    }
};

22. 다음으로 "Call"버튼을 눌렀을때 반응하는 코드를 추가한다. "Translate"버튼 코드 아래에 다음과 같이 따라한다.

callButton.Click += (object sender, EventArgs e) =>
{
    // On "Call" button click, try to dial phone number.
    var callDialog = new AlertDialog.Builder(this);
    callDialog.SetMessage("Call " + translatedNumber + "?");
    callDialog.SetNeutralButton("Call", delegate {
           // Create intent to dial phone
           var callIntent = new Intent(Intent.ActionCall);
           callIntent.SetData(Android.Net.Uri.Parse("tel:" + translatedNumber));
           StartActivity(callIntent);
       });
    callDialog.SetNegativeButton("Cancel", delegate { });

    // Show the alert dialog to the user and wait for response.
    callDialog.Show();
};

23. 마지막으로, 어플리케이션에 전화를 걸기에 대한 권한을 부여하자. "Solution"패드에 오른쪽 마우스 클릭후 옵션을 선택해 대화상자를 엽니다. 

옵션 대화창에서 "Build" >  "Android Application"을 선택한다. "Required Permissions"에서 "CallPhone"권한을 체크한다.

24. 저장을 하고 "Build" > "Build All"을 선택하자. 어플리케이션이 컴파일됐다면, Xamarin Studio 상단에서 성고 메세지를 볼 수 있다.

만약 에러가 있다면, 이전 단계를 통해 성공적으로 빌드될때까지 수정할 수 있다.자원이 현재 컨텍스트에 존재하지 않는등과 같은 빌드 오류를 만난다면, "MainActivity.cs"의 네임스페이스 이름과 프로젝트(Phoneword)이름이 일치하는지 확인하고 다시 빌드한다. 여전히 빌드 오류가 발생한다면, Xamarin.Android 와 Xamarin Studio 가 최신버전인지를 확인한다.

25. 어플리케이션은 작동한다. - 이제 마무리 할 시간이다! "MainActivity"에서 "Label"을 편집하자. "Label"은 어플리케이션에서 어떤 화면 인지 사용자가 알 수 있도록 표시되는것이다. "MainActivity"클래스의 상단z"Label"을 "Phone Word"로 변경하자.

namespace Phoneword
{
    [Activity (Label = "Phone Word", MainLauncher = true)]
    public class MainActivity : Activity
    {
        ...
    }
}

26. 다음으로, 어플리케이션 아이콘을 설정하자. 첫번째로, Xamarin App Icons set을 다운로드해 압축해제하자. 다음으로, "Resource" 아래 "drawable-hdpi" 폴더를 확장하고 "Icon.png" 파일을 오른쪽 마우스 클릭을 이용해 삭제하자.

다음과 같은 대화상자가 보이면 "Delete"를 선택한다.

27. 다음으로, "drawable-hdpi"폴더에서 오른쪽 마우스 클릭후 "Add" > "Add Files"를 선택한다.

28. 선택 대화상자에서, Xamarin App Icons 압축해제한 디렉톡리로 이동하고 "drawable-hdpi" 폴더를 연다. "Icon.png"를 선택한다.

29. "Add File to Folder"대화상자에서, "Copy the file to the directory"를 선택하고 "OK"를 클릭한다.

30. Xamarin App Icons 내"drawable-*"의 각 폴더의 내용이 "Phoneword"프로젝트 폴더에 각각 복사될때까지 반복한다.

화면 밀도가 다른 장치에서 제대로 렌더링 될 수 있도록 폴더 아이콘의 서로다른 해상도를 제공한다.

31. 마지막으로, 에뮬레이터에 배포하여 테스트할 수 있다. 에뮤레이터를 구성하지 않았다면, 설치 지침에 대해 Xamarin Android Player 를 참조하세요. 이 예에서는 넥서스4(KitKat)(Android 4.4.2, API Level 19) 가상 장치를 설치하고 "Xamarin Android Player Device Manager" 콘솔에서 실행했다.

Xamarin Studio 에서, 가상 장치("Virtual Devices" 아래)를 선택하고 왼쪽 상단 모서리에 있는 재생 버튼을 클릭한다.

이 화면에 보이는것과 같이 "Xamarin Android Player" 에서 Nexus4(Kitkat)(API 19) 가상 머신이 실행되는걸 볼 수 있다

32. Xamarin Studio가 가상머신 내에 응용프로그램을 로드한후, "Phoneword" 어플리케이션이 자동으로 실행된다. 아래 스크린샷은 Xamarin Android Player에서 실행된 "Phoneword" 어플리케이션을 보여준다. 설치한 아이콘은 "MainActivity"에 구성한 "Phone Word"라벨에 표신된다. "Translate"버튼을 클릭하면 "Call"버튼의 텍스트를 갱신하고, "Call"버튼을 클릭하면 오른쪽과 같이 전화 대화상자가 보여진다.

첫번째 Android 어플리케이션 을 만든것에 대해 축하합니다! "Hello, Android Deep Dive"에서 우리가 배운 도구와 기술을 해부할 시간입니다.