Hello, iOS - 빠른 시작

Warning

iOS 디자이너는 Visual Studio 2019 버전 16.8 및 Mac용 Visual Studio 2019 버전 8.8에서 사용이 중단되었으며 Visual Studio 2019 버전 16.9 및 Mac용 Visual Studio 버전 8.9에서 제거되었습니다. iOS 사용자 인터페이스를 빌드하는 권장 방법은 Xcode의 Interface Builder를 실행하는 Mac에서 직접 빌드하는 것입니다. 자세한 내용은 Xcode를 사용하여 사용자 인터페이스 디자인을 참조하세요.

이 가이드에서는 사용자가 입력한 영숫자 전화 번호를 숫자 전화 번호로 변환한 다음, 해당 번호로 전화하는 애플리케이션을 만드는 방법을 설명합니다. 최종 애플리케이션은 다음과 같습니다.

요구 사항

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

• macOS High Sierra(10.13) 이상을 실행하는 Mac
• 앱 스토어에서 설치된 최신 버전의 Xcode 및 iOS SDK

Xamarin.iOS는 다음 설치를 사용하여 작동합니다.

• 위의 사양에 맞는 최신 버전의 Mac용 Visual Studio.

Xamarin.iOS Mac 설치 가이드에서 단계별 설치 지침을 사용할 수 있습니다.

Xamarin.iOS는 다음 설치를 사용하여 작동합니다.

• Windows 10의 Visual Studio 2019 또는 Visual Studio 2017 Community, Professional 또는 Enterprise의 최신 버전에서는 위의 사양에 맞는 Mac 빌드 호스트와 페어링됩니다.

Xamarin.iOS Windows 설치 가이드에서 단계별 설치 지침을 사용할 수 있습니다.

시작하기 전에 Xamarin 앱 아이콘 집합을 다운로드합니다.

Mac용 Visual Studio 연습

이 연습에서는 영숫자 전화 번호를 숫자 전화 번호로 변환하는 Phoneword라는 애플리케이션을 만드는 방법을 설명합니다.

1. 애플리케이션 폴더 또는 스포트라이트에서 Mac용 Visual Studio를 시작합니다.

   

   시작 화면에서 새 프로젝트...을 클릭하여 새 Xamarin.iOS 솔루션을 만듭니다.

   

2. 새 솔루션 대화 상자에서 iOS > 앱 > 단일 보기 애플리케이션 템플릿을 선택하여 C#이 선택되어 있는지 확인합니다. 다음을 클릭합니다.

   

3. 앱을 구성합니다. 이름으로 Phoneword_iOS를 지정하고, 나머지는 기본값을 유지합니다. 다음을 클릭합니다.

   

4. 프로젝트 및 솔루션 이름은 그대로 둡니다. 여기서 프로젝트의 위치를 선택하거나 기본값으로 유지합니다.

   

5. 만들기를 클릭하여 솔루션을 만듭니다.

6. 솔루션 패드에서 Main.storyboard 파일을 두 번 클릭하여 엽니다. Visual Studio iOS 디자이너를 사용하여 파일을 여는지 확인합니다(스토리보드를 마우스 오른쪽 단추로 클릭하고 iOS 디자이너로 > 열기 선택). 이렇게 하면 시각적으로 UI를 만들 수 있습니다.

   

   크기 클래스는 기본적으로 사용하도록 설정되어 있습니다. 자세한 내용은 통합 스토리보드 가이드를 참조하세요.

7. 도구 상자 패드의 검색 표시줄에서 "레이블"을 입력한 다음, 레이블을 디자인 화면(가운데 영역)으로 끌어 놓습니다.

   

   참고 항목

   언제든지 보기 패드로 이동하여 속성 패드 또는 도구 상자를 표시할 수 있습니다.>

8. 컨트롤 끌기(컨트롤 주위에 있는 원)의 핸들을 잡고 레이블을 넓게 만듭니다.

   

9. 디자인 화면에서 레이블을 선택한 채로 속성 패드를 사용하여 레이블의 텍스트 속성을 "Phoneword 입력"으로 변경합니다.

   

10. 도구 상자 내에서 "텍스트 필드"를 검색하고, 텍스트 필드를 도구 상자에서 디자인 화면으로 끌어서 레이블 아래에 놓습니다. 텍스트 필드가 레이블과 같은 너비가 될 때까지 조정합니다.

    

11. 디자인 화면에서 텍스트 필드를 선택한 채로 Properties Pad의 ID 섹션에서 텍스트 필드의 이름 속성을 PhoneNumberText로 변경하고, 텍스트 속성을 "1-855-XAMARIN"으로 변경합니다.

    

12. 단추를 도구 상자에서 디자인 화면으로 끌어서 텍스트 필드 아래에 놓습니다. 단추가 텍스트 필드 및 레이블과 같은 너비가 되도록 조정합니다.

    

13. 디자인 화면에서 단추를 선택한 채로 속성 패드의 ID 섹션에서 이름 속성을 TranslateButton으로 변경합니다. 제목 속성을 "변환"으로 변경합니다.

    

14. 위의 두 단계를 반복하고, 단추를 도구 상자에서 디자인 화면으로 끌어서 첫 번째 단추 아래에 놓습니다. 단추가 첫 번째 단추와 같은 너비가 되도록 조정합니다.

    

15. 디자인 화면에서 두 번째 단추를 선택한 채로 속성 패드의 ID 섹션에서 이름 속성을 CallButton으로 변경합니다. 제목 속성을 "호출"로 변경합니다.

    

    파일 > 저장으로 이동하거나 ⌘ + s를 눌러 변경 내용을 저장합니다.

16. 전화 번호를 영숫자에서 숫자로 변환하려면 일부 논리를 앱에 추가해야 합니다. Solution Pad에서 전화word_iOS 프로젝트를 마우스 오른쪽 단추로 클릭하고 새 파일 추가 > 를 선택하거나 ⌘ + n을 눌러 프로젝트에 새 파일을 추가합니다.

    

17. 새 파일 대화 상자에서 일반 > 빈 클래스를 선택하고 새 파일PhoneTranslator의 이름을 지정합니다.

    

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

    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 파일을 저장하고 닫습니다.

19. 사용자 인터페이스를 연결하는 코드를 추가합니다. 이렇게 하려면 솔루션 패드에서 ViewController.cs를 두 번 클릭하여 엽니다.

    

20. TranslateButton을 연결하여 시작합니다. ViewController 클래스에서 ViewDidLoad 메서드를 찾고 base.ViewDidLoad() 호출 아래에 다음 코드를 추가합니다.

    string translatedNumber = "";
    
    TranslateButton.TouchUpInside += (object sender, EventArgs e) => {
        // Convert the phone number with text to a number
        // using PhoneTranslator.cs
        translatedNumber = PhoneTranslator.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;
        }
    };
    

    파일의 네임스페이스가 다른 경우 using Phoneword_iOS;를 포함합니다.

21. CallButton이라는 두 번째 단추를 눌러 사용자에게 응답하는 코드를 추가합니다. TranslateButton에 대한 코드 아래에 다음 코드를 배치하고, using Foundation;을 파일의 맨 위에 추가합니다.

        CallButton.TouchUpInside += (object sender, EventArgs e) => {
            // Use URL handler with tel: prefix to invoke Apple's Phone app...
            var url = new NSUrl ("tel:" + translatedNumber);
    
            // ...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);
            }
        };
    

22. 변경 내용을 저장한 다음 빌드 전체 빌드를 선택하거나 ⌘ + B를 눌러 애플리케이션을 빌드 > 합니다. 애플리케이션이 컴파일되면 IDE의 맨 위에 성공 메시지가 표시됩니다.

    

    오류가 있는 경우 이전 단계를 진행하고, 애플리케이션이 성공적으로 빌드될 때까지 모든 오류를 수정합니다.

23. 마지막으로, iOS 시뮬레이터에서 애플리케이션을 테스트합니다. IDE의 왼쪽 위에 있는 첫 번째 드롭다운에서 디버그를 선택하고, 두 번째 드롭다운에서 iPhone XR iOS 12.0(또는 사용 가능한 다른 시뮬레이터)을 선택하고, 시작(재생 단추와 비슷한 삼각형 단추)을 누릅니다.

    

    참고 항목

    현재 Apple의 요구 사항에 따라 디바이스 또는 시뮬레이터용 코드를 빌드하는 데 개발 인증서 또는 ‘서명 ID’가 필요할 수 있습니다. 이를 설정하려면 디바이스 프로비전 가이드의 단계를 수행합니다.

24. 그러면 iOS 시뮬레이터 내에서 애플리케이션이 시작됩니다.

    

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

    

Visual Studio 연습

이 연습에서는 영숫자 전화 번호를 숫자 전화 번호로 변환하는 Phoneword라는 애플리케이션을 만드는 방법을 설명합니다.

참고 항목

이 연습에서는 Windows 10 Virtual Machine에서 Visual Studio Enterprise 2017을 사용합니다. 위의 요구 사항을 충족하는 한 설정이 이와 다를 수 있지만, 일부 스크린샷은 설정에 따라 다를 수 있습니다.

참고 항목

이 연습을 진행하기 전에 이미 Visual Studio에서 Mac에 연결되어 있어야 합니다. 이는 Xamarin.iOS가 Apple의 도구를 사용하여 애플리케이션을 빌드하고 실행하기 때문입니다. 설정하려면 Mac에 페어링 가이드의 단계를 수행합니다.

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

   

   새 프로젝트 파일을 >> 선택하여 새 Xamarin.iOS 솔루션을 만듭니다... > Visual C# > i전화 및 iPad > iOS 앱(Xamarin):

   

   다음 대화 상자가 나타나면 단일 보기 앱 템플릿을 선택하고 확인을 눌러 프로젝트를 만듭니다.

   

2. 도구 모음에서 Xamarin Mac 에이전트 아이콘이 녹색인지 확인합니다.

   

   그렇지 않은 경우 Mac 빌드 호스트에 연결되지 않았다는 의미이므로 구성 가이드의 단계에 따라 연결합니다.

3. 솔루션 탐색기에서 Main.storyboard 파일을 두 번 클릭하여 iOS 디자이너에서 이 파일을 엽니다.

   

4. 도구 상자 탭을 열고, 검색 표시줄에서 "레이블"을 입력한 다음, 레이블을 디자인 화면(가운데 영역)으로 끌어갑니다.

   

5. 다음으로, 컨트롤 끌기의 핸들을 잡고 레이블을 넓게 만듭니다.

   

6. 디자인 화면에서 레이블을 선택한 채로 속성 창을 사용하여 레이블의 텍스트 속성을 "Phoneword 입력"으로 변경합니다.

   

   참고 항목

   언제든지 보기 메뉴로 이동하여 속성 또는 도구 상자를 가져올 수 있습니다.

7. 도구 상자 내에서 "텍스트 필드"를 검색하고, 텍스트 필드를 도구 상자에서 디자인 화면으로 끌어서 레이블 아래에 놓습니다. 텍스트 필드가 레이블과 같은 너비가 될 때까지 조정합니다.

   

8. 디자인 화면에서 텍스트 필드를 선택한 채로 속성의 ID 섹션에서 텍스트 필드의 이름 속성을 PhoneNumberText로 변경하고, 텍스트 속성을 "1-855-XAMARIN"으로 변경합니다.

   

9. 단추를 도구 상자에서 디자인 화면으로 끌어서 텍스트 필드 아래에 놓습니다. 단추가 텍스트 필드 및 레이블과 같은 너비가 되도록 조정합니다.

   

10. 디자인 화면에서 단추를 선택한 채로 속성의 ID 섹션에서 이름 속성을 TranslateButton으로 변경합니다. 제목 속성을 "변환"으로 변경합니다.

    

11. 앞의 두 단계를 반복하고, 단추를 도구 상자에서 디자인 화면으로 끌어서 첫 번째 단추 아래에 놓습니다. 단추가 첫 번째 단추와 같은 너비가 되도록 조정합니다.

    

12. 디자인 화면에서 두 번째 단추를 선택한 채로 속성의 ID 섹션에서 이름 속성을 CallButton으로 변경합니다. 제목 속성을 "호출"로 변경합니다.

    

    파일 > 저장 모두로 이동하거나 Ctrl +s를 눌러 변경 내용을 저장합니다.

13. 전화 번호를 영숫자에서 숫자로 변환하는 코드를 추가합니다. 이렇게 하려면 먼저 솔루션 탐색기 전화word Project를 마우스 오른쪽 단추로 클릭하고 새 항목 추가 > 를 선택하거나 Ctrl + Shift + A를 눌러 프로젝트에 새 파일을 추가합니다.

    

14. 새 항목 추가 대화 상자(프로젝트를 마우스 오른쪽 단추로 클릭하고 새 항목 추가>...)에서 Apple > 클래스를 선택하고 새 파일PhoneTranslator의 이름을 지정합니다.

    

    Important

    아이콘에 C#이 있는 '클래스' 템플릿을 선택했는지 확인합니다. 그렇지 않으면 이 새 클래스를 참조하지 못할 수 있습니다.

15. 그러면 새 C# 클래스가 만들어집니다. 모든 템플릿 코드를 제거하고 다음 코드로 바꿉니다.

    using System.Text;
    using System;
    
    namespace Phoneword
    {
        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 파일을 저장하고 닫습니다.

16. 솔루션 탐색기에서 ViewController.cs를 두 번 클릭하여 단추와의 상호 작용을 처리하는 논리를 추가할 수 있습니다.

    

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

    string translatedNumber = "";
    
    TranslateButton.TouchUpInside += (object sender, EventArgs e) => {
    
        // Convert the phone number with text to a number
        // using PhoneTranslator.cs
        translatedNumber = PhoneTranslator.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;
            }
    };
    

    파일의 네임스페이스가 다른 경우 using Phoneword;를 포함합니다.

18. CallButton이라는 두 번째 단추를 눌러 사용자에게 응답하는 코드를 추가합니다. TranslateButton에 대한 코드 아래에 다음 코드를 배치하고, using Foundation;을 파일의 맨 위에 추가합니다.

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

19. 변경 내용을 저장한 다음 빌드 솔루션 빌드를 선택하거나 Ctrl+ Shift + B를 눌러 애플리케이션을 빌드 > 합니다. 애플리케이션이 컴파일되면 IDE 아래쪽에 성공 메시지가 표시됩니다.

    

    오류가 있는 경우 이전 단계를 진행하고, 애플리케이션이 성공적으로 빌드될 때까지 모든 오류를 수정합니다.

20. 마지막으로, 원격 iOS 시뮬레이터에서 애플리케이션을 테스트합니다. IDE 도구 모음의 드롭다운 메뉴에서 디버그 및 iPhone 8 Plus iOS x.x를 선택하고, 시작(재생 단추와 비슷한 녹색 삼각형)을 누릅니다.

    

21. 그러면 iOS 시뮬레이터 내에서 애플리케이션이 시작됩니다.

    

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

    

첫 번째 Xamarin.iOS 애플리케이션을 완성한 것을 축하합니다!

이제 이 가이드의 도구와 기술을 Hello, iOS 심층 분석에서 분석할 시간입니다.

관련 링크

• Xamarin 앱 아이콘 및 시작 이미지(샘플)
• Hello, iOS(샘플)
• iOS 휴먼 인터페이스 지침