iOS 디자이너 기본 사항

이 가이드에서는 iOS용 Xamarin 디자이너를 소개합니다. iOS 디자이너를 사용하여 컨트롤을 시각적으로 배치하는 방법, 코드에서 해당 컨트롤에 액세스하는 방법 및 속성을 편집하는 방법을 보여 줍니다.

iOS용 Xamarin 디자이너는 Xcode의 인터페이스 작성기 및 Android Designer와 유사한 시각적 인터페이스 디자이너입니다. Windows 및 Mac용 Visual Studio와의 원활한 통합, 끌어서 놓기 편집, 이벤트 처리기를 설정하기 위한 인터페이스, 사용자 지정 컨트롤을 렌더링하는 기능 등 다양한 기능이 있습니다.

요구 사항

iOS 디자이너는 windows에서 Mac용 Visual Studio 및 Visual Studio 2017 이상에서 사용할 수 있습니다. Windows용 Visual Studio에서 iOS 디자이너는 Xcode를 실행할 필요가 없지만 올바르게 구성된 Mac 빌드 호스트에 연결해야 합니다.

이 가이드에서는 시작 가이드에서 다루는 내용에 대해 잘 알고 있다고 가정합니다.

iOS 디자이너의 작동 방식

이 섹션에서는 iOS 디자이너가 사용자 인터페이스를 만들고 코드에 연결하는 방법을 설명합니다.

iOS 디자이너를 사용하면 개발자가 애플리케이션의 사용자 인터페이스를 시각적으로 디자인할 수 있습니다. 스토리보드 소개 가이드에 설명된 대로 스토리보드는 앱을 구성하는 화면(보기 컨트롤러), 해당 뷰 컨트롤러에 배치된 인터페이스 요소(보기) 및 앱의 전체 탐색 흐름을 설명합니다.

뷰 컨트롤러에는 iOS 디자이너의 시각적 표현과 연결된 C# 클래스의 두 부분이 있습니다.

기본 상태에서 보기 컨트롤러는 기능을 제공하지 않습니다. 컨트롤로 채워야 합니다. 이러한 컨트롤은 화면의 모든 콘텐츠를 포함하는 사각형 영역인 보기 컨트롤러의 보기에 배치됩니다. 대부분의 보기 컨트롤러에는 단추, 레이블 및 텍스트 필드와 같은 일반적인 컨트롤이 포함되며, 다음 스크린샷에는 단추가 포함된 보기 컨트롤러가 표시됩니다.

정적 텍스트를 포함하는 레이블과 같은 일부 컨트롤을 뷰 컨트롤러에 추가하고 혼자 남겨둘 수 있습니다. 그러나 컨트롤을 프로그래밍 방식으로 사용자 지정해야 하는 경우가 많습니다. 예를 들어 위에 추가된 단추는 탭할 때 작업을 수행해야 하므로 이벤트 처리기를 코드에 추가해야 합니다.

이제 단추에 이름이 있으므로 코드에서 액세스할 수 있습니다. 그러나 이것은 어떻게 작동합니까?

• ViewController.cs 클래스와 관련된 사용자 지정 코드로 ViewController 채워야 합니다. 이 파일에서 클래스는 ViewController 다양한 iOS 보기 컨트롤러 수명 주기 메서드에 응답하고, UI를 사용자 지정하고, 단추 탭과 같은 사용자 입력에 응답할 수 있습니다.

• ViewController.designer.cs 생성된 파일로, 시각적으로 생성된 인터페이스를 코드에 매핑하기 위해 iOS 디자이너에서 만듭니다. 이 파일의 변경 내용은 덮어쓰여지므로 수정해서는 안 됩니다. 이 파일의 속성 선언을 사용하면 클래스의 ViewController 코드가 iOS 디자이너에 설정된 이름별 컨트롤에 액세스할 수 있습니다. ViewController.designer.cs 열면 다음 코드가 표시됩니다.

namespace Designer
{
    [Register ("ViewController")]
    partial class ViewController
    {
        [Outlet]
        [GeneratedCode ("iOS Designer", "1.0")]
        UIKit.UIButton SubmitButton { get; set; }

        void ReleaseDesignerOutlets ()
        {
            if (SubmitButton != null) {
                SubmitButton.Dispose ();
                SubmitButton = null;
            }
        }
    }
}

속성 선언은 SubmitButton ViewController.designer.cs 파일뿐만 아니라 전체 ViewController 클래스를 스토리보드에 정의된 단추에 연결합니다. ViewController.cs 클래스SubmitButton의 ViewController 일부를 정의하므로 .

다음 스크린샷은 IntelliSense가 이제 ViewController.cs 참조를 SubmitButton 인식하는 것을 보여 줍니다.

이 섹션에서는 iOS 디자이너에서 단추를 만들고 코드에서 해당 단추에 액세스하는 방법을 보여 줍니다.

이 문서의 re기본der는 iOS 디자이너에 대한 추가 개요를 제공합니다.

iOS 디자이너 기본 사항

이 섹션에서는 iOS 디자이너의 일부를 소개하고 해당 기능에 대한 둘러보기를 제공합니다.

iOS 디자이너 시작

iOS 디자이너 기능

iOS 디자이너에는 다음과 같은 6개의 기본 섹션이 있습니다.

디자인 워크플로

인터페이스에 컨트롤 추가

인터페이스에 컨트롤을 추가하려면 도구 상자에서 컨트롤을 끌어 디자인 화면에 놓습니다. 컨트롤을 추가하거나 배치할 때 세로 및 가로 지침은 세로 중심, 가로 가운데 및 여백과 같이 일반적으로 사용되는 레이아웃 위치를 강조 표시합니다.

위 예제의 파란색 점선은 단추 배치에 도움이 되는 가로 가운데 시각적 맞춤 지침을 제공합니다.

제약 조건 도구 모음

제약 조건 도구 모음이 업데이트되었으며 이제 프레임 편집 모드/제약 조건 편집 모드 토글 및 업데이트 제약 조건/업데이트 프레임 단추의 두 가지 컨트롤로 구성됩니다.

프레임 편집 모드/제약 조건 편집 모드 토글

이전 버전의 iOS 디자이너에서는 디자인 화면에서 이미 선택한 보기를 클릭하면 프레임 편집 모드와 제약 조건 편집 모드 간에 전환됩니다. 이제 제약 조건 도구 모음의 토글 컨트롤이 이러한 편집 모드 간에 전환됩니다.

• 프레임 편집 모드:

• 제약 조건 편집 모드:

제약 조건 업데이트/프레임 업데이트 단추

업데이트 제약 조건/프레임 업데이트 단추는 프레임 편집 모드/제약 조건 편집 모드 토글의 오른쪽에 있습니다.

• 프레임 편집 모드에서 이 단추를 클릭하면 선택한 요소의 프레임이 해당 제약 조건과 일치하도록 조정됩니다.
• 제약 조건 편집 모드에서 이 단추를 클릭하면 선택한 요소의 제약 조건이 프레임과 일치하도록 조정됩니다.

아래쪽 도구 모음

아래쪽 도구 모음은 iOS 디자이너에서 스토리보드 또는 .xib 파일을 보는 데 사용되는 디바이스, 방향 및 확대/축소를 선택하는 방법을 제공합니다.

디바이스 및 방향

확장하면 아래쪽 도구 모음에 현재 문서에 적용할 수 있는 모든 디바이스, 방향 및/또는 적응이 표시됩니다. 이를 클릭하면 디자인 화면에 표시되는 보기가 변경됩니다.

디바이스 및 방향을 선택하면 iOS 디자이너에서 디자인을 미리 보는 방법만 변경됩니다. 현재 선택 영역에 관계없이 특성 편집 단추를 사용하여 지정하지 않는 한 새로 추가된 제약 조건은 모든 디바이스 및 방향에 적용됩니다.

크기 클래스를사용하도록 설정하면 확장된 아래쪽 도구 모음에 특성 편집 단추가 나타납니다. 특성 편집 단추를 클릭하면 선택한 디바이스 및 방향이 나타내는 크기 클래스에 따라 인터페이스 변형을 만드는 옵션이 표시됩니다. 다음 예를 살펴 보십시오.

• i전화 SE / 세로를 선택한 경우 팝오버는 압축 너비, 일반 높이 크기 클래스에 대한 인터페이스 변형을 만드는 옵션을 제공합니다.
• iPad Pro 9.7" / 가로 / 전체 화면이 선택된 경우 팝오버는 일반 너비, 일반 높이 크기 클래스에 대한 인터페이스 변형을 만드는 옵션을 제공합니다.

확대/축소 컨트롤

디자인 화면은 다음과 같은 여러 컨트롤을 통해 확대/축소를 지원합니다.

컨트롤에는 다음이 포함됩니다.

1. 크기에 맞게
2. 축소
3. 확대
4. 실제 크기(1:1 픽셀 크기)

이러한 컨트롤은 디자인 화면에서 확대/축소를 조정합니다. 런타임 시 애플리케이션의 사용자 인터페이스에는 영향을 미치지 않습니다.

1. 위젯 – 이름, 클래스, 스타일 속성 등 컨트롤의 기본 속성입니다. 컨트롤의 콘텐츠를 관리하기 위한 속성은 일반적으로 여기에 배치됩니다.
2. 레이아웃 – 제약 조건 및 프레임을 포함하여 컨트롤의 위치와 크기를 추적하는 속성이 여기에 나열됩니다.
3. 이벤트 – 이벤트 및 이벤트 처리기는 여기에 지정됩니다. 터치, 탭, 끌기 등과 같은 이벤트를 처리하는 데 유용합니다. 코드에서 직접 이벤트를 처리할 수도 있습니다.

기본값

이벤트 처리기

이벤트 처리기를 지정한 후에는 동일한 이름의 메서드를 해당 뷰 컨트롤러 클래스에 추가해야 합니다. 그렇지 않으면 unrecognized selector 단추를 탭할 때 예외가 발생합니다.

사용자 지정 이벤트 처리기를 사용하는 예제는 Hello, iOS 시작 가이드를 참조 하세요.

개요 보기

iOS 디자이너는 인터페이스의 컨트롤 계층 구조를 개요로 표시할 수도 있습니다. 개요는 아래와 같이 문서 개요 탭을 선택하여 사용할 수 있습니다.

개요 보기에서 선택한 컨트롤은 디자인 화면에서 선택한 컨트롤과 동기화된 상태로 유지됩니다. 이 기능은 깊이 중첩된 인터페이스 계층 구조에서 항목을 선택하는 데 유용합니다.

.xib 지원

iOS 디자이너는 .xib 파일 만들기, 편집 및 관리를 지원합니다. 애플리케이션의 뷰 계층 구조에 추가할 수 있는 단일 사용자 지정 보기를 다시 표시하는 XML 파일입니다. .xib 파일은 일반적으로 애플리케이션에서 단일 보기 또는 화면의 인터페이스를 나타내는 반면 스토리보드는 많은 화면과 화면 간의 전환을 나타냅니다.

.xib 파일, 스토리보드 또는 코드와 같은 솔루션이 사용자 인터페이스를 만들고 기본 데 가장 적합한 솔루션에 대한 많은 의견이 있습니다. 실제로 완벽한 솔루션은 없으며, 현재 작업에 가장 적합한 도구를 고려할 가치가 있습니다. 즉, .xib 파일은 일반적으로 사용자 지정 테이블 뷰 셀과 같은 앱의 여러 위치에 필요한 사용자 지정 보기를 나타내는 데 사용할 때 가장 강력합니다.

.xib 파일 사용에 대한 자세한 설명서는 다음 레시피에서 찾을 수 있습니다.

• 보기 .xib 템플릿 사용
• .xib를 사용하여 사용자 지정 TableViewCell 만들기
• .xib를 사용하여 시작 화면 만들기

스토리보드 사용에 대한 자세한 내용은 스토리보드 소개를 참조 하세요.

대부분의 Xamarin.iOS 새 프로젝트 템플릿은 기본적으로 스토리보드를 제공하기 때문에 이 가이드와 다른 iOS 디자이너 관련 가이드는 스토리보드를 사용자 인터페이스를 빌드하기 위한 표준 접근 방식이라고 합니다.

요약

이 가이드에서는 iOS 디자이너에 대한 소개를 제공하여 기능을 설명하고 아름다운 사용자 인터페이스를 디자인하기 위해 제공하는 도구를 설명했습니다.

관련 링크

• Storyboards 소개
• iOS 디자인 가능한 컨트롤 연습
• Hello, iOS
• Hello, iOS 멀티스크린
• Android 디자이너 개요
• Partial 클래스 및 메서드
• iOS용 Xamarin 디자이너 살펴보기 - Evolve 2014(비디오)
• iOS 디자이너를 사용하여 시작 화면 만들기(비디오)