Hello, Android

Xamarin으로 Android 개발하기

이 두 파트로 구성된 가이드에서는 Xamarin.Android 응용 프로그램 (Xamarin Studio 또는 Visual Studio 사용)을 작성하고 Xamarin을 사용하여 Android 응용 프로그램 개발의 기본 사항을 이해합니다. 여기서는 Xamarin.Android 응용 프로그램을 빌드하고 배포하는데 필요한 도구 개념 및 단계를 소개합니다.

Hello, Android 빠른 시작

이 예제에서는 사용자가 입력한 영숫자 전화 번호를 숫자 전화 번호로 변환한 다음 해당 번호로 전화하는 응용 프로그램을 만듭니다. 최종 응용 프로그램은 다음과 같습니다.

요구 사항

이 예제을 수행하려면 다음이 필요합니다.

– Windows 7 이상
– Visual Studio 2012 Professional 이상

이 예제에서는 최신 버전의 Xamarin.Android가 설치되어 플랫폼에서 실행되고 있다고 가정합니다. Xamarin.Android 설치 가이드는 Xamarin.Android 설치 가이드를 참조하십시오. 시작하기 전에 Xamarin App Icons & Launch Screens 세트를 다운로드하여 압축을 풉니다.

에뮬레이터 구성

Google의 Android SDK 에뮬레이터를 사용하는 경우 하드웨어 가속을 사용하도록 에뮬레이터를 구성하는 것이 좋습니다. 하드웨어 가속 구성에 대한 지침은 아래 URL을 참고하세요.
https://developer.xamarin.com/guides/android/getting_started/installation/accelerating_android_emulators

Visual Studio Android 에뮬레이터를 사용하는 경우 컴퓨터에서 Hyper-V를 사용하도록 설정해야 합니다. Visual Studio Android 에뮬레이터 구성에 대한 자세한 내용은 Android 용 Visual Studio 에뮬레이터의 시스템 요구 사항을 참조하십시오.

예제

1. Visual Studio를 시작하세요.

2. Start > New Project를 클릭하여 새 프로젝트를 만듭니다.

3. 새 프로젝트 대화 상자에서 Visual C#> Android를 클릭하고 빈 응용 프로그램 (Android) 템플릿을 선택합니다. 새 프로젝트의 이름을 ‘Phoneword’로 지정하십시오. 확인을 클릭하여 새 프로젝트를 만듭니다.

4. 새 프로젝트를 만든 후 리소스 폴더를 확장한 다음 솔루션 탐색기에서 레이아웃 폴더를 확장합니다. Main.axml을 두 번 클릭하여 Android Designer에서 엽니다. 다음은 화면 레이아웃 파일입니다.

5. ‘Hello World, Click Me! Button’을 선택하십시오! 디자인 화면의 버튼을 클릭하고 Delete 키를 눌러 제거합니다. 도구 상자 (왼쪽 영역)에서 검색 필드에 텍스트를 입력하고 텍스트 (Large) 컨트롤을 디자인 화면 (가운데의 영역)으로 끌어옵니다.

6. 디자인 화면에서 텍스트 (Large) 컨트롤을 선택한 상태에서 Properties 창을 사용하여 텍스트 (Large) 컨트롤의 텍스트 속성을 다음과 같이 ‘Enter a Phoneword:’으로 변경할 수 있습니다.

7. 일반(Plain) 텍스트 위젯을 도구 상자에서 디자인 화면으로 드래그하여 텍스트 (큰) 위젯 아래 놓습니다. 검색 필드를 사용하여 이름으로 위젯을 찾을 수 있습니다.

8. 디자인 화면에서 일반 텍스트 컨트롤을 선택한 상태에서 속성 창을 사용하여 일반 텍스트 컨트롤의 id 속성을 ‘@+id/PhoneNumberText’로 변경하고 텍스트 속성을 ‘1-855-XAMARIN’으로 변경할 수 있습니다.

9. 버튼을 도구 상자에서 디자인 화면으로 드래그하여 일반 텍스트 위젯 아래에 놓습니다.

10. 디자인 화면에서 버튼을 선택한 상태에서 속성 창을 사용하여 Button의 id 속성을 ‘@+id/TranslateButton’으로 변경하고 text 속성을 Translate로 변경할 수 있습니다.

11. 두 번째 버튼을 도구 상자에서 디자인 화면으로 드래그하고 Translate 버튼 아래에 배치합니다.

12. 디자인 화면에서 새 Button 컨트롤을 선택한 상태에서 속성 창을 사용하여 Button의 id 속성을 ‘@+id/CallButton’으로 변경하고 text 속성을 ‘Call’로 변경할 수 있습니다.

CTRL + S를 눌러 작업 내용을 저장하십시오.

13. 다음 단계는 전화 번호를 영숫자에서 숫자로 변환하는 코드를 추가하는 것입니다. 솔루션 탐색기 창에서 Phoneword 프로젝트를 마우스 오른쪽 버튼로 클릭하고 Add > New Item을 선택하여 프로젝트에 새 파일을 추가하십시오.

14. 새 항목 추가 대화 상자에서 Visual C# > Code를 선택하고 새 코드 파일의 이름을 PhoneTranslator.cs로 지정합니다.

15. 이렇게하면 새로운 빈 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;
        }
    }
}

File > Save (또는 CTRL + S)를 눌러서 PhoneTranslator.cs 파일에 변경 사항을 저장한 다음 파일을 닫습니다. 솔루션을 다시 빌드하여 컴파일시 오류가 없는지 확인하십시오.

16. 그런 다음 MainActivity 클래스에 코드를 삽입하여 사용자 인터페이스를 연결하는 코드를 추가합니다. 솔루션 탐색기에서 MainActivity.cs를 두 번 클릭하여 엽니다.

17. Translate 버튼을 연결하여 시작하십시오. MainActivity 클래스에서 OnCreate 메서드를 찾습니다. 버튼 코드를 OnCreate 내부에 base.OnCreate (번들) 및 SetContentView (Resource.Layout.Main) 호출 아래에 추가합니다. OnCreate 메서드가 다음과 유사하도록 템플릿 버튼 처리 코드를 제거합니다.

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
        }
    }
}

18. Android Designer를 통해 레이아웃 파일에서 생성된 컨트롤에 대한 참조를 가져옵니다. SetContentView를 호출한 후 OnCreate 메서드 내에 다음 코드를 추가합니다.

// 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);

19. 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;
    }
};

20. 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();
};

21. 마지막으로 응용 프로그램에 전화를 걸 수 있는 권한을 부여해야 합니다. 앱 권한은 Android Manifest에서 수정할 수 있습니다. 솔루션 탐색기에서 Phoneword 아래의 Properties를 두 번 클릭하여 Android Manifest를 연 다음 Android Manifest 페이지를 선택합니다.

필요한 권한(Required Permissions) 아래에서 CALL_PHONE 권한을 활성화합니다.

22. File > Save All (또는 CTRL-SHIFT-S)을 선택하고 Build > Rebuild Solution을 선택하거나 CTRL-SHIFT-B를 눌러 애플리케이션을 빌드하십시오. 응용 프로그램이 컴파일되면 Visual Studio의 왼쪽 하단에 성공 메시지가 표시됩니다.

오류가 있는 경우 이전 단계를 살피면서 응용 프로그램이 성공적으로 빌드될 때까지 오류를 수정하십시오. 현재 컨텍스트에 리소스가 없으면(빌드 오류가 발생하면) MainActivity.cs의 네임 스페이스 이름이 프로젝트 이름 (Phoneword)과 일치하는지 확인한 다음 솔루션을 완전히 다시 빌드하십시오. 여전히 빌드 오류가 발생하면 최신 Xamarin.Android 업데이트가 설치되어 있는지 확인하십시오.

23. 이제 제대로 작동하는 응용 프로그램을 완성했나요? 마무리 작업을 추가할 차례입니다! MainActivity의 라벨을 편집하십시오. 라벨은 Android가 화면 상단에 표시되어 사용자가 애플리케이션의 위치를 ​​알 수 있도록 합니다. MainActivity 클래스의 맨 위에서 Label을 Phone Word로 변경합니다.

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

24. 그런 다음 응용 프로그램 아이콘을 설정하십시오. 먼저 Xamarin 앱 아이콘 세트를 다운로드하여 압축을 풉니다. 그런 다음 리소스 아래의 드로어블(drawable) 폴더를 확장하고 마우스 오른쪽 버튼로 클릭하고 삭제를 선택하여 기존 Icon.png을 제거하십시오.

다음 대화 상자가 표시되면 확인을 클릭하십시오.

25. 그런 다음 드로어블 폴더를 마우스 오른쪽 버튼으로 클릭하고 Add > Existing Item을 선택하십시오.

26. 선택 대화 상자에서 압축을 해제한 Xamarin App Icons 디렉토리로 이동한 다음 드로어블 폴더를 엽니다. Icon.png를 선택하고 Add를 클릭하십시오.

27. 그런 다음 나머지 Xamarin App 아이콘 드로어블 폴더를 프로젝트에 추가합니다. 이 폴더는 아이콘의 해상도가 다르기 때문에 화면 밀도가 다른 여러 장치에서 올바르게 렌더링 됩니다. 파일 탐색기 창에서 압축되지 않은 Xamarin App Icons 디렉토리로 이동 한 다음 드로어블 폴더를 선택하십시오.

이러한 폴더를 Visual Studio 솔루션 탐색기 창의 리소스 폴더로 끌어옵니다. 이 폴더는 이제 오른쪽의 솔루션 탐색기에 표시된 프로젝트의 일부입니다.

28. Application Icon 드랍다운 메뉴에서 ‘@drawable/Icon’을 선택하여 Android Manifest에서 아이콘을 지정하십시오.

29. 마지막으로 에뮬레이터에 응용 프로그램을 배포하여 응용 프로그램을 테스트할 수 있습니다. 이 예에서는 Nexus 5 (KitKat)라는 가상 장치가 사용됩니다. 이 가상 장치는 Android AVD Manager를 통해 구성되었습니다 (Android SDK 에뮬레이터에서 설명한대로). 그러나 장치 드랍다운 메뉴에서 사용 가능한 미리 구성된 장치 중 하나를 사용할 수 있습니다.

앱을 이 에뮬레이터에 보내기 전에 앱의 최소 Android 버전을 구성하여 선택한 가상 장치에서 실행되도록 하십시오. Visual Studio에서 속성의 응용 프로그램 페이지를 엽니다. ‘Minimum Android to target:’에서 사용중인 가상 장치의 API 수준과 일치하도록 API 수준을 설정합니다. 이 예에서는 앱이 Nexus 5 (KitKat) 가상 기기에서 실행되도록 API 레벨 19가 선택되었습니다. Android API 레벨에 대한 자세한 내용은 Android API 레벨 이해를 참조하십시오.

30. 그런 다음 아래 그림과 같이 툴바의 드랍다운 메뉴에서 앱을 기기에 배포합니다.

Visual Studio는 앱을 설치 및 실행하기 전에 이 에뮬레이터에 파일을 복사합니다.

31. 아래 스크린 샷은 Android SDK Emulator에서 실행되는 Phoneword 애플리케이션을 보여줍니다. Translate 버튼을 클릭하면 통화 버튼의 텍스트가 업데이트 되고 통화 버튼을 클릭하면 오른쪽과 같이 통화 대화 상자가 나타납니다.

첫 번째 Xamarin.Android 응용 프로그램을 작성하신 것을 축하드립니다! 이제 방금 배운 도구와 기술을 해부할 시간입니다. 다음은 Hello Android Deep Dive입니다.

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

자마린 폼[Xamarin.Forms] – Quickstart 바로가기