Hello, iOS

Xamarin으로 iOS 개발하기

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

Hello.iOS 빠른 시작

이 가이드는 사용자가 입력한 영숫자 전화 번호를 숫자 전화 번호로 변환한 다음 해당 번호로 전화를 걸기 위해 응용 프로그램을 만드는 방법을 설명합니다. 최종 응용 프로그램은 다음과 같습니다.

자, 이제 시작합니다!

요구 사항

Xamarin을 사용한 iOS 개발에는 다음이 필요합니다.

– OS X Yosemite (10.10) 이상을 실행하는 Mac.
– App Store에서 설치된 Xcode 및 iOS SDK의 최신 버전.

Xamarin.iOS는 다음 설정 중 하나와 함께 작동합니다.

– 위 사양에 맞는 Mac의 Xamarin Studio 최신 버전.
– 최신 버전의 Visual Studio Professional 이상 (Windows 7 이상). 위의 사양에 맞는 Mac 빌드 호스트와 함께 사용됩니다. 이 설정에는 Xamarin Business License 또는 평가판이 필요합니다.

Xamarin.iOS OS X 설치 가이드는 단계별 설치 지침을 제공합니다

[[ 노트 ]]
Windows의 Xamarin Studio에서는 Xamarin.iOS를 사용할 수 없습니다.

시작하기 전에 Xamarin App 아이콘과 Launch Screens 세트를 다운로드 하십시오.

Visual Studio 예제

이 예제에서는 영숫자 전화 번호를 숫자 전화 번호로 변환하는 Phoneword라는 응용 프로그램을 만드는 방법을 설명합니다.

[[ 노트 ]]
이 예제에서는 Windows 10 가상 컴퓨터에서 Visual Studio 2015를 사용합니다. 여러분의 설정과 스크린샷이 다를 수 있습니다.

1. 시작 메뉴에서 Visual Studio를 시작합니다.

왼쪽 상단에서 새 솔루션(New Solution)을 클릭하여 새 Xamarin.iOS 솔루션을 만듭니다.

2. 새 프로젝트 대화 상자에서 ‘Visual C# > iOS > iPhone > Single View Application’ 템플릿을 선택합니다. 아래와 같이 Project Phoneword_iOS와 새로운 Solution Phoneword의 이름을 지정하십시오

3. 확인을 눌러 새 프로젝트를 만듭니다.
4. 프로젝트가 생성되면 Xamarin Mac Agent 대화 상자가 나타납니다. Visual Studio와 Mac 빌드 호스트 간의 연결을 제어합니다. Mac이 올바르게 구성 되었다면 아래 그림과 같이 Mac이 목록에 나타나야 합니다.

5. 목록에서 Mac을 선택하고 연결 버튼을 누릅니다. 이것은 매우 중요합니다! Mac 호스트와의 협의가 없으면 Visual Studio에서 iOS 디자이너를 실행하거나 시뮬레이터에 응용 프로그램을 배포할 수 없습니다.
6. 솔루션 탐색기에서 Main.storyboard 파일을 두 번 클릭하여 엽니다.

7. Designer 툴바에서 View As를 클릭하고 Generic에서 iPhone 6으로 변경합니다.

8. 도구 상자 탭에서 검색 막대에 “label”을 입력하고 레이블을 디자인 화면 (가운데 영역)으로 드래그합니다.

9. 그런 다음 드래깅 컨트롤 (Dragging Controls, 컨트롤 주위의 원 – ‘뼈’처럼 보이지 않는)의 핸들을 잡고 레이블을 넓게 만듭니다.

10. 디자인 화면에서 Label을 선택한 상태에서 Properties Windows를 사용하여 Label의 Text 속성을 “Enter a Phoneword “로 변경하십시오.

[[ 노트 ]]
언제든지 보기(View) 메뉴에서 속성 또는 도구 상자를 불러올 수 있습니다.

11. 도구 상자 내에서 Text Field를 검색하고 도구 상자의 Text Field를 디자인 화면에 끌어 레이블 아래에 놓습니다. Text Field가 레이블과 동일한 너비가 될 때까지 너비를 조정하십시오.

12. 디자인 화면에서 Text Field를 선택한 상태에서 Properties의 Identity 섹션에있는 Text Field의 Name 속성을 PhoneNumberText로 변경하고 Text 속성을 “1-855-XAMARIN”으로 변경합니다.

13. 버튼을 도구 상자에서 디자인 화면으로 끌어서 Text Field 아래에 놓습니다. 버튼이 Text Field 및 레이블 만큼 넓어지도록 너비를 조정하십시오.

14. 디자인 화면에서 Button을 선택한 상태에서 Properties의 Identity 섹션에 있는 Name 속성을 TranslateButton으로 변경합니다. Title 속성을 “Translate”로 변경하십시오.

15. 이전 두 단계를 반복하고 도구 상자에서 Button을 디자인 화면으로 드래그하여 첫 번째 Button 아래에 배치합니다. 버튼의 너비가 첫 번째 버튼 만큼 넓어지도록 너비를 조정하십시오.

16. 디자인 화면에서 두 번째 버튼을 선택한 상태에서 속성의 ID 섹션에 있는 Name 속성을 CallButton으로 변경합니다. 제목 속성을 “Call”로 변경하십시오.

File > Save 또는 Ctrl + s 키를 눌러 변경 사항을 저장하십시오.

17. 전화번호를 영숫자에서 숫자로 변환하는 코드를 추가하십시오. 이렇게하려면 먼저 솔루션 탐색기에서 Phoneword_iOS 프로젝트를 마우스 오른쪽 버튼으로 클릭하고 Add > New Item을 선택하거나 Ctrl + Shift + A를 눌러 프로젝트에 새 파일을 추가하십시오.

18. 새 파일 대화 상자에서 iOS > Class를 선택하고 이름을 ‘PhoneTranslator’로 설정하세요.

19. 이렇게 하면 새로운 C# 클래스가 만들어집니다. 모든 템플릿 코드를 제거하고 다음 코드로 바꿉니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
using System.Text;
using System;

namespace Phoneword_iOS
{
    public static class PhoneTranslator
    {
        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;
        }
    }
}

PhoneTranslator.cs 파일을 저장하고 닫습니다.

20. 솔루션 탐색기에서 ViewController.cs를 두 번 클릭하여 열면, 버튼과의 상호 작용을 처리할 논리를 추가 할 수 있습니다.

21. TranslateButton을 연결하여 시작하십시오. ViewController 클래스에서 ViewDidLoad 메서드를 찾습니다. ViewDidLoad 내에서 base.ViewDidLoad () 호출 아래에 다음 버튼 코드를 추가합니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
string translatedNumber = "";

TranslateButton.TouchUpInside += (object sender, EventArgs e) => {

  // Convert the phone number with text to a number
  // using PhoneTranslator.cs
  translatedNumber = PhonewordTranslator.ToNumber(
  PhoneNumberText.Text);

  // Dismiss the keyboard if text field was tapped
  PhoneNumberText.ResignFirstResponder ();

  if (translatedNumber == "") {
    CallButton.SetTitle ("Call", UIControlState.Normal);
    CallButton.Enabled = false;
    }
  else {
    CallButton.SetTitle ("Call " + translatedNumber, UIControlState.Normal);
    CallButton.Enabled = true;
    }
};

22. CallButton이라는 두 번째 버튼을 눌러 사용자에게 응답하는 코드를 추가하십시오. 파일의 최상단에 TranslateButton과 ‘using Foundation;’을 추가하십시오.

1
2
3
4
5
6
7
8
9
10
11
12
CallButton.TouchUpInside += (object sender, EventArgs e) => {
  var url = new NSUrl ("tel:" + translatedNumber);

    // Use URL handler with tel: prefix to invoke Apple's Phone app,
    // otherwise show an alert dialog

    if (!UIApplication.SharedApplication.OpenUrl (url)) {
                    var alert = UIAlertController.Create ("Not supported", "Scheme 'tel:' is not supported on this device", UIAlertControllerStyle.Alert);
                    alert.AddAction (UIAlertAction.Create ("Ok", UIAlertActionStyle.Default, null));
                    PresentViewController (alert, true, null);
                }
};

23. 변경 사항을 저장하고 Build > Build Solution을 선택하거나 Ctrl + Shift + B를 눌러 응용 프로그램을 빌드하십시오. 응용 프로그램이 컴파일되면 IDE 하단에 성공 메시지가 나타납니다.

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

24. 이제 기본 응용 프로그램 기능이 작동하고 마무리 작업을 추가할 차례입니다! Info.plist 파일에서 응용 프로그램 이름과 아이콘을 편집하십시오. 이렇게 하려면 솔루션 탐색기에서 Info.plist를 두 번 클릭하여 엽니다.

25. iOS Application Target 섹션에서 애플리케이션 이름을 “Phoneword”로 변경하십시오.

26. 응용 프로그램 아이콘을 설정하고 이미지를 시작하려면 모든 이미지를 보유할 어셋 카탈로그가 필요합니다. 이를 생성하려면 솔루션 탐색기에서 어셋 카탈로그를 마우스 오른쪽 버튼으로 클릭하고 어셋 카탈로그 추가를 선택합니다.

어셋 카탈로그 미디어의 이름을 지정하고 추가를 누릅니다.

27. 응용 프로그램 아이콘을 설정하고 이미지를 시작하려면 먼저 Xamarin 앱 아이콘 & Launch Screens 세트를 다운로드 하십시오. 아이콘을 추가하려면 (58×58) 아이콘 자리 표시자를 직접 클릭하고 폴더 위치로 이동하십시오. Xamarin 앱 아이콘 & Launch Images 디렉토리에서 일치하는 아이콘을 선택하십시오.

계속해서 모든 아이콘과 실행 화면 이미지를 채웁니다. Visual Studio에서 자리 표시자를 앱 아이콘으로 바꿉니다.

28. 응용 프로그램의 Project 옵션으로 이동하여 응용 프로그램 아이콘 아이콘을 사용하고 화면 이미지를 시작하도록 응용 프로그램에 지시합니다. 이렇게 하려면 프로젝트 이름을 마우스 오른쪽 버튼으로 클릭하고 속성을 찾습니다. iOS 애플리케이션 섹션을 찾습니다. 앱 스포트라이트 및 설정에서 어셋 카탈로그 드랍다운을 Media > App Icons으로 설정하십시오.

29. 마지막으로 iOS 시뮬레이터에서 애플리케이션을 테스트합니다. IDE 툴바의 드랍다운 메뉴에서 디버그 및 iPhone 6 iOS x.x를 선택하고 시작 (재생 버튼과 유사한 녹색 삼각형)을 누릅니다.

[[ 노트 ]]
현재 Apple의 요구 사항으로 인해 장치 또는 시뮬레이터용 코드를 작성하려면 개발 인증서 또는 서명 ID가 있어야 할 수 있습니다. Device Provisioning 안내서의 단계에 따라 이를 설정하십시오.

30. 그러면 iOS 시뮬레이터에서 응용 프로그램이 시작됩니다.

iOS 시뮬레이터에서는 전화 통화를 지원되지 않습니다. 전화를 걸 때 경고 대화 상자가 표시됩니다.

첫 번째 Xamarin.iOS 응용 프로그램을 작성하신 것을 축하드립니다!

이제 Hello iOS Deep Dive에서 이 가이드에 나와있는 도구와 기술을 분석할 시간입니다.

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

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