다음을 통해 공유


Xamarin.Mac의 Storyboard 소개

이 문서에서는 Xamarin.Mac 앱에서 Storyboards를 사용하는 방법을 소개합니다. 스토리보드와 Xcode의 Interface Builder를 사용하여 앱의 UI를 만들고 유지 관리하는 내용을 다룹니다.

스토리보드를 사용하면 창 정의 및 컨트롤을 포함할 뿐만 아니라 여러 창(segues를 통해) 및 보기 상태 간의 링크도 포함하는 Xamarin.Mac 앱용 사용자 인터페이스를 개발할 수 있습니다.

Xcode의 샘플 UI

이 문서에서는 Storyboards를 사용하여 Xamarin.Mac 앱의 사용자 인터페이스를 정의하는 방법을 소개합니다.

스토리보드란?

Storyboards를 사용하면 모든 Xamarin.Mac 앱의 UI를 개별 요소와 사용자 인터페이스 간의 모든 탐색을 사용하여 단일 위치에 정의할 수 있습니다. Xamarin.Mac용 스토리보드는 Xamarin.iOS용 Storyboards와 매우 유사한 방식으로 작동합니다. 그러나 인터페이스 관용구가 다르기 때문에 다른 Segue 형식 집합을 포함합니다.

장면 작업

위에서 설명한 것처럼 Storyboard는 지정된 앱에 대한 모든 UI를 뷰 컨트롤러의 기능 개요로 세분화하여 정의합니다. Xcode의 인터페이스 작성기에서 이러한 각 컨트롤러는 자체 장면에 있습니다.

예제 뷰 컨트롤러

각 장면은 UI의 각 장면을 연결하는 일련의 선(Segues라고 함)을 사용하여 지정된 뷰 및 뷰 컨트롤러 쌍을 나타내므로 해당 관계를 표시합니다. 일부 Segues는 하나의 뷰 컨트롤러에 하나 이상의 자식 뷰 또는 뷰 컨트롤러를 포함하는 방법을 정의합니다. 다른 Segues는 뷰 컨트롤러 간의 전환(예: 팝오버 또는 대화 상자 표시)을 정의합니다.

샘플 segue

주의해야 할 가장 중요한 점은 각 Segue가 앱 UI의 지정된 요소 간에 어떤 형태의 데이터 흐름을 나타낸다는 것입니다.

뷰 컨트롤러 작업

뷰 컨트롤러는 Mac 앱 내의 지정된 정보 보기와 해당 정보를 제공하는 데이터 모델 간의 관계를 정의합니다. Storyboard의 각 최상위 장면은 Xamarin.Mac 앱의 코드에 있는 하나의 뷰 컨트롤러를 나타냅니다.

보기 컨트롤러를 미끄러지는 예제

이러한 방식으로 각 뷰 컨트롤러는 정보의 시각적 표현(보기)과 해당 정보를 표시하고 제어하는 논리를 모두 다시 사용할 수 있는 자체 포함 페어링입니다.

지정된 장면 내에서 일반적으로 개별 .xib 파일에서 처리되었을 모든 작업을 수행할 수 있습니다.

  • 하위 보기 및 컨트롤(예: 단추 및 텍스트 상자)을 배치합니다.
  • 요소 위치 및 자동 레이아웃 제약 조건을 정의합니다.
  • 코드에 UI 요소를 노출하는 유선 작업 및 출선입니다.

Segues 작업

위에서 설명한 대로 Segues는 앱의 UI를 정의하는 모든 장면 간의 관계를 제공합니다. iOS의 Storyboards 작업에 익숙한 경우 iOS용 Segues는 일반적으로 전체 화면 보기 간의 전환을 정의합니다. 이는 Segues가 일반적으로 "포함"을 정의하는 macOS와 다릅니다(여기서 한 장면은 부모 장면의 자식임).

macOS에서 대부분의 앱은 분할 보기 및 탭과 같은 UI 요소를 사용하여 동일한 창 내에서 보기를 그룹화합니다. 제한된 실제 디스플레이 공간으로 인해 화면 상과 화면 끄기에서 보기를 전환해야 하는 iOS와는 다릅니다.

macOS의 포함 경향을 고려할 때 모달 Windows, 시트 뷰 및 팝오버와 같은 프레젠테이션 Segue가 사용되는 상황이 있습니다.

Presentation Segues를 사용하는 경우 프레젠테이션에 대한 부모 뷰 컨트롤러의 메서드를 재정 PrepareForSegue 의하여 프레젠테이션을 초기화하고 변수를 지정하고 표시되는 뷰 컨트롤러에 데이터를 제공할 수 있습니다.

디자인 및 런타임

디자인 타임(Xcode의 인터페이스 작성기에서 UI를 레이아웃할 때) 앱 UI의 각 요소는 구성 요소로 세분화됩니다.

  • 장면 - 다음으로 구성됩니다.
    • 뷰 컨트롤러 - 뷰와 뷰를 지원하는 데이터 간의 관계를 정의합니다.
    • 뷰 및 하위 보기 - 사용자 인터페이스를 구성하는 실제 요소입니다.
    • 포함 Segues - 장면 간의 부모-자식 관계를 정의합니다.
  • 프레젠테이션 Segues - 개별 프레젠테이션 모드를 정의합니다.

이러한 방식으로 각 요소를 정의하면 런타임 중에 필요할 때만 각 요소의 지연 로드를 허용합니다. macOS에서 전체 프로세스는 개발자가 시스템 리소스를 최대한 효율적으로 사용하면서 최소한의 백업 코드가 필요한 복잡하고 유연한 사용자 인터페이스를 만들 수 있도록 설계되었습니다.

스토리보드 빠른 시작

Storyboard 빠른 시작 가이드에서는 스토리보드를 사용하여 사용자 인터페이스를 만드는 주요 개념을 소개하는 간단한 Xamarin.Mac 앱을 만듭니다. 샘플 앱은 콘텐츠 영역과 검사기 영역을 포함하는 Spilt 보기로 구성되며 간단한 기본 설정 대화 상자 창을 제공합니다. Segues를 사용하여 모든 사용자 인터페이스 요소를 함께 연결합니다.

Storyboards 작업

이 섹션에서는 Xamarin.Mac 앱에서 Storyboard를 사용하는 자세한 내용을 다룹니다. 장면 및 뷰 컨트롤러 및 보기로 구성된 방법을 자세히 살펴봅니다. 그런 다음, 장면이 Segues와 어떻게 연결되는지 살펴보겠습니다. 마지막으로, 사용자 지정 Segue 형식으로 작업하는 것을 살펴보겠습니다.

요약

이 문서에서는 Xamarin.Mac 앱에서 Storyboards로 작업하는 것을 간단히 살펴보았습니다. 스토리보드를 사용하여 새 앱을 만드는 방법과 사용자 인터페이스를 정의하는 방법을 알아보았습니다. 또한 segue를 사용하여 여러 창 사이를 탐색하고 상태를 보는 방법도 확인했습니다.