Xamarin.iOS에서 사용자 인터페이스 개체 만들기

아티클
03/21/2017

Apple은 관련 기능을 Xamarin.iOS 네임스페이스와 같은 "프레임워크"로 그룹화합니다. UIKit 는 iOS에 대한 모든 사용자 인터페이스 컨트롤을 포함하는 네임스페이스입니다.

코드에서 레이블 또는 단추와 같은 사용자 인터페이스 컨트롤을 참조해야 할 때마다 다음 using 문을 포함해야 합니다.

using UIKit;

이 챕터에서 설명하는 모든 컨트롤은 UIKit 네임스페이스에 있으며 각 사용자 컨트롤 클래스 이름에는 접두사를 갖 UI 습니다.

다음 세 가지 방법으로 UI 컨트롤과 레이아웃을 편집할 수 있습니다.

Xamarin iOS 디자이너 – Xamarin의 기본 제공 레이아웃 디자이너를 사용하여 화면을 디자인합니다. 스토리보드 또는 XIB 파일을 두 번 클릭하여 기본 제공 디자이너로 편집합니다.
Xcode 인터페이스 작성기 – 인터페이스 작성 기에서 컨트롤을 화면 레이아웃으로 끌어다 놓습니다. Solution Pad에서 파일을 마우스 오른쪽 단추로 클릭하고 Xcode 인터페이스 작성기로 열기를 선택하여 Xcode에서 스토리보드 또는 XIB 파일을 엽니다>.
C# 사용 – 컨트롤은 코드를 사용하여 프로그래밍 방식으로 생성되고 뷰 계층 구조에 추가될 수도 있습니다.

iOS 프로젝트를 마우스 오른쪽 단추로 클릭하고 새 파일 추가를 선택하여 새 스토리보드 및 XIB 파일을 추가할 > 수 있습니다.

어떤 방법을 사용하든 애플리케이션 논리에서 C#을 사용하여 컨트롤 속성 및 이벤트를 조작할 수 있습니다.

Xamarin iOS 디자이너 사용

iOS 디자이너에서 사용자 인터페이스 만들기를 시작하려면 스토리보드 파일을 두 번 클릭합니다. 아래 그림과 같이 도구 상자에서 디자인 화면으로 컨트롤을 끌 수 있습니다.

Mac용 Visual Studio
Visual Studio

디자인 화면에서 컨트롤을 선택하면 Properties Pad 에 해당 컨트롤의 특성이 표시됩니다. 아래 스크린샷에 채워진 위젯 > ID > 이름 필드는 콘센트 이름으로 사용됩니다. C#에서 컨트롤을 참조할 수 있는 방법은 다음과 같습니다.

iOS 디자이너 사용에 대한 자세한 내용은 iOS 디자이너 소개 가이드를 참조하세요.

Xcode 인터페이스 작성기 사용

인터페이스 작성기 사용에 익숙하지 않은 경우 Apple의 인터페이스 작성기 문서를 참조하세요.

Xcode에서 Storyboard를 열려면 마우스 오른쪽 단추를 클릭하여 스토리보드 파일의 상황에 맞는 메뉴에 액세스하고 Xcode 인터페이스 작성기를 사용하여 열도록 선택합니다.

Mac용 Visual Studio
Visual Studio

아래 그림과 같은 개체 라이브러리에서 디자인 화면으로 컨트롤을 끌 수 있습니다.

Interface Builder를 사용하여 UI를 디자인할 때 C#에서 참조하려는 각 컨트롤에 대한 콘센트를 만들어야 합니다. 이 작업은 Xcode 도구 모음 단추의 가운데 편집기 단추를 사용하여 도우미 편집기를 켜서 수행합니다.

사용자 인터페이스 개체를 클릭합니다. 그런 다음 컨트롤을 .h 파일로 끌어 옵니다. 끌기를 제어하려면 컨트롤 키를 누른 채로 콘센트(또는 작업)를 만드는 사용자 인터페이스 개체를 클릭하고 길게 누릅니다. 머리글 파일로 끌어다 놓고 컨트롤 키를 계속 누릅니다. 정의 아래로 끌기를 @interface 마칩니다. 아래 스크린샷에 표시된 것처럼 캡션 Insert Outlet 또는 Outlet 컬렉션과 함께 파란색 선이 표시됩니다.

클릭을 해제하면 코드에서 참조할 수 있는 C# 속성을 만드는 데 사용할 Outlet의 이름을 입력하라는 메시지가 표시됩니다.

Xcode의 Interface Builder가 Mac용 Visual Studio 통합되는 방법에 대한 자세한 내용은 Xib 코드 생성 문서를 참조하세요.

C# 사용

예를 들어 뷰 또는 뷰 컨트롤러에서 C#을 사용하여 프로그래밍 방식으로 사용자 인터페이스 개체를 만들기로 결정한 경우 다음 단계를 수행합니다.

사용자 인터페이스 개체에 대한 클래스 수준 필드를 선언합니다. 예를 들어 컨트롤 자체를 한 번 만듭니다 ViewDidLoad . 그런 다음 뷰 컨트롤러(예 ViewWillAppear: )의 수명 주기 메서드 전체에서 개체를 참조할 수 있습니다.
CGRect 컨트롤의 프레임(화면의 X 및 Y 좌표와 너비 및 높이)을 정의하는 A를 만듭니다. 이에 대한 지시문이 using CoreGraphics 있는지 확인해야 합니다.
생성자를 호출하여 컨트롤을 만들고 할당합니다.
속성 또는 이벤트 처리기를 설정합니다.
뷰 계층 구조에 컨트롤을 추가하려면 호출 Add() 합니다.

다음은 C#을 UILabel 사용하여 뷰 컨트롤러에서 만드는 간단한 예입니다.

UILabel label1;
public override void ViewDidLoad () {
    base.ViewDidLoad ();
    var frame = new CGRect(10, 10, 300, 30);
    label1 = new UILabel(frame);
    label1.Text = "New Label";
    View.Add (label1);
}

C# 및 스토리보드 사용

뷰 컨트롤러가 디자인 화면에 추가되면 프로젝트에 두 개의 해당 C# 파일이 만들어집니다. 이 예제에서는 ControlsViewController.csControlsViewController.designer.cs 자동으로 만들어집니다.

파일 ControlsViewController.cs 은 코드용입니다. 이 위치 View 는 수명 주기 메서드와 같은 ViewDidLoadViewWillAppear 구현되며 고유한 속성, 필드 및 메서드를 추가할 수 있는 위치입니다.

ControlsViewController.designer.cs 부분 클래스를 포함하는 생성된 코드입니다. Mac용 Visual Studio 디자인 화면에서 컨트롤의 이름을 지정하거나 Xcode에서 콘센트 또는 작업을 만들면 해당 속성 또는 부분 메서드가 디자이너(designer.cs) 파일에 추가됩니다. 아래 코드는 단추 중 하나에 이벤트가 있는 두 개의 단추와 텍스트 보기에 대해 생성된 코드의 예를 보여 줍니다 TouchUpInside .

부분 클래스의 이러한 요소를 사용하면 코드에서 컨트롤을 참조하고 디자인 화면에서 선언된 작업에 응답할 수 있습니다.

[Register ("ControlsViewController")]
    partial class ControlsViewController
    {
        [Outlet]
        [GeneratedCodeAttribute ("iOS Designer", "1.0")]
        UIKit.UIButton Button1 { get; set; }

        [Outlet]
        [GeneratedCodeAttribute ("iOS Designer", "1.0")]
        UIKit.UIButton Button2 { get; set; }

        [Outlet]
        [GeneratedCodeAttribute ("iOS Designer", "1.0")]
        UIKit.UITextField textfield1 { get; set; }

        [Action ("button2_TouchUpInside:")]
        [GeneratedCodeAttribute ("iOS Designer", "1.0")]
        partial void button2_TouchUpInside (UIButton sender);

        void ReleaseDesignerOutlets ()
        {
            if (Button1 != null) {
                Button1.Dispose ();
                Button1 = null;
            }
            if (Button2 != null) {
                Button2.Dispose ();
                Button2 = null;
            }
            if (textfield1 != null) {
                textfield1.Dispose ();
                textfield1 = null;
            }
        }
    }
}

designer.cs 파일을 수동으로 편집해서는 안 됩니다. IDE(Mac용 Visual Studio 또는 Visual Studio)는 스토리보드와 동기화된 상태를 유지합니다.

사용자 인터페이스 개체가 프로그래밍 방식으로 View 추가되거나 ViewController개체 참조를 직접 인스턴스화하고 관리하므로 디자이너 파일이 필요하지 않습니다.

다음을 통해 공유

Xamarin.iOS에서 사용자 인터페이스 개체 만들기

Xamarin iOS 디자이너 사용

Xcode 인터페이스 작성기 사용

C# 사용

C# 및 스토리보드 사용

추가 리소스