다음을 통해 공유

Xamarin에서 tvOS 누적 보기 작업

  • 아티클

Warning

iOS 디자이너는 Visual Studio 2019 버전 16.8 및 Mac용 Visual Studio 2019 버전 8.8에서 사용이 중단되었으며 Visual Studio 2019 버전 16.9 및 Mac용 Visual Studio 버전 8.9에서 제거되었습니다. iOS 사용자 인터페이스를 빌드하는 권장 방법은 Xcode의 Interface Builder를 실행하는 Mac에서 직접 빌드하는 것입니다. 자세한 내용은 Xcode를 사용하여 사용자 인터페이스 디자인을 참조하세요.

스택 보기 컨트롤(UIStackView)은 자동 레이아웃 및 크기 클래스의 기능을 활용하여 Apple TV 장치의 콘텐츠 변경 및 화면 크기에 동적으로 응답하는 하위 보기 스택을 가로 또는 세로로 관리합니다.

스택 뷰에 연결된 모든 하위 보기의 레이아웃은 축, 분포, 맞춤 및 간격과 같은 개발자 정의 속성을 기반으로 관리됩니다.

하위 보기 레이아웃 다이어그램

Xamarin.tvOS 앱에서 사용하는 UIStackView 경우 개발자는 iOS 디자이너의 Storyboard 내에서 또는 C# 코드에서 하위 보기를 추가 및 제거하여 하위 보기를 정의할 수 있습니다.

누적 보기 컨트롤 정보

렌더링 UIStackView 되지 않는 컨테이너 뷰로 설계되므로 다른 서브클래스 UIView처럼 캔버스에 그려지지 않습니다. 속성(예: BackgroundColor 재정의 DrawRect )을 설정해도 시각적 효과가 없습니다.

스택 뷰가 하위 뷰 컬렉션을 정렬하는 방법을 제어하는 몇 가지 속성이 있습니다.

  • 축 – 스택 뷰가 하위 보기를 가로 또는 세로로 정렬하는지 여부를 결정합니다.
  • 맞춤 – 하위 보기가 스택 뷰 내에서 정렬되는 방식을 제어합니다.
  • 배포 – 하위 보기의 크기를 스택 뷰 내에서 조정하는 방법을 제어합니다.
  • 간격 – 스택 뷰의 각 하위 보기 사이의 최소 공간을 제어합니다.
  • 초기 계획 상대 – 각 true하위 뷰의 세로 간격이 기준선에서 파생됩니다.
  • 레이아웃 여백 상대 – 표준 레이아웃 여백을 기준으로 하위 보기를 배치합니다.

일반적으로 스택 보기를 사용하여 적은 수의 하위 보기를 정렬합니다. 하나 이상의 스택 뷰를 서로 중첩하여 더 복잡한 사용자 인터페이스를 만들 수 있습니다.

하위 보기에 제약 조건을 추가하여 UI 모양을 더욱 미세 조정할 수 있습니다(예: 높이 또는 너비 제어). 그러나 스택 뷰 자체에 의해 도입된 제약 조건과 충돌하는 제약 조건을 포함하지 않도록 주의해야 합니다.

자동 레이아웃 및 크기 클래스

하위 보기가 스택 보기에 추가되면 자동 레이아웃 및 크기 클래스를 사용하여 정렬된 뷰의 위치를 지정하고 크기를 조정하는 스택 뷰에 의해 레이아웃이 완전히 제어됩니다.

스택 보기는 컬렉션의 첫 번째 및 마지막 하위 보기를 세로 스택 보기의 위쪽 및 아래쪽 가장자리 또는 가로 스택 보기의 왼쪽 및 오른쪽 가장자리에 고정합니다. 속성을 true설정하는 LayoutMarginsRelativeArrangement 경우 뷰는 하위 보기를 에지 대신 관련 여백에 고정합니다.

스택 뷰는 정의된 Axis 하위 뷰 크기를 계산할 때 하위 보기의 IntrinsicContentSize 속성을 사용합니다(제외FillEqually Distribution). 크기가 FillEqually Distribution 같도록 모든 하위 보기의 크기를 조정하여 스택 뷰를 Axis따라 채웁니다.

스택 뷰는 예외를 제외하고 Fill Alignment하위 뷰의 IntrinsicContentSize 속성을 사용하여 뷰의 크기를 지정된 Axis값과 수직으로 계산합니다. 의 Fill Alignment경우 모든 하위 뷰의 크기가 지정한 스택 뷰에 수직으로 채워지도록 크기가 Axis조정됩니다.

스택 뷰 위치 지정 및 크기 조정

스택 뷰는 하위 뷰의 레이아웃을 완전히 제어하지만(예: AxisDistribution속성 및) 자동 레이아웃 및 크기 클래스를 사용하여 상위 보기 내에 스택 뷰(UIStackView)를 배치해야 합니다.

일반적으로 스택 뷰의 두 개 이상의 가장자리를 고정하여 확장 및 축소하여 위치를 정의합니다. 추가 제약 조건이 없으면 스택 뷰는 다음과 같이 모든 하위 보기에 맞게 자동으로 크기가 조정됩니다.

  • 해당 Axis 크기는 모든 하위 보기 크기의 합계와 각 하위 보기 간에 정의된 모든 공간의 합계입니다.
  • 속성이 LayoutMarginsRelativeArrangementtrue면 스택 뷰 크기에 여백에 대한 공간도 포함됩니다.
  • 이 컬렉션의 수직 크기 Axis 는 컬렉션에서 가장 큰 하위 뷰로 설정됩니다.

또한 스택 뷰의 높이 및 너비에 대한 제약 조건을 지정할 수 있습니다. 이 경우 하위 뷰는 스택 뷰에서 지정한 공간과 속성에 의해 결정 DistributionAlignment 되는 공간을 채우기 위해 배치됩니다(크기).

속성이 BaselineRelativeArrangement 있는 경우 하위 보기는 true위쪽, 아래쪽 또는 가운데 - Y 위치를 사용하는 대신 첫 번째 또는 마지막 하위 보기의 기준선을 기반으로 배치됩니다. 이러한 항목은 다음과 같이 스택 뷰의 콘텐츠에서 계산됩니다.

  • 세로 스택 뷰는 첫 번째 기준선의 첫 번째 하위 뷰와 마지막 기준의 마지막 하위 보기를 반환합니다. 이러한 하위 보기 중 하나가 스택 뷰인 경우 첫 번째 또는 마지막 기준선이 사용됩니다.
  • 가로 스택 보기는 첫 번째 및 마지막 기준선 모두에 대해 가장 높은 하위 보기를 사용합니다. 가장 높은 뷰도 스택 뷰인 경우 가장 높은 하위 보기를 기준선으로 사용합니다.

Important

기준선이 잘못된 위치로 계산되므로 기준선 맞춤은 확장되거나 압축된 하위 뷰 크기에서 작동하지 않습니다. 기준선 맞춤의 경우 하위 보기의 높이 가 내장 콘텐츠 뷰의 높이와 일치하는지 확인합니다.

일반적인 스택 보기 사용

스택 뷰 컨트롤과 잘 작동하는 여러 레이아웃 형식이 있습니다. Apple에 따르면 다음과 같은 몇 가지 일반적인 용도가 있습니다.

  • 축 을 따라 크기 정의 - 스택 뷰 Axis 를 따라 두 가장자리를 고정하고 인접한 가장자리 중 하나를 고정하여 위치를 설정하면 스택 보기는 축을 따라 하위 보기로 정의된 공간에 맞게 증가합니다.
  • 하위 보기의 위치 정의 - 스택 뷰의 인접한 가장자리에 상위 뷰에 고정하면 스택 뷰가 하위 뷰를 포함하는 데 맞게 두 차원 모두에서 증가합니다.
  • 스택 의 크기 및 위치 정의 - 스택 보기의 네 가장자리를 모두 부모 보기에 고정하여 스택 보기는 스택 뷰 내에 정의된 공간에 따라 하위 보기를 정렬합니다.
  • 축 의 수직 크기 정의 - 스택 뷰 Axis 에 수직으로 두 가장자리를 고정하고 축을 따라 가장자리 중 하나를 고정하여 위치를 설정하면 스택 보기는 하위 보기에 정의된 공간에 맞게 축에 수직으로 증가합니다.

스택 보기 및 스토리보드

Xamarin.tvOS 앱에서 스택 보기를 사용하는 가장 쉬운 방법은 iOS 디자이너를 사용하여 앱의 UI에 추가하는 것입니다.

  1. Solution Pad에서 파일을 두 번 클릭하고 Main.storyboard 편집을 위해 엽니다.

  2. 스택 뷰에 추가할 개별 요소의 레이아웃을 디자인합니다.

    요소 레이아웃 예제

  3. 요소에 필요한 제약 조건을 추가하여 올바르게 크기를 조정합니다. 이 단계는 요소가 스택 뷰에 추가되면 중요합니다.

  4. 필요한 복사본 수를 만듭니다(이 경우 4개).

    필요한 복사본 수

  5. 도구 상자에서 스택 보기를 끌어 보기에 놓습니다.

    스택 보기

  6. 스택 보기를 선택하고 속성 패드의 위젯 탭에서 맞춤 채우기를 선택하고 분포에 대해 균등하게 채우고 간격을 입력 25 합니다.

    위젯 탭

  7. 원하는 위치에 스택 보기를 배치하고 제약 조건을 추가하여 필요한 위치에 유지합니다.

  8. 개별 요소를 선택하고 스택 보기로 끌어옵니다.

    스택 보기의 개별 요소

  9. 레이아웃이 조정되고 위에서 설정한 특성에 따라 요소가 스택 보기에 정렬됩니다.

  10. 속성 탐색기의 위젯 탭에 이름을 할당하여 C# 코드에서 UI 컨트롤을 사용합니다.

  11. 변경 내용을 저장합니다.

Important

이벤트 처리기를 만들 때 iOS 디자이너에서 UI 요소(예: aUIButton)와 같은 TouchUpInside 작업을 할당할 수 있지만 Apple TV에는 터치 스크린이나 지원 터치 이벤트가 없기 때문에 호출되지 않습니다. tvOS 사용자 인터페이스 요소에 대한 작업을 만들 때 항상 기본값 Action Type 을 사용해야 합니다.

스토리보드 작업에 대한 자세한 내용은 Hello, tvOS 빠른 시작 가이드를 참조하세요.

예제의 경우 세그먼트 컨트롤에 대한 콘센트 및 작업과 각 "플레이어 카드"에 대한 콘센트를 공개했습니다. 코드에서는 현재 세그먼트를 기반으로 플레이어를 숨기고 표시합니다. 예시:

partial void PlayerCountChanged (Foundation.NSObject sender) {

    // Take Action based on the segment
    switch(PlayerCount.SelectedSegment) {
    case 0:
        Player1.Hidden = false;
        Player2.Hidden = true;
        Player3.Hidden = true;
        Player4.Hidden = true;
        break;
    case 1:
        Player1.Hidden = false;
        Player2.Hidden = false;
        Player3.Hidden = true;
        Player4.Hidden = true;
        break;
    case 2:
        Player1.Hidden = false;
        Player2.Hidden = false;
        Player3.Hidden = false;
        Player4.Hidden = true;
        break;
    case 3:
        Player1.Hidden = false;
        Player2.Hidden = false;
        Player3.Hidden = false;
        Player4.Hidden = false;
        break;
    }
}

앱이 실행되면 네 가지 요소가 스택 뷰에 동일하게 분산됩니다.

앱이 실행되면 네 개의 요소가 스택 뷰에 동일하게 분산됩니다.

플레이어 수가 감소하면 사용되지 않는 보기가 숨겨지고 스택 보기가 레이아웃을 다음과 같이 조정합니다.

플레이어 수가 감소하면 사용되지 않는 보기가 숨겨지고 스택 보기가 레이아웃을 맞게 조정합니다.

코드에서 스택 뷰 채우기

iOS 디자이너에서 스택 뷰의 내용과 레이아웃을 완전히 정의하는 것 외에도 C# 코드에서 동적으로 만들고 제거할 수 있습니다.

스택 보기를 사용하여 검토에서 "별"을 처리하는 다음 예제를 수행합니다(1~5).

public int Rating { get; set;} = 0;
...

partial void IncreaseRating (Foundation.NSObject sender) {

    // Maximum of 5 "stars"
    if (++Rating > 5 ) {
        // Abort
        Rating = 5;
        return;
    }

    // Create new rating icon and add it to stack
    var icon = new UIImageView (new UIImage("icon.png"));
    icon.ContentMode = UIViewContentMode.ScaleAspectFit;
    RatingView.AddArrangedSubview(icon);

    // Animate stack
    UIView.Animate(0.25, ()=>{
        // Adjust stack view
        RatingView.LayoutIfNeeded();
    });

}

partial void DecreaseRating (Foundation.NSObject sender) {

    // Minimum of zero "stars"
    if (--Rating < 0) {
        // Abort
        Rating =0;
        return;
    }

    // Get the last subview added
    var icon = RatingView.ArrangedSubviews[RatingView.ArrangedSubviews.Length-1];

    // Remove from stack and screen
    RatingView.RemoveArrangedSubview(icon);
    icon.RemoveFromSuperview();

    // Animate stack
    UIView.Animate(0.25, ()=>{
        // Adjust stack view
        RatingView.LayoutIfNeeded();
    });
}

이 코드의 몇 가지 부분을 자세히 살펴보겠습니다. 첫째, 문을 사용하여 if 5개 이하의 "별"이 없거나 0보다 작지 않다는 것을 검사.

새 "별"을 추가하려면 이미지를 로드하고 콘텐츠 모드를 가로 세로 맞춤 크기 조정으로 설정합니다.

var icon = new UIImageView (new UIImage("icon.png"));
icon.ContentMode = UIViewContentMode.ScaleAspectFit;

이렇게 하면 스택 뷰에 추가될 때 "별" 아이콘이 왜곡되지 않습니다.

다음으로 스택 뷰의 하위 뷰 컬렉션에 새 "별표" 아이콘을 추가합니다.

RatingView.AddArrangedSubview(icon);

에 추가된 속성이 아니라 '의 ArrangedSubviews 속성에 추가 UIImageViewUIStackView된 SubView것을 알 수 있습니다. 스택 뷰에서 레이아웃을 제어하려는 모든 뷰를 속성에 ArrangedSubviews 추가해야 합니다.

스택 뷰에서 하위 보기를 제거하려면 먼저 제거할 하위 보기를 가져옵니다.

var icon = RatingView.ArrangedSubviews[RatingView.ArrangedSubviews.Length-1];

그런 다음 컬렉션과 슈퍼 뷰 모두에서 ArrangedSubviews 제거해야 합니다.

// Remove from stack and screen
RatingView.RemoveArrangedSubview(icon);
icon.RemoveFromSuperview();

컬렉션에서 하위 ArrangedSubviews 보기를 제거하면 스택 뷰의 컨트롤에서 제거되지만 화면에서 제거되지는 않습니다.

동적으로 콘텐츠 변경

스택 보기는 하위 보기가 추가, 제거 또는 숨겨질 때마다 하위 보기의 레이아웃을 자동으로 조정합니다. 스택 뷰의 속성이 조정된 경우(예: Axis해당) 레이아웃도 조정됩니다.

레이아웃 변경 내용은 애니메이션 블록 내에 배치하여 애니메이션 효과를 줄 수 있습니다. 예를 들면 다음과 같습니다.

// Animate stack
UIView.Animate(0.25, ()=>{
    // Adjust stack view
    RatingView.LayoutIfNeeded();
});

스토리보드 내에서 크기 클래스를 사용하여 스택 뷰의 많은 속성을 지정할 수 있습니다. 이러한 속성은 크기 또는 방향 변경에 대한 응답으로 자동으로 애니메이션됩니다.

요약

이 문서에서는 Xamarin.tvOS 앱 내의 누적 보기 디자인 및 작업에 대해 설명했습니다.