Hello, iOS 멀티스크린 – 빠른 시작

아티클
10/05/2018

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를 사용하여 사용자 인터페이스 디자인을 참조하세요.

연습의 이 부분에서는 앱으로 호출된 전화번호의 기록을 표시하는 두 번째 화면을 Phoneword 애플리케이션에 추가합니다. 다음 스크린샷에 표시된 것처럼 최종 애플리케이션에 호출 기록을 표시하는 두 번째 화면이 포함됩니다.

함께 제공되는 심층 분석은 빌드하였던 애플리케이션을 검토하고, 진행하면서 나오는 아키텍처, 탐색 및 다른 새 iOS 개념에 대해 논의합니다.

요구 사항

이 가이드는 Hello, iOS 문서가 중단된 곳에서 다시 시작하고 Hello, iOS 빠른 시작의 완료가 필요합니다.

macOS에서 연습

이 연습에서는 Phoneword 애플리케이션에 통화 기록 화면을 추가합니다.

Mac용 Visual Studio에서 Phoneword 애플리케이션을 엽니다.
Solution Pad에서 Main.storyboard 파일을 엽니다.
탐색 컨트롤러를 도구 상자에서 디자인 화면으로 끌어 옵니다(디자인 화면에서 이러한 모든 내용에 맞게 축소해야 할 수 있습니다!).
원본 없는 segue(단일 보기 컨트롤러의 왼쪽에 있는 회색 화살표)를 탐색 컨트롤러로 끌어와서 애플리케이션의 시작점을 변경합니다.
아래쪽 표시줄을 클릭하여 기존 루트 보기 컨트롤러를 선택하고, 삭제를 눌러 디자인 화면에서 제거합니다. 그런 다음, Phoneword 장면을 탐색 컨트롤러 옆으로 이동합니다.
ViewController를 탐색 컨트롤러의 루트 보기 컨트롤러로 설정합니다. Ctrl 키를 누르고 탐색 컨트롤러 내부를 클릭합니다. 파란색 선이 표시됩니다. 그런 다음, Ctrl 키를 누른 상태로 탐색 컨트롤러에서 Phoneword 장면으로 끌어서 놓습니다. 이는 Ctrl 끌기라고 합니다.
팝오버에서 관계를 루트로 설정합니다.

ViewController는 이제 탐색 컨트롤러의 루트 보기 컨트롤러입니다.
Phoneword 화면의 제목 표시줄을 두 번 클릭하고 제목을 Phoneword로 변경합니다.
도구 상자에서 단추를 끌어서 호출 단추 아래에 배치합니다. 핸들을 끌어 새 단추가 호출 단추와 동일한 너비가 되도록 합니다.
Properties Pad에서 단추 이름을 CallHistoryButton으로 변경하고 제목을 통화 기록으로 변경합니다.
통화 기록 화면을 만듭니다. 도구 상자에서 테이블 보기 컨트롤러를 디자인 화면으로 끕니다.
그런 다음, 장면의 아래쪽에 있는 검은색 표시줄을 클릭하여 테이블 보기 컨트롤러를 선택합니다. Properties Pad에서 테이블 보기 컨트롤러의 클래스를 CallHistoryController로 변경하고 Enter 키를 누릅니다.

iOS 디자이너는 CallHistoryController라는 사용자 지정 백업 클래스를 생성하여 이 화면의 콘텐츠 보기 계층 구조를 관리합니다. CallHistoryController.cs 파일은 Solution Pad에 표시됩니다.

CallHistoryController.cs 파일을 두 번 클릭하여 열고 내용을 다음 코드로 바꿉니다.

using System;
using Foundation;
using UIKit;
using System.Collections.Generic;

namespace Phoneword_iOS
{
    public partial class CallHistoryController : UITableViewController
    {
        public List<string> PhoneNumbers { get; set; }

        static NSString callHistoryCellId = new NSString ("CallHistoryCell");

        public CallHistoryController (IntPtr handle) : base (handle)
        {
            TableView.RegisterClassForCellReuse (typeof(UITableViewCell), callHistoryCellId);
            TableView.Source = new CallHistoryDataSource (this);
            PhoneNumbers = new List<string> ();
        }

        class CallHistoryDataSource : UITableViewSource
        {
            CallHistoryController controller;

            public CallHistoryDataSource (CallHistoryController controller)
            {
                this.controller = controller;
            }

            public override nint RowsInSection (UITableView tableView, nint section)
            {
                return controller.PhoneNumbers.Count;
            }

            public override UITableViewCell GetCell (UITableView tableView, NSIndexPath indexPath)
            {
                var cell = tableView.DequeueReusableCell (CallHistoryController.callHistoryCellId);

                int row = indexPath.Row;
                cell.TextLabel.Text = controller.PhoneNumbers [row];
                return cell;
            }
        }
    }
}

애플리케이션을 저장하고(⌘ + s) 빌드하여(⌘ + b) 오류가 없는지 확인합니다.

Phoneword 장면과 통화 기록 장면 사이에 segue(전환)를 만듭니다. Phoneword 장면에서 통화 기록 단추를 선택하고 단추에서 통화 기록 장면으로 Ctrl 끌기합니다.

작업 Segue 팝오버에서 표시를 선택합니다.

iOS 디자이너는 두 장면 사이에 Segue를 추가할 예정입니다.
장면 아래쪽의 검은색 표시줄을 선택하고 Properties Pad에서 보기 컨트롤러 제목을 통화 기록으로 변경하여 제목을 테이블 보기 컨트롤러에 추가합니다.
애플리케이션이 실행될 때 통화 기록 단추는 통화 기록 화면을 열지만, 테이블 보기는 추적을 유지하고 전화번호를 표시할 코드가 없기 때문에 비어 있게 됩니다.

이 앱은 문자열의 목록으로 전화번호를 저장합니다.

using ViewController의 맨 위에 지시 System.Collections.Generic 문을 추가합니다.
```
using System.Collections.Generic;
```

ViewController 클래스를 다음 코드로 수정합니다.

using System;
using System.Collections.Generic;
using Foundation;
using UIKit;

namespace Phoneword_iOS
{
  public partial class ViewController : UIViewController
  {
    string translatedNumber = "";

    public List<string> PhoneNumbers { get; set; }

    protected ViewController(IntPtr handle) : base(handle)
    {
      //initialize list of phone numbers called for Call History screen
      PhoneNumbers = new List<string>();
    }

    public override void ViewDidLoad()
    {
      base.ViewDidLoad();
      // Perform any additional setup after loading the view, typically from a nib.

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

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

        //Store the phone number that we're dialing in PhoneNumbers
        PhoneNumbers.Add(translatedNumber);

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

    public override void PrepareForSegue(UIStoryboardSegue segue, NSObject sender)
    {
      base.PrepareForSegue(segue, sender);

      // set the view controller that’s powering the screen we’re
      // transitioning to

      var callHistoryController = segue.DestinationViewController as CallHistoryController;

      //set the table view controller’s list of phone numbers to the
      // list of dialed phone numbers

      if (callHistoryController != null)
      {
        callHistoryController.PhoneNumbers = PhoneNumbers;
      }
    }
  }
}

여기서 몇 가지 일이 발생합니다.

translatedNumber 변수가 ViewDidLoad 메서드에서 ‘클래스 수준 변수’로 이동되었습니다.
PhoneNumbers.Add(translatedNumber)를 호출하여 전화를 건 번호를 전화번호 목록에 추가하도록 CallButton 코드가 수정되었습니다.
PrepareForSegue 메서드가 추가되었습니다.

애플리케이션을 저장하고 빌드하여 오류가 없는지 확인합니다.

시작 단추를 눌러 iOS 시뮬레이터 내에서 애플리케이션을 시작합니다.

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

Windows에서 연습