전송 위젯을 맞춤설정할 수 있습니다. 색상, 버튼, 텍스트, 썸네일 이미지 스타일 지정 표시할 버튼 유형을 선택할 수 있습니다.
앱 테마 맞춤설정
이 예에서는 맞춤 테마 스타일 Theme.CastVideosTheme
을 만듭니다.
사용자 지정 색상, 소개 오버레이 스타일, 미니 컨트롤러 등의
확장된 컨트롤러 스타일입니다.
<style name="Theme.CastVideosTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Set AppCompat's color theming attrs -->
<item name="colorPrimary">@color/primary</item>
<item name="colorPrimaryDark">@color/primary_dark</item>
<item name="colorAccent">@color/accent</item>
<item name="android:textColorPrimary">@color/primary_text</item>
<item name="android:textColorSecondary">@color/secondary_text</item>
<item name="castIntroOverlayStyle">@style/CustomCastIntroOverlay</item>
<item name="castMiniControllerStyle">@style/CustomCastMiniController</item>
<item name="castExpandedControllerStyle">@style/CustomCastExpandedController</item>
</style>
마지막 세 줄을 사용하면 소개 오버레이, 미니 컨트롤러, 확장 컨트롤러 소개하겠습니다. 다음 섹션에 예시가 나와 있습니다.
전송 버튼 맞춤설정
앱의 테마에 맞춤 mediaRouteTheme
를 추가하려면 다음 안내를 따르세요.
<style name="Theme.CastVideosTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- ... -->
<item name="mediaRouteTheme">@style/CustomMediaRouterTheme</item>
</style>
맞춤 미디어 라우터 테마 선언 및 맞춤
mediaRouteButtonStyle
:
<style name="CustomMediaRouterTheme" parent="Theme.MediaRouter">
<item name="mediaRouteButtonStyle">@style/CustomMediaRouteButtonStyle</item>
</style>
<style name="CustomMediaRouteButtonStyle" parent="Widget.MediaRouter.Light.MediaRouteButton">
<item name="mediaRouteButtonTint">#EEFF41</item>
</style>
setTint
드림
지원 라이브러리 버전이 26.0.0 이상인 경우 를 사용해야 합니다. 고학년 아동
buttonTint
를 사용하세요.
하세요.
소개 오버레이 테마 맞춤설정
이
IntroductoryOverlay
드림
클래스는 앱이 맞춤형에서 재정의할 수 있는 다양한 스타일 속성을 지원합니다.
있습니다. 이 예에서는 두 버튼의 텍스트 모양을 재정의하는 방법을 보여줍니다.
및 제목을 오버레이 위젯 위에 추가합니다.
<style name="CustomCastIntroOverlay" parent="CastIntroOverlay">
<item name="castButtonTextAppearance">@style/TextAppearance.CustomCastIntroOverlay.Button</item>
<item name="castTitleTextAppearance">@style/TextAppearance.CustomCastIntroOverlay.Title</item>
</style>
<style name="TextAppearance.CustomCastIntroOverlay.Button" parent="android:style/TextAppearance">
<item name="android:textColor">#FFFFFF</item>
</style>
<style name="TextAppearance.CustomCastIntroOverlay.Title"parent="android:style/TextAppearance.Large">
<item name="android:textColor">#FFFFFF</item>
</style>
미니 컨트롤러 맞춤설정
테마 맞춤설정하기
이
MiniControllerFragment
드림
클래스는 앱이 맞춤형에서 재정의할 수 있는 다양한 스타일 속성을 지원합니다.
있습니다. 이 예에서는 미리보기 이미지 표시를 사용 설정하는 방법을 보여줍니다.
캡션과 자막 둘 다의 텍스트 모양을 재정의하고,
버튼을 사용자 지정할 수 있습니다.
<style name="CustomCastMiniController" parent="CastMiniController">
<item name="castShowImageThumbnail">true</item>
<item name="castTitleTextAppearance">@style/TextAppearance.AppCompat.Subhead</item>
<item name="castSubtitleTextAppearance">@style/TextAppearance.AppCompat.Caption</item>
<item name="castBackground">#FFFFFF</item>
<item name="castProgressBarColor">#FFFFFF</item>
<item name="castPlayButtonDrawable">@drawable/cast_ic_mini_controller_play</item>
<item name="castPauseButtonDrawable">@drawable/cast_ic_mini_controller_pause</item>
<item name="castStopButtonDrawable">@drawable/cast_ic_mini_controller_stop</item>
<item name="castLargePlayButtonDrawable">@drawable/cast_ic_mini_controller_play_large</item>
<item name="castLargePauseButtonDrawable">@drawable/cast_ic_mini_controller_pause_large</item>
<item name="castLargeStopButtonDrawable">@drawable/cast_ic_mini_controller_stop_large</item>
<item name="castSkipPreviousButtonDrawable">@drawable/cast_ic_mini_controller_skip_prev</item>
<item name="castSkipNextButtonDrawable">@drawable/cast_ic_mini_controller_skip_next</item>
<item name="castRewind30ButtonDrawable">@drawable/cast_ic_mini_controller_rewind30</item>
<item name="castForward30ButtonDrawable">@drawable/cast_ic_mini_controller_forward30</item>
<item name="castMuteToggleButtonDrawable">@drawable/cast_ic_mini_controller_mute</item>
<item name="castClosedCaptionsButtonDrawable">@drawable/cast_ic_mini_controller_closed_caption</item
</style>
버튼 선택
MiniControllerFragment
에는 앨범 아트를 표시할 수 있는 슬롯이 3개 있습니다.
앨범아트가 채워지지 않은 경우 버튼 2개 또는 컨트롤 버튼 3개가 표시됩니다.
SLOT SLOT SLOT
1 2 3
기본적으로 프래그먼트는 재생/일시중지 전환 버튼을 표시합니다. 개발자는
castControlButtons
속성을 사용하여 표시할 버튼을 재정의합니다.
지원되는 컨트롤 버튼은 다음과 같이 정의됩니다.
ID 리소스:
버튼 유형 | 설명 |
---|---|
@id/cast_button_type_empty |
이 슬롯에 버튼을 배치하지 마세요. |
@id/cast_button_type_custom |
맞춤 버튼 |
@id/cast_button_type_play_pause_toggle |
재생과 일시중지 간에 전환합니다. |
@id/cast_button_type_skip_previous |
대기열의 이전 항목으로 건너뜁니다. |
@id/cast_button_type_skip_next |
대기열의 다음 항목으로 건너뜁니다. |
@id/cast_button_type_rewind_30_seconds |
재생을 30초 되감습니다. |
@id/cast_button_type_forward_30_seconds |
재생을 30초 앞으로 건너뜁니다. |
@id/cast_button_type_mute_toggle |
수신자 음소거 및 음소거 해제 |
@id/cast_button_type_closed_caption |
대화상자를 열어 텍스트 및 오디오 트랙을 선택합니다. |
이것은 앨범 아트, 재생/일시중지 전환 버튼, 그리고 왼쪽에서 오른쪽으로 이 순서대로 앞으로 건너뛰기 버튼이 있습니다.
<array name="cast_mini_controller_control_buttons">
<item>@id/cast_button_type_empty</item>
<item>@id/cast_button_type_play_pause_toggle</item>
<item>@id/cast_button_type_forward_30_seconds</item>
</array>
...
<fragment
android:id="@+id/cast_mini_controller"
...
app:castControlButtons="@array/cast_mini_controller_control_buttons"
class="com.google.android.gms.cast.framework.media.widget.MiniControllerFragment">
경고: 이 배열에는 정확히 3개의 항목이 포함되어야 하며, 그렇지 않으면 런타임
예외가 발생합니다. 슬롯에 버튼을 표시하지 않으려면
@id/cast_button_type_empty
맞춤검색 버튼 추가
MiniControllerFragment
는 맞춤 컨트롤 버튼 추가를 지원합니다.
'좋아요'와 같이 SDK에서 제공하지 않는 버튼을 클릭합니다. 단계는 다음과 같습니다.
다음을 사용하여 맞춤 버튼을 포함할 슬롯을 지정합니다.
@id/cast_button_type_custom
드림MiniControllerFragment
의castControlButtons
속성에 있습니다.하위 클래스 구현
UIController
UIController
에는 상태가 다음과 같을 때 SDK에서 호출하는 메서드가 포함됩니다. 전송 세션 또는 미디어 세션 변경사항의 통계나 주요한 변경사항을 측정할 수 있습니다.UIController
의 서브클래스 을(를)ImageView
매개변수 중 하나로 사용하고 필요에 따라 상태를 업데이트할 수 있습니다.서브클래스
MiniControllerFragment
, 그런 다음 재정의onCreateView
및 통화getButtonImageViewAt(int)
다음을 얻으세요.ImageView
맞춤 버튼을 만들 수 있습니다. 그런 다음bindViewToUIController(View, UIController)
드림 보기를 맞춤UIController
자세한 내용은
MediaIntentReceiver
드림 맞춤 작업 추가를 참고하세요. 맞춤 버튼에서 삭제할 수 있습니다.다음은 슬롯 2에 있는 버튼을
UIController
드림 호출된MyCustomUIController
:
// arrays.xml
<array name="cast_expanded_controller_control_buttons">
<item>@id/cast_button_type_empty</item>
<item>@id/cast_button_type_rewind_30_seconds</item>
<item>@id/cast_button_type_custom</item>
<item>@id/cast_button_type_empty</item>
</array>
<ph type="x-smartling-placeholder">// MyCustomUIController.kt class MyCustomUIController(private val mView: View) : UIController() { override fun onMediaStatusUpdated() { // Update the state of mView based on the latest the media status. ... mView.visibility = View.INVISIBLE ... } } // MyMiniControllerFragment.kt class MyMiniControllerFragment : MiniControllerFragment() { override fun onCreateView( inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle? ): View? { super.onCreateView(inflater, container, savedInstanceState) val customButtonView = getButtonImageViewAt(2) val myCustomUiController = MyCustomUIController(customButtonView) uiMediaController.bindViewToUIController(customButtonView, myCustomUiController) ... } }
// MyCustomUIController.java class MyCustomUIController extends UIController { private final View mView; public MyCustomUIController(View view) { mView = view; } @Override public onMediaStatusUpdated() { // Update the state of mView based on the latest the media status. ... mView.setVisibility(View.INVISIBLE); ... } } // MyMiniControllerFragment.java class MyMiniControllerFragment extends MiniControllerFragment { @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { super.onCreateView(inflater, container, savedInstanceState); ImageView customButtonView = getButtonImageViewAt(2); MyCustomUIController myCustomUiController = new MyCustomUIController(customButtonView); getUIMediaController().bindViewToUIController(customButtonView, myCustomUiController); ... } }
확장된 컨트롤러 맞춤설정
테마 맞춤설정하기
확장된 컨트롤러의 활동이 어두운 테마 툴바를 사용하는 경우 은 밝은 텍스트와 아이콘 색상을 사용하도록 툴바에 테마를 설정할 수 있습니다.
<style name="Theme.CastVideosTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="castExpandedControllerToolbarStyle">
@style/ThemeOverlay.AppCompat.Dark.ActionBar
</item>
</style>
버튼을 그리는 데 사용할 이미지를 직접 지정할 수도 있습니다. 확장 컨트롤러:
<style name="CustomCastExpandedController" parent="CastExpandedController">
<item name="castButtonColor">@null</item>
<item name="castPlayButtonDrawable">@drawable/cast_ic_expanded_controller_play</item>
<item name="castPauseButtonDrawable">@drawable/cast_ic_expanded_controller_pause</item>
<item name="castStopButtonDrawable">@drawable/cast_ic_expanded_controller_stop</item>
<item name="castSkipPreviousButtonDrawable">@drawable/cast_ic_expanded_controller_skip_previous</item>
<item name="castSkipNextButtonDrawable">@drawable/cast_ic_expanded_controller_skip_next</item>
<item name="castRewind30ButtonDrawable">@drawable/cast_ic_expanded_controller_rewind30</item>
<item name="castForward30ButtonDrawable">@drawable/cast_ic_expanded_controller_forward30</item>
</style>
버튼 선택
확장된 컨트롤러의 활동에는 컨트롤 버튼을 표시하는 슬롯이 5개 있습니다. 중간 슬롯에 항상 재생/일시중지 전환 버튼이 표시되며, 구성이 불가능합니다. 나머지 4개 슬롯은 발신기 앱에서 왼쪽에서 오른쪽으로 구성할 수 있습니다.
SLOT SLOT PLAY/PAUSE SLOT SLOT
1 2 BUTTON 3 4
기본적으로 활동은 자막 버튼을 표시하며
이전 항목 버튼, 다음 항목으로 건너뛰기 버튼, 음소거 전환 버튼
이 네 개의 슬롯에 있는 버튼을 클릭합니다. 개발자는
표시할 버튼을 재정의하는 castControlButtons
속성
지정할 수 있습니다 지원되는 컨트롤 버튼 목록은 다음과 같이 정의됩니다.
ID 리소스는
미니 컨트롤러 버튼의 버튼 유형을 지원합니다.
이 예에서는 두 번째 슬롯에 되감기 버튼인 건너뛰기 버튼을 앞으로 버튼을 배치하고 첫 번째와 마지막 슬롯은 비워 둡니다.
// arrays.xml
<array name="cast_expanded_controller_control_buttons">
<item>@id/cast_button_type_empty</item>
<item>@id/cast_button_type_rewind_30_seconds</item>
<item>@id/cast_button_type_forward_30_seconds</item>
<item>@id/cast_button_type_empty</item>
</array>
...
// styles.xml
<style name="Theme.MyTheme">
<item name="castExpandedControllerStyle">
@style/CustomCastExpandedController
</item>
</style>
...
<style name="CustomCastExpandedController" parent="CastExpandedController">
<item name="castControlButtons">
@array/cast_expanded_controller_control_buttons
</item>
</style>
배열에는 정확히 4개의 항목이 포함되어야 합니다. 그렇지 않으면 런타임 예외가 발생합니다.
발생합니다. 슬롯에 버튼을 표시하지 않으려면
@id/cast_button_type_empty
CastContext
는 수명 주기를 관리하고
보여드리겠습니다.
맞춤검색 버튼 추가
ExpandedControllerActivity
는 SDK에서 제공하지 않는 맞춤 컨트롤 버튼 추가를 지원합니다.
예: '좋아요' 버튼을 클릭합니다. 단계는 다음과 같습니다.
다음을 사용하여 맞춤 버튼을 포함할 슬롯을 지정합니다.
@id/cast_button_type_custom
드림ExpandedControllerActivity
의castControlButtons
속성에 있습니다. 그런 다음getButtonImageViewAt(int)
드림 얻는 방법은ImageView
맞춤 버튼을 만들 수 있습니다.하위 클래스 구현
UIController
UIController
에는 상태가 다음과 같을 때 SDK에서 호출하는 메서드가 포함됩니다. 전송 세션 또는 미디어 세션 변경사항의 통계나 주요한 변경사항을 측정할 수 있습니다. 서브클래스는UIController
는ImageView
를 매개변수 중 하나로 사용해야 합니다. 필요에 따라 상태를 업데이트할 수 있습니다ExtendedControllerActivity를 서브클래스로 만들고 이를 재정의합니다.
onCreate
드림 및 호출getButtonImageViewAt(int)
버튼의 뷰 객체를 가져옵니다. 그런 다음bindViewToUIController(View, UIController)
드림 뷰를 맞춤UIController
와 연결합니다.자세한 내용은
MediaIntentReceiver
드림 맞춤 작업 추가에서 확인하세요. 맞춤 버튼의 작업을 처리하는 방법을 알아보세요.
다음은 슬롯 2에 있는 버튼을
UIController
가 MyCustomUIController
를 호출했습니다.
// arrays.xml
<array name="cast_expanded_controller_control_buttons">
<item>@id/cast_button_type_empty</item>
<item>@id/cast_button_type_rewind_30_seconds</item>
<item>@id/cast_button_type_custom</item>
<item>@id/cast_button_type_empty</item>
</array>
<ph type="x-smartling-placeholder">// MyCustomUIController.kt class MyCustomUIController(private val mView: View) : UIController() { override fun onMediaStatusUpdated() { // Update the state of mView based on the latest the media status. ... mView.visibility = View.INVISIBLE ... } } // MyExpandedControllerActivity.kt internal class MyExpandedControllerActivity : ExpandedControllerActivity() { public override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) val customButtonView = getButtonImageViewAt(2) val myCustomUiController = MyCustomUIController(customButtonView) uiMediaController.bindViewToUIController(customButtonView, myCustomUiController) ... } }
// MyCustomUIController.java class MyCustomUIController extends UIController { private final View mView; public MyCustomUIController(View view) { mView = view; } @Override public onMediaStatusUpdated() { // Update the state of mView based on the latest the media status. ... mView.setVisibility(View.INVISIBLE); ... } } // MyExpandedControllerActivity.java class MyExpandedControllerActivity extends ExpandedControllerActivity { @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); ImageView customButtonView = getButtonImageViewAt(2); MyCustomUIController myCustomUiController = new MyCustomUIController(customButtonView); getUIMediaController().bindViewToUIController(customButtonView, myCustomUiController); ... } }