색상을 설정하고 버튼, 텍스트, 썸네일 이미지의 스타일을 지정하고 표시할 버튼 유형을 선택하여 전송 위젯을 맞춤설정할 수 있습니다.
위젯 테마 맞춤설정
Cast 프레임워크 위젯은 UIKit의 Apple UIAppearance 프로토콜을 지원하여 버튼 위치나 테두리와 같이 앱 전체에서 위젯의 모양을 변경합니다. 기존 앱 스타일과 일치하도록 Cast 프레임워크 위젯의 스타일을 지정하려면 이 프로토콜을 사용하세요.
전송 버튼의 예
GCKUICastButton.appearance().tintColor = UIColor.gray
[GCKUICastButton appearance].tintColor = [UIColor grayColor];
위젯 직접 맞춤설정
슈퍼클래스의 속성을 사용하여 위젯을 직접 맞춤설정합니다. 예를 들어 일반적으로 tintColor:
속성을 사용하여 GCKUICastButton
색상을 맞춤설정합니다.
전송 버튼의 예
castButton.tintColor = UIColor.gray
castButton.tintColor = [UIColor grayColor];
컨트롤러 버튼 선택
확장된 컨트롤러 클래스(GCKUIExpandedMediaControlsViewController
)와 미니 컨트롤러 클래스(GCKUIMiniMediaControlsViewController
) 모두 버튼 모음을 포함하며 클라이언트는 이러한 막대에 어떤 버튼을 표시할지 구성할 수 있습니다. 이는 GCKUIMediaButtonBarProtocol
를 준수하는 두 클래스로 실행됩니다.
미니 컨트롤러 바에는 다음과 같이 구성 가능한 버튼 슬롯이 3개 있습니다.
SLOT SLOT SLOT
1 2 3
확장된 컨트롤러 막대에는 막대 중간에 영구 재생/일시중지 전환 버튼과 구성 가능한 4개의 슬롯이 있습니다.
SLOT SLOT PLAY/PAUSE SLOT SLOT
1 2 BUTTON 3 4
앱은 GCKCastContext
의 -[defaultExpandedMediaControlsViewController]
속성을 사용하여 확장된 컨트롤러의 참조를 가져올 수 있으며 -[createMiniMediaControlsViewController]
를 사용하여 미니 컨트롤러를 만들 수 있습니다.
각 슬롯은 프레임워크 버튼 또는 맞춤 버튼을 포함하거나 비어 있을 수 있습니다. 프레임워크 컨트롤 버튼 목록은 다음과 같이 정의됩니다.
버튼 유형 | 설명 |
---|---|
GCKUIMediaButtonTypeNone |
이 슬롯에 버튼을 배치하지 마세요. |
GCKUIMediaButtonTypeCustom |
맞춤 버튼 |
GCKUIMediaButtonTypePlayPauseToggle |
재생 및 일시중지 간 전환 |
GCKUIMediaButtonTypeSkipPrevious |
대기열의 이전 항목으로 건너뛰기 |
GCKUIMediaButtonTypeSkipNext |
대기열의 다음 항목으로 건너뛰기 |
GCKUIMediaButtonTypeRewind30Seconds |
재생을 30초 되감습니다. |
GCKUIMediaButtonTypeForward30Seconds |
재생을 30초 앞으로 건너뜁니다. |
GCKUIMediaButtonTypeMuteToggle |
원격 웹 수신기 음소거 및 음소거 해제 |
GCKUIMediaButtonTypeClosedCaptions |
텍스트 및 오디오 트랙을 선택하는 대화상자가 열립니다. |
각 버튼의 기능에 관한 자세한 설명은 GCKUIMediaButtonBarProtocol.h
에서 확인할 수 있습니다.
GCKUIMediaButtonBarProtocol
에서 메서드를 사용하여 다음과 같이 버튼을 추가합니다.
프레임워크 버튼을 바에 추가하려면
-[setButtonType:atIndex:]
호출만 필요합니다.맞춤 버튼을 바에 추가하려면 앱에서
buttonType
가GCKUIMediaButtonTypeCustom
로 설정된-[setButtonType:atIndex:]
를 호출한 다음 동일한 색인이 있는UIButton
을 전달하는-[setCustomButton:atIndex:]
를 호출해야 합니다.
iOS 앱에 맞춤 스타일 적용
Cast iOS SDK를 사용하면 iOS 발신기에서 기본 위젯 UI 요소의 글꼴, 색상, 이미지의 스타일을 지정하여 앱의 나머지 부분과 일치하는 디자인과 분위기를 제공할 수 있습니다.
다음 섹션에서는 Cast 위젯 또는 위젯 그룹에 맞춤 스타일을 적용하는 방법을 보여줍니다.
위젯의 UI 요소에 스타일 적용
이 절차에서는 앱 미니 컨트롤러의 본문 텍스트 색상을 빨간색으로 설정하는 예를 사용합니다.
뷰 및 스타일 표에서 스타일을 지정할 위젯의 뷰 이름 또는 위젯 그룹을 찾습니다. 그룹 이름은 ▼로 표시됩니다.
예:
miniController
위젯 뷰이 표에 나열된 해당 스타일 클래스의 속성 목록에서 변경하려는 속성의 이름을 찾습니다.
예:
bodyTextColor
는GCKUIStyleAttributesMiniController
클래스의 속성입니다.코드를 작성합니다.
예:
// Get the shared instance of GCKUIStyle let castStyle = GCKUIStyle.sharedInstance() // Set the property of the desired cast widget. castStyle.castViews.mediaControl.miniController.bodyTextColor = UIColor.red // Refresh all currently visible views with the assigned styles. castStyle.apply()
// Get the shared instance of GCKUIStyle. GCKUIStyle *castStyle = [GCKUIStyle sharedInstance]; // Set the property of the desired cast widget. castStyle.castViews.mediaControl.miniController.bodyTextColor = [UIColor redColor]; // Refresh all currently visible views with the assigned styles. [castStyle applyStyle];
이 패턴을 사용하여 위젯의 UI 요소에 스타일을 적용합니다.
뷰 및 스타일 표
이 표에는 스타일을 적용할 수 있는 위젯 뷰 7개와 그룹 3개 (▼로 표시됨)가 나와 있습니다.
보기 이름 | 유형 | 스타일 클래스 |
---|---|---|
▼ castViews |
그룹 | GCKUIStyleAttributesCastViews |
▼ deviceControl |
그룹 | GCKUIStyleAttributesDeviceControl |
deviceChooser |
위젯 | GCKUIStyleAttributesDeviceChooser |
noDevicesAvailableController |
위젯 | GCKUIStyleAttributesNoDevicesAvailableController |
▼ connectionController |
그룹 | GCKUIStyleAttributesConnectionController |
navigation |
위젯 | GCKUIStyleAttributesConnectionNavigation |
toolbar |
위젯 | GCKUIStyleAttributesConnectionToolbar |
▼ mediaControl |
그룹 | GCKUIStyleAttributesMediaControl |
miniController |
위젯 | GCKUIStyleAttributesMiniController |
expandedController |
위젯 | GCKUIStyleAttributesExpandedController |
trackSelector |
위젯 | GCKUIStyleAttributesTrackSelector |
instructions |
위젯 | GCKUIStyleAttributesInstructions |
스타일 계층 구조
GCKUIStyle
싱글톤은 모든 스타일 설정의 API 진입점입니다. 아래 그림과 같이 스타일 계층 구조의 루트인 castViews
속성이 있습니다. 이 다이어그램은 이전 표에 나와 있는 동일한 뷰와 그룹을 보는 다른 방법입니다.
개별 위젯이나 위젯 그룹에 스타일을 적용할 수 있습니다. 스타일 계층 구조에는 CastViews, deviceControl, mediaControl 등 세 가지 위젯 그룹이 있습니다. 각 그룹의 직사각형은 위젯을 둘러싸고 있습니다. 그룹에 스타일을 적용하면 해당 그룹의 모든 위젯에 스타일이 적용됩니다.
예를 들어 castViews
그룹을 사용하면 모든 위젯에 스타일을 적용할 수 있고 deviceControl
그룹을 사용하면 세 개의 기기 제어 위젯에만 스타일을 적용할 수 있습니다. instructions
위젯이 어떤 그룹에도 속해 있지 않습니다.
castViews | ||||||||||
deviceControl | mediaControl | |||||||||
안내 |
기기 선택기 |
noDevicesAvailable 화면 |
연결 컨트롤러 |
Mini 컨트롤러 |
펼쳐짐 컨트롤러 |
트랙 선택기 |
||||
탐색 / 툴바 |
||||||||||
각주: 이 다이어그램에서 두 줄에 표시되는 위젯 이름은 공백 없이 한 줄에 한 단어로 코드로 작성해야 합니다. 예를 들어 device Chooser
는 deviceChooser
로 작성해야 합니다. 마우스를 이미지 위로 가져가면 확대됩니다.