다음을 통해 공유

Elements API를 사용하여 Xamarin.iOS 애플리케이션 만들기

  • 아티클

이 문서는 MonoTouch 소개 대화 상자에 제시된 정보를 기반으로 합니다. MT(MonoTouch.Dialog)를 사용하는 방법을 보여 주는 연습을 제공합니다. D) MT.D를 사용하여 애플리케이션 빌드를 빠르게 시작하는 Elements API

이 연습에서는 MT를 사용합니다. 작업 목록을 표시하는 애플리케이션의 마스터 세부 스타일 만들기를 위한 D Elements API입니다. 사용자가 탐색 모음에서 단추를 선택하면 + 작업의 테이블에 새 행이 추가됩니다. 행을 선택하면 아래 그림과 같이 작업 설명 및 기한을 업데이트할 수 있는 세부 정보 화면으로 이동합니다.

행을 선택하면 작업 설명 및 기한을 업데이트할 수 있는 세부 정보 화면으로 이동합니다.

MT 설정 D

마운트. D는 Xamarin.iOS와 함께 배포됩니다. 이를 사용하려면 Visual Studio 2017에서 Xamarin.iOS 프로젝트의 참조 노드를 마우스 오른쪽 단추로 클릭하거나 Mac용 Visual Studio MonoTouch.Dialog-1 어셈블리에 대한 참조를 추가합니다. 그런 다음 필요에 따라 소스 코드에 문을 추가 using MonoTouch.Dialog 합니다.

Elements API 연습

MonoTouch 대화 상자 소개 문서에서는 MT.D.의 다양한 부분을 확실하게 이해했습니다. Elements API를 사용하여 모두 애플리케이션에 배치해 보겠습니다.

다중 화면 애플리케이션 설정

화면 만들기 프로세스를 시작하려면 MonoTouch.Dialog에서 다음을 DialogViewController추가합니다 RootElement.

MonoTouch.Dialog를 사용하여 다중 화면 애플리케이션을 만들려면 다음을 수행해야 합니다.

  1. 인증 요청을 처리하는 데 사용하는 UINavigationController.
  2. 인증 요청을 처리하는 데 사용하는 DialogViewController.
  3. 의 DialogViewController 루트로 추가 UINavigationController.
  4. 에 a를 추가합니다.RootElementDialogViewController.
  5. 추가 Sections 및 ElementsRootElement.

UINavigationController 사용

탐색 스타일 애플리케이션을 만들려면 해당 애플리케이션을 UINavigationController만든 다음 메서드에 AppDelegate추가 RootViewControllerFinishedLaunching 해야 합니다. MonoTouch.Dialog DialogViewController 를 사용하여 작업을 수행 UINavigationController 하려면 아래와 같이 추가합니다UINavigationController.

public override bool FinishedLaunching (UIApplication app, NSDictionary options)
{
    _window = new UIWindow (UIScreen.MainScreen.Bounds);
            
    _rootElement = new RootElement ("To Do List"){new Section ()};

    // code to create screens with MT.D will go here …

    _rootVC = new DialogViewController (_rootElement);
    _nav = new UINavigationController (_rootVC);
    _window.RootViewController = _nav;
    _window.MakeKeyAndVisible ();
            
    return true;
}

위의 코드는 a의 인스턴스를 RootElement 만들어서 에 전달합니다 DialogViewController. DialogViewController 항상 RootElement 계층 구조의 맨 위에 있습니다. 이 예제에서는 탐색 컨트롤러의 RootElement 탐색 모음에서 제목 역할을 하는 "할 일 목록"이라는 문자열로 만들어집니다. 이때 애플리케이션을 실행하면 아래와 같은 화면이 표시됩니다.

애플리케이션을 실행하면 여기에 표시된 화면이 표시됩니다.

MonoTouch.Dialog의 계층 구조를 SectionsElements 사용하고 화면을 더 추가하는 방법을 살펴보겠습니다.

대화 상자 화면 만들기

A DialogViewController 는 UITableViewController MonoTouch.Dialog에서 화면을 추가하는 데 사용하는 하위 클래스입니다. MonoTouch.Dialog는 위에서 본 것처럼 화면에 추가하여 DialogViewController화면을 RootElement 만듭니다. RootElement 테이블의 섹션을 나타내는 인스턴스가 있을 Section 수 있습니다. 섹션은 요소, 다른 섹션 또는 기타 RootElements섹션으로 구성됩니다. 다음에 설명된 것처럼 MonoTouch.Dialog는 중첩 RootElements하여 탐색 스타일 애플리케이션을 자동으로 만듭니다.

DialogViewController 사용

하위 클래스인 UITableViewController 이 DialogViewController뷰는 해당 뷰로 UITableView 있습니다. 이 예제에서는 단추를 탭할 때마다 + 테이블에 항목을 추가하려고 합니다. 에 DialogViewController 추가UINavigationController되었으므로 아래와 같이 's RightBarButton 속성을 사용하여 NavigationItem단추를 추가할 + 수 있습니다.

_addButton = new UIBarButtonItem (UIBarButtonSystemItem.Add);
_rootVC.NavigationItem.RightBarButtonItem = _addButton;

앞에서 만들었을 RootElement 때 사용자가 단추를 탭할 때 요소를 + 추가할 수 있도록 단일 Section 인스턴스를 전달했습니다. 다음 코드를 사용하여 단추의 이벤트 처리기에서 이 작업을 수행할 수 있습니다.

_addButton.Clicked += (sender, e) => {                
    ++n;
                
    var task = new Task{Name = "task " + n, DueDate = DateTime.Now};
                
    var taskElement = new RootElement (task.Name) {
        new Section () {
            new EntryElement (task.Name, "Enter task description", task.Description)
        },
        new Section () {
            new DateElement ("Due Date", task.DueDate)
        }
    };
    _rootElement [0].Add (taskElement);
};

이 코드는 단추를 탭할 때마다 새 Task 개체를 만듭니다. 다음은 클래스의 간단한 구현을 Task 보여줍니다.

public class Task
{   
    public Task ()
    {
    }
      
    public string Name { get; set; }
        
    public string Description { get; set; }

    public DateTime DueDate { get; set; }
}

작업의 Name 속성은 각 새 작업에 대해 증가되는 카운터 n 변수와 함께 's 캡션 만드는 RootElement데 사용됩니다. MonoTouch.Dialog는 요소를 각각 taskElement 추가할 때 추가 TableView 되는 행으로 바꿉니다.

대화 상자 화면 표시 및 관리

MonoTouch.Dialog에서 각 작업의 세부 정보에 대한 새 화면을 자동으로 만들고 행을 선택할 때 해당 화면으로 이동할 수 있도록 사용 RootElement 했습니다.

작업 세부 정보 화면 자체는 두 개의 섹션으로 구성됩니다. 이러한 각 섹션에는 단일 요소가 포함됩니다. 첫 번째 요소는 작업 Description 속성에 EntryElement 대해 편집 가능한 행을 제공하기 위해 만들어집니다. 요소를 선택하면 아래와 같이 텍스트 편집용 키보드가 표시됩니다.

요소를 선택하면 표시된 대로 텍스트 편집용 키보드가 표시됩니다.

두 번째 섹션에는 DateElement 작업의 속성을 관리할 수 있는 항목이 DueDate 포함되어 있습니다. 날짜를 선택하면 다음과 같이 날짜 선택기가 자동으로 로드됩니다.

날짜를 선택하면 날짜 선택기가 로 자동으로 로드됩니다.

두 경우 모두 EntryElementDateElement (또는 MonoTouch.Dialog의 데이터 항목 요소에 대해) 값에 대한 변경 내용이 자동으로 유지됩니다. 날짜를 편집한 다음 루트 화면과 세부 정보 화면의 값이 유지되는 다양한 작업 세부 정보 사이를 앞뒤로 탐색하여 이를 보여 줄 수 있습니다.

요약

이 문서에서는 MonoTouch.Dialog Elements API를 사용하는 방법을 보여 주는 연습을 제공했습니다. MT를 사용하여 다중 화면 애플리케이션을 만드는 기본 단계를 설명했습니다. D: A DialogViewController 를 사용하는 방법 및 요소를 추가하고 섹션을 추가하여 화면을 만드는 방법을 포함합니다. 또한 MT를 사용하는 방법을 보여 줬다. D와 함께 .UINavigationController