다음을 통해 공유

Xamarin에서 tvOS 세그먼트 컨트롤 작업

  • 아티클

Segmented Control은 각각 아이콘 또는 텍스트를 포함할 수 있는 선형 요소 집합을 제공하며 사용자에게 관련 선택 사항 집합을 제공하는 데 사용됩니다.

샘플 세그먼트 컨트롤

Apple에는 Segmented Controls를 사용하기 위한 다음과 같은 제안이 있습니다.

  • 충분한 공간 제공 - 다른 포커스 가능한 항목 과 분할된 컨트롤 사이에 충분한 공간을 제공하기 위해 주의해야 합니다. 개별 세그먼트는 포커스가 있을 때 선택되고(클릭할 때가 아님) 사용자가 현재 세그먼트에서 다른 포커스 가능한 항목을 실제로 선택하려고 할 때 실수로 세그먼트를 변경할 수 있습니다.
  • 콘텐츠 필터링 에 분할 보기 사용 - 분할된 컨트롤은 콘텐츠와 필터 간을 쉽게 탐색할 수 있도록 분할 뷰를 설계했기 때문에 콘텐츠 필터링에 적합하지 않습니다.
  • 최대 7개 세그먼트로 제한 - 소파의 방 전체에서 구문 분석하기 쉽고 탐색하기 쉽기 때문에 최대 세그먼트 수를 8(8) 미만으로 유지해야 합니다.
  • 일관된 세그먼트 콘텐츠 크기 사용 - 모든 세그먼트의 너비는 같으며, 가능하면 각 세그먼트의 콘텐츠를 동일한 크기로 유지해야 합니다. 이렇게 하면 세그먼트 컨트롤이 시각적으로 더 만족스럽게 표시할 뿐만 아니라 한눈에 읽기가 쉬워집니다.
  • 아이콘과 텍스트를 혼합하지 마세요. 각 개별 세그먼트는 아이콘이나 텍스트를 포함할 수 있지만 둘 다 포함할 수는 없습니다. 동일한 Segmented Control에서 아이콘과 텍스트를 모두 혼합할 수 있지만 이 작업은 피해야 합니다.

세그먼트 아이콘 정보

Apple은 검색을 위해 돋보기와 같은 세그먼트 아이콘에 간단하고 인식 가능한 이미지를 사용할 것을 제안합니다. 지나치게 복잡한 아이콘은 방 전체의 TV 화면에서 인식하기 어렵기 때문에 아이콘을 간단한 표현으로 제한하는 것이 가장 좋습니다.

지정된 세그먼트에서 텍스트와 아이콘을 모두 혼합할 수 없으며 단일 세그먼트 컨트롤에서 아이콘과 텍스트를 혼합하지 않아야 합니다. 모든 아이콘 또는 모든 텍스트여야 합니다.

세그먼트 텍스트

Apple은 세그먼트 텍스트 작업에 대해 다음과 같은 제안을 합니다.

  • 짧고 의미 있는 명사 사용 - 세그먼트 제목은 지정된 세그먼트를 선택할 때 사용자가 예상해야 하는 콘텐츠 형식을 명확하게 명시해야 합니다. 예: 음악 또는 비디오.
  • 제목 대/소문자 대 문자 사용 - 세그먼트 제목의 모든 단어는 4자 미만의 아티클, 결합 및 전치사만 제외하고 대문자로 표시되어야 합니다.
  • 짧고 포커스가 있는 제목 사용 - 세그먼트를 선택할 때 예상되는 콘텐츠 유형에 중점을 두고 제목을 짧게 유지합니다.

다시 말하지만, 지정된 세그먼트에서 텍스트와 아이콘을 모두 혼합할 수 없으며 단일 Segmented Control에서 아이콘과 텍스트를 혼합하지 않아야 합니다.

세그먼트 컨트롤 및 스토리보드

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

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

  2. 도구 상자에서 세그먼트 컨트롤을 끌어 보기에 놓습니다.

    세그먼트 컨트롤

  3. 속성 패드의 위젯 탭에서 스타일 및 상태와 같은 세그먼트 컨트롤의 여러 속성을 조정할 수 있습니다.

    위젯 탭

  4. 세그먼트 필드를 사용하여 컨트롤러의 세그먼트 수를 제어합니다.

  5. 세그먼트 드롭다운에서 지정된 세그먼트를 선택하여 제목 또는 이미지와 같은 개별 속성을 조정하고 컨트롤이 표시될 때 지정된 세그먼트가 사용 또는 선택되었는지 여부를 제어합니다.

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

    이름 할당

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

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

분할된 컨트롤 작업

위에서 설명한 대로 s Segmented Control은 각각 아이콘 또는 텍스트를 포함할 수 있는 선형 요소 집합을 제공하며 사용자에게 관련 선택 사항 집합을 제공하는 데 사용됩니다.

Xamarin.tvOS 앱에서 Segmented Controls를 사용할 수 있는 여러 가지 방법이 있습니다.

이름 및 이벤트로 노출됨

인터페이스 디자이너에서 세그먼트 컨트롤을 만들고 명명된 컨트롤 및 이벤트로 노출한 경우 다음 코드를 사용하여 세그먼트 변경에 응답할 수 있습니다.

partial void PlayerCountChanged (Foundation.NSObject sender) {

    // Take action based on the number of players selected
    switch(PlayerCount.SelectedSegment) {
    case 0:
        // Do something if the segment is selected
        ...
        break;
    case 1:
        // Do something if the segment is selected
        ...
        break;
    case 2:
        // Do something if the segment is selected
        ...
        break;
    }
}

위의 예제의 경우 세그먼트 컨트롤이 이름 및 이벤트 동작으로 PlayerCountPlayerCountChanged 노출되었습니다. 작업 및 콘센트 작업에 대한 자세한 내용은 Hello, tvOS 빠른 시작 가이드의 콘센트 및 작업 섹션을 사용하여 코드 작성 섹션을 참조하세요.

이 속성은 SelectedSegment 현재 선택한 세그먼트를 0 기반 인덱스로 가져오거나 설정합니다. 따라서 세그먼트가 5개인 경우 첫 번째 세그먼트의 인덱스는 0이고 마지막 인덱스는 4입니다.

세그먼트 수정

언제든지 세그먼트 컨트롤의 수와 내용을 모두 수정할 수 있습니다. 다음 코드를 사용하여 새 아이콘 세그먼트를 삽입합니다.

// Icon Segment
SegmentedControl.InsertSegment(UIImage.FromFile("icon.png"), 0, true);

// Text Segment
SegmentedControl.InsertSegment("New Segment", 0, true);

두 번째 매개 변수는 0 기반 인덱스를 사용하여 세그먼트를 삽입할 위치를 정의합니다. 마지막 매개 변수가 true 있으면 삽입에 애니메이션이 적용됩니다.

지정된 세그먼트를 제거하려면 다음을 사용합니다.

SegmentedControl.RemoveSegmentAtIndex(0, true);

또는 다음을 수행하여 모든 세그먼트를 제거합니다.

SegmentedControl.RemoveAllSegments();

다시 말하지만 마지막 매개 변수가 있으면 true제거에 애니메이션이 적용됩니다. 이 NumberOfSegments 속성을 사용하여 현재 세그먼트 수를 반환합니다.

지정된 세그먼트의 제목 또는 아이콘 을 얻으려면 다음을 사용합니다.

// Get title
var title = SegmentedControl.TitleAt(0);

// Get icon
var icon = SegmentedControl.ImageAt(0);

제목 또는 아이콘을 변경하려면 다음을 사용합니다.

// Set title
SegmentedControl.SetTitle("New Title", 0);

// Set icon
SegmentedControl.SetImage(UIImage.FromFile("icon.png"), 0);

지정된 세그먼트 가 사용하도록 설정되어 있는지 확인하려면 다음을 사용합니다.

if (SegmentedControl.IsEnabled(0)) {
    // Do something
    ...
}

지정된 세그먼트를 사용하거나 사용하지 않도록 설정하려면 다음을 사용합니다.

SegmentedControl.SetEnabled(false, 0);

분할된 컨트롤의 모양 수정

다음 코드를 사용하여 지정된 세그먼트의 배경을 이미지로 변경할 수 있습니다.

SegmentedControl.SetBackgroundImage (UIImage.FromFile("background.png"), UIControlState.Normal, UIBarMetrics.Default);

이미지를 다음과 같이 설정하는 컨트롤의 상태를 지정하는 위치 UIControlState :

  • 보통
  • 강조
  • Disabled
  • 선택한 상태
  • 포커스

다음 UIBarMetrics 으로 사용할 메트릭을 지정합니다.

  • 기본값
  • Compact
  • DefaultPrompt
  • CompactPrompt

또한 다음을 사용하여 세그먼트 간에 구분 기호를 설정할 수 있습니다.

SegmentedControl.SetDividerImage (UIImage.FromFile("divider.png"), UIControlState.Normal, UIControlState.Normal, UIBarMetrics.Default);

여기서 첫 번째는 UIControlState 구분선의 왼쪽에 있는 세그먼트의 상태를 지정하고 두 번째는 UIControlState 오른쪽에 있는 세그먼트의 상태를 지정합니다.

요약

이 문서에서는 Xamarin.tvOS 앱 내에서 Segmented Control을 디자인하고 사용하는 것에 대해 설명했습니다.