Xamarin.ios의 스토리 보드 소개Introduction to Storyboards in Xamarin.Mac

이 문서에서는 Xamarin.ios 앱에서 Storyboard를 사용 하는 방법을 소개 합니다. 스토리 보드 및 Xcode의 Interface Builder를 사용 하 여 앱의 UI를 만들고 유지 관리 하는 방법을 다룹니다.This article provides an introduction to working with Storyboards in a Xamarin.Mac app. It covers creating and maintaining the app's UI using storyboards and Xcode's Interface Builder.

스토리 보드를 사용 하면 창 정의 및 컨트롤을 포함할 뿐만 아니라 다른 창 (segue를 통해) 및 뷰 상태 간의 링크도 포함 하는 Xamarin.ios 앱에 대 한 사용자 인터페이스를 개발할 수 있습니다.Storyboards allow you to develop a User Interface for your Xamarin.Mac app that not only includes the window definitions and controls, but also contains the links between different windows (via segues) and view states.

이 문서에서는 Storyboard를 사용 하 여 Xamarin.ios 앱의 사용자 인터페이스를 정의 하는 방법을 소개 합니다.This article will provide an introduction to using Storyboards to define a Xamarin.Mac app's user Interface.

스토리 보드 란?What are Storyboards?

Storyboard를 사용 하 여 모든 Xamarin.ios 앱의 UI는 개별 요소와 사용자 인터페이스 간의 모든 탐색을 사용 하 여 단일 위치에 정의할 수 있습니다.By using Storyboards, all of a Xamarin.Mac app's UI can be defined in a single location with all of the navigation between its individual elements and user interfaces. Xamarin.ios 용 storyboard는 Xamarin.ios 용 Storyboard와 매우 유사한 방식으로 작동 합니다.Storyboards for Xamarin.Mac, work in a very similar fashion to Storyboards for Xamarin.iOS. 그러나 다른 인터페이스 관용구 때문에 다른 Segue 형식 집합을 포함 합니다.However, they contain a different set of Segue Types because of the different interface idioms.

장면 작업Working with Scenes

위에서 설명한 것 처럼 Storyboard는 지정 된 앱에 대 한 모든 UI를 해당 _뷰 컨트롤러_의 기능 개요로 분할 하 여 정의 합니다.As stated above, a Storyboard defines all of the UI for a given app broken down into a functional overview of its View Controllers. Xcode의 Interface Builder에서 이러한 각 컨트롤러는 자체 _장면_에 상주 합니다.In Xcode's Interface Builder, each of these controllers lives in its own Scene.

각 장면은 UI의 각 장면을 연결 하 여 해당 관계를 표시 하는 일련의 선 (Segue 이라고 함)과 함께 지정 된 뷰 및 뷰 컨트롤러 쌍을 나타냅니다.Each Scene represents a given View and View Controller Pair with a set of lines (called Segues) that connect each Scene in the UI, thus showing their relationships. 일부 Segue는 하나 이상의 자식 뷰나 뷰 컨트롤러를 포함 하는 뷰 컨트롤러를 정의 합니다.Some Segues define how one View Controller contains one or more child Views or View Controllers. 다른 Segue 뷰 컨트롤러 (예: 팝 오버 또는 대화 상자 표시) 간의 전환을 정의 합니다.Other Segues, define transitions between View Controller (such as displaying a popover or dialog box).

가장 중요 한 점은 각 Segue는 응용 프로그램 UI의 지정 된 요소 간에 일부 형식의 데이터 흐름을 나타내는 것입니다.The most important thing to note is that each Segue represents the flow of some form of data between the given element of the app's UI.

뷰 컨트롤러 작업Working with View Controllers

뷰 컨트롤러는 Mac 앱 내에서 지정 된 정보 보기와 해당 정보를 제공 하는 데이터 모델 간의 관계를 정의 합니다.View Controllers define the relationships between a given View of information within a Mac app and the data model that provides that information. 스토리 보드의 각 최상위 장면은 Xamarin.ios 앱의 코드에서 하나의 뷰 컨트롤러를 나타냅니다.Each top level scene in the Storyboard represents one View Controller in the Xamarin.Mac app's code.

이러한 방식으로 각 뷰 컨트롤러는 정보의 시각적 표시 (보기)와 해당 정보를 표시 하 고 제어 하는 논리에 대 한 자체 포함 된 재사용 가능한 쌍입니다.In this way, each View Controller is a self-contained, reusable pairing of both the information's visual representation (View) and the logic to present and control that information.

지정 된 장면 내에서 일반적으로 개별 .xib 파일에 의해 처리 되는 모든 작업을 수행할 수 있습니다.Within a given Scene, you can do all of the things that would normally have been handled by individual .xib files:

  • 하위 뷰 및 컨트롤 (예: 단추 및 텍스트 상자)을 입력 합니다.Place subviews and controls (such as buttons and text boxes).
  • 요소 위치 및 자동 레이아웃 제약 조건을 정의 합니다.Define element positions and auto layout constraints.
  • UI 요소를 코드에 노출 하는 작업 및 콘센트를 연결 합니다.Wire-up Actions and Outlets to expose UI elements to code.

Segue 사용Working with Segues

위에서 설명한 것 처럼 Segue는 앱의 UI를 정의 하는 모든 장면 간의 관계를 제공 합니다.As stated above, Segues provide the relationships between all of the Scenes that define your app's UI. IOS의 스토리 보드에서 작업 하는 데 익숙한 경우 Segue for iOS는 일반적으로 전체 화면 보기 간의 전환을 정의 한다는 것을 알고 있습니다.If you are familiar with working in Storyboards in iOS, you know that Segues for iOS usually define transitions between full screen views. 이는 Segue가 일반적으로 "포함"을 정의 하는 경우 macOS와 다릅니다. 여기서 한 장면은 부모 장면의 자식입니다.This differs from macOS, when Segues usually define "containment" (where one Scene is the child of a parent Scene).

MacOS에서 대부분의 앱은 분할 뷰 및 탭과 같은 UI 요소를 사용 하 여 동일한 창 내에서 보기를 함께 그룹화 하는 경향이 있습니다.In macOS, most apps tend to group their views together within the same window using UI elements such as Split Views and Tabs. IOS와 달리 보기는 물리적 표시 공간이 제한 되어 있으므로 화면을 전환 하거나 화면에서 해제 해야 합니다.Unlike iOS, where views need to be transitioned on and off screen, due to limited physical display space.

포함에 대 한 macOS 성향을 지정 된 경우 모달 창, 시트 보기 및 Popovers와 같은 프레젠테이션 segue 이 사용 되는 경우가 있습니다.Given macOS's tendencies towards containment, there are situations where Presentation Segues are used, such as Modal Windows, Sheet Views and Popovers.

프레젠테이션 Segue를 사용 하는 경우 표시 되는 부모 뷰 컨트롤러의 PrepareForSegue 메서드를 재정의 하 고, 변수를 초기화 하 고 표시 되는 뷰 컨트롤러에 데이터를 제공할 수 있습니다.When using Presentation Segues, you can override the PrepareForSegue method of the parent View Controller for presentation to initialize and variables and provide any data to the View Controller being presented.

디자인 및 실행 시간Design and Run Times

디자인 타임 (Xcode의 Interface Builder UI를 레이아웃 하는 경우)에서 앱 UI의 각 요소는 해당 구성 항목으로 분류 됩니다.At Design time (when layout out the UI in Xcode's Interface Builder), each element of the app's UI is broken down into it's constituent items:

  • 장면 -다음으로 구성 됩니다.Scenes - Which are composed of:
    • 뷰 컨트롤러 -뷰 및 뷰를 지 원하는 데이터 간의 관계를 정의 합니다.View Controller - That define the relationships between Views and the data that support them.
    • Views 및 하위 뷰 -사용자 인터페이스를 구성 하는 실제 요소입니다.Views and Subviews - The actual elements that make up the user interface.
    • 포함 segue -장면 간 부모-자식 관계를 정의 합니다.Containment Segues - That define the parent-child relationships between Scenes.
  • 프레젠테이션 segue -개별 프레젠테이션 모드를 정의 합니다.Presentation Segues - That define individual presentation modes.

이러한 방식으로 각 요소를 정의 하 여 런타임 중에 필요할 때만 각 요소를 지연 로드할 수 있습니다.By defining each element in this way, it allows for the lazy-loading of each element only as it is needed during runtime. MacOS에서 전체 프로세스는 개발자가 작업을 수행 하기 위해 최소한의 지원 코드를 필요로 하는 복잡 하 고 유연한 사용자 인터페이스를 만들 수 있도록 설계 되었습니다 .이는 모두 시스템 리소스를 최대한 효율적으로 사용 합니다.In macOS, the entire process was designed to allow the developer to create complex, flexible User Interfaces that require a bare minimum of backing code to make them work, all while being as efficient with system resources as possible.

스토리 보드 빠른 시작Storyboard Quick Start

스토리 보드 빠른 시작 가이드에서는 사용자 인터페이스를 만들기 위해 storyboard 작업의 주요 개념을 소개 하는 간단한 xamarin.ios 앱을 만듭니다.In the Storyboard Quick Start guide, we'll create a simple Xamarin.Mac app that introduces the key concepts of working with storyboards to create a User Interface. 샘플 앱은 콘텐츠 영역검사기 영역이 포함 된 Spilt 뷰로 구성 되며 간단한 기본 설정 대화 상자 창을 제공 합니다.The sample app will consist of a Spilt View containing a Content Area and an Inspector Area and it will present a simple Preferences Dialog window. Segue를 사용 하 여 모든 사용자 인터페이스 요소를 함께 연결 합니다.We'll be using Segues to tie all of the User Interface elements together.

Storyboards 작업Working with Storyboards

이 섹션에서는 Xamarin.ios 앱에서 스토리 보드로 작업 하는 방법에 대 한 자세한 내용을 다룹니다.This section covers the in-depth details of Working with Storyboards in a Xamarin.Mac app. 이에 대 한 자세한 설명 및 보기 컨트롤러와 뷰로 구성 된 방법에 대해 자세히 살펴보겠습니다.We take an in-depth look at Scenes and how they are composed of View Controllers and View. 그런 다음 Segue와의 상호 연결 방식을 살펴보겠습니다.Then, we'll take a look at how Scenes are tied together with Segues. 마지막으로, 사용자 지정 Segue 형식으로 작업 하는 방법을 살펴보겠습니다.Finally, we'll take a look at working with custom Segue types.

복잡 한 Storyboard 예Complex Storyboard Example

Xamarin.ios 앱에서 Storyboard를 사용 하는 복잡 한 예제에 대 한 예제는 Sourcewriter 샘플 앱을 참조 하세요.For an example of a complex example of working with Storyboards in a Xamarin.Mac app, please see the SourceWriter Sample App. SourceWriter는 코드 완성 및 간단한 구문 강조 기능을 제공하는 간단한 소스 코드 편집기입니다.SourceWriter is a simple source code editor that provides support for code completion and simple syntax highlighting.

SourceWriter 코드는 완벽하게 주석 처리되어 있으며, 가능한 경우 Xamarin.Mac 지침 설명서에 핵심 기술 또는 메서드부터 관련 정보까지 다양한 링크가 제공됩니다.The SourceWriter code has been fully commented and, where available, links have be provided from key technologies or methods to relevant information in the Xamarin.Mac Guides Documentation.

요약Summary

이 문서에서는 Xamarin.ios 앱에서 Storyboard를 사용 하는 방법을 간략히 살펴보겠습니다.This article has taken a quick look at working with Storyboards in a Xamarin.Mac app. 스토리 보드를 사용 하 여 새 앱을 만드는 방법 및 사용자 인터페이스를 정의 하는 방법을 살펴보았습니다.We saw how to create a new app using storyboards and how to define a user interface. 또한 segue를 사용 하 여 서로 다른 창 및 뷰 상태 사이를 탐색 하는 방법도 살펴보았습니다.We also saw how to navigate between different windows and view states using segues.