다음을 통해 공유

Xamarin에서 tvOS 페이지 컨트롤 작업

  • 아티클

경우에 따라 Xamarin.tvOS 앱에 일련의 페이지 또는 이미지를 표시해야 할 수 있습니다. 페이지 컨트롤은 사용자가 최대 페이지 수를 벗어나는 페이지를 명확하게 표시하도록 설계되었습니다. 페이지 컨트롤은 어두운 타원 모양의 배경에 대해 일련의 점을 표시합니다. 현재 페이지에는 채워진 점이 표시되며, 다른 모든 페이지는 속이 빈 점으로 표시됩니다. 페이지 컨트롤의 배경 영역에 맞게 너무 많은 경우 가장 바깥쪽 점을 클리핑 합니다.

샘플 페이지 컨트롤

사용자에게만 피드백을 제공하도록 설계된 비대화형 요소의 페이지 컨트롤입니다. 현재 페이지 번호(예: 제스처 또는 단추)를 변경하려면 다른 컨트롤을 추가해야 합니다.

Apple에는 페이지 컨트롤을 사용할 때 다음과 같은 제안이 있습니다.

  • 전체 컬렉션에서만 사용 - 페이지 컨트롤은 전체 화면 환경에서 가장 잘 작동하여 단일 컬렉션에 있는 여러 페이지를 표시합니다.
  • 페이지 수 제한 - 페이지 컨트롤은 10개(10개) 이하 페이지 및 최대 20페이지에 가장 적합합니다. 20개 이상의 페이지에서 컬렉션 뷰를 사용하고 그리드에 페이지를 표시하는 것이 좋습니다.

페이지 컨트롤 및 스토리보드

Xamarin.tvOS 앱에서 페이지 컨트롤을 사용하는 가장 쉬운 방법은 iOS 디자이너를 사용하여 앱의 UI에 추가하는 것입니다.

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

  2. 도구 상자에서 페이지 컨트롤을 끌어서 보기에 놓습니다.

    페이지 컨트롤

  3. 속성 패드의 위젯 탭에서 페이지 컨트롤의 현재 페이지 및 페이지 수와 같은 여러 속성을 조정할 수 있습니다.

    위젯 탭

  4. 그런 다음 컨트롤 또는 제스처를 보기에 추가하여 페이지 컬렉션을 앞뒤로 이동합니다.

  5. 마지막으로 C# 코드에서 응답할 수 있도록 컨트롤에 이름을 할당합니다. 예시:

    컨트롤 이름 지정

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

Important

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

뷰 컨트롤러(예 ViewController.cs) 파일을 편집하고 변경되는 페이지를 처리하는 코드를 추가합니다. 예시:

using System;
using Foundation;
using UIKit;

namespace MySingleView
{
    public partial class ViewController : UIViewController
    {
        #region Computed Properties
        public nint PageNumber { get; set; } = 0;
        #endregion

        #region Constructors
        public ViewController (IntPtr handle) : base (handle)
        {
        }
        #endregion

        #region Override Methods
        public override void ViewDidLoad ()
        {
            base.ViewDidLoad ();

            // Initialize
            PageView.Pages = 6;
            ShowCat ();
        }

        public override void DidReceiveMemoryWarning ()
        {
            base.DidReceiveMemoryWarning ();
            // Release any cached data, images, etc that aren't in use.
        }
        #endregion

        #region Custom Actions
        partial void NextCat (UIBarButtonItem sender) {

            // Display next Cat
            if (++PageNumber > 5) {
                PageNumber = 5;
            }
            ShowCat();

        }

        partial void PreviousCat (UIBarButtonItem sender) {
            // Display previous cat
            if (--PageNumber < 0) {
                PageNumber = 0;
            }
            ShowCat();
        }
        #endregion

        #region Private Methods
        private void ShowCat() {

            // Adjust UI
            PreviousButton.Enabled = (PageNumber > 0);
            NextButton.Enabled = (PageNumber < 5);
            PageView.CurrentPage = PageNumber;

            // Display new cat
            CatView.Image = UIImage.FromFile(string.Format("Cat{0:00}.jpg",PageNumber+1));
        }
        #endregion
    }
}

페이지 컨트롤의 두 속성을 자세히 살펴보겠습니다. 먼저 최대 페이지 수를 지정하려면 다음을 사용합니다.

PageView.Pages = 6;

현재 페이지 번호를 변경하려면 다음 코드를 사용합니다.

PageView.CurrentPage = PageNumber;

속성은 CurrentPage 0부터 시작하므로 첫 번째 페이지는 0이고 마지막 페이지는 최대 페이지 수를 뺀 페이지가 됩니다.

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

요약

이 문서에서는 Xamarin.tvOS 앱 내에서 페이지 컨트롤을 디자인하고 사용하는 작업을 설명했습니다.