หน้านี้ได้รับการแปลโดย Cloud Translation API

ปรับแต่ง UI ผู้ส่งของ Android

คุณปรับแต่งวิดเจ็ตการแคสต์ ได้โดยการตั้งค่าสี จัดรูปแบบปุ่ม ข้อความ และภาพขนาดย่อ รวมถึงเลือกประเภทปุ่มที่จะแสดง

ปรับแต่งธีมแอป

ตัวอย่างนี้สร้างรูปแบบธีมที่กำหนดเอง 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>

3 บรรทัดสุดท้ายด้านบนช่วยให้คุณกำหนดสไตล์เฉพาะสำหรับ โอเวอร์เลย์แนะนำ ตัวควบคุมมินิ และตัวควบคุมแบบขยาย ซึ่งเป็นส่วนหนึ่งของธีมนี้ได้ ตัวอย่างจะอยู่ในส่วนต่างๆ ที่ตามมา

ปรับแต่งปุ่มแคสต์

วิธีเพิ่ม mediaRouteTheme ที่กำหนดเองลงในธีมของแอป

<style name="Theme.CastVideosTheme" parent="Theme.AppCompat.Light.NoActionBar">
  <!-- ... -->
  <item name="mediaRouteTheme">@style/CustomMediaRouterTheme</item>
</style>

ประกาศธีม Media Router ที่กำหนดเองและประกาศธีมที่กำหนดเอง 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

โดยค่าเริ่มต้น Fragment จะแสดงปุ่มสลับเล่น/หยุดชั่วคราว นักพัฒนาแอปสามารถใช้แอตทริบิวต์ 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 ในแอตทริบิวต์ castControlButtons ของ MiniControllerFragment
ใช้คลาสย่อยของ 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>

Kotlin

// 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)
        ...
    }
}

Java

// 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 ปุ่มข้าม ไปข้างหน้าในช่องที่ 3 และปล่อยให้ช่องแรกและช่องสุดท้ายว่างไว้

// 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 สำหรับปุ่มที่กำหนดเองนั้นได้
ใช้คลาสย่อยของ UIController UIController มีเมธอดที่ SDK เรียกใช้เมื่อสถานะ ของเซสชัน Cast หรือเซสชันสื่อเปลี่ยนแปลง คลาสย่อยของ 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>

Kotlin

// 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)
        ...
    }
}

Java

// 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);
        ...
    }
}

ผสานรวมการแคสต์

การทดสอบ UI อัตโนมัติ