คุณสามารถปรับแต่งวิดเจ็ตแคสต์ได้ ด้วยการตั้งค่าสี การจัดรูปแบบปุ่ม ข้อความ และภาพขนาดย่อ ลักษณะที่ปรากฏ และการเลือกประเภทของปุ่มที่จะแสดง
ปรับแต่งธีมของแอป
ตัวอย่างนี้สร้างรูปแบบธีมที่กำหนดเอง 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
คลาสรองรับแอตทริบิวต์รูปแบบต่างๆ ที่แอปของคุณสามารถลบล้างได้ใน
ตัวอย่างนี้แสดงวิธีลบล้างลักษณะที่ปรากฏของข้อความทั้ง 2 ปุ่ม
และชื่อเหนือวิดเจ็ตการวางซ้อน
<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/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ในแอตทริบิวต์castControlButtonsของMiniControllerFragmentใช้คลาสย่อยของ
UIControllerUIControllerมีเมธอดที่ 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>
// 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
โดยค่าเริ่มต้น กิจกรรมจะแสดงปุ่มคำบรรยาย
ปุ่มรายการก่อนหน้า ปุ่มข้ามไปยังปุ่มรายการถัดไป และปุ่มเปิด/ปิดปิดเสียง
ในช่องทั้ง 4 ช่องจากซ้ายไปขวา นักพัฒนาแอปสามารถใช้
แอตทริบิวต์ castControlButtons เพื่อลบล้างปุ่มที่จะแสดง
ว่ามีอะไรบ้าง รายการปุ่มควบคุมที่รองรับได้รับการระบุดังนี้
ทรัพยากรรหัสเหมือนกับ
ประเภทปุ่มสำหรับปุ่มตัวควบคุมขนาดเล็ก
นี่คือตัวอย่างที่วางปุ่มกรอกลับในช่องที่ 2 ซึ่งเป็นปุ่มข้าม ไปข้างหน้าในช่องที่สาม และปล่อยช่องแรกและช่องสุดท้ายว่างไว้:
// 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ในแอตทริบิวต์castControlButtonsของExpandedControllerActivityจากนั้นคุณสามารถใช้getButtonImageViewAt(int)เพื่อรับImageViewสำหรับปุ่มที่กำหนดเองนั้นใช้คลาสย่อยของ
UIControllerUIControllerมีเมธอดที่ SDK เรียกใช้เมื่อสถานะ ของเซสชันการแคสต์หรือเซสชันสื่อมีการเปลี่ยนแปลง คลาสย่อยของUIControllerควรใช้ImageViewเป็นหนึ่งในพารามิเตอร์ และอัปเดตสถานะตามความจำเป็นคลาสย่อยExpandedControllerActivity จากนั้นลบล้าง
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>
// 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);
...
}
}