Trang này được dịch bởi Cloud Translation API.

Tuỳ chỉnh giao diện người dùng của Android Sender

Bạn có thể tuỳ chỉnh tiện ích Truyền bằng cách đặt màu sắc, tạo kiểu cho nút, văn bản và hình thu nhỏ cũng như chọn các loại nút sẽ hiển thị.

Tuỳ chỉnh giao diện của ứng dụng

Ví dụ này sẽ tạo một kiểu giao diện tuỳ chỉnh Theme.CastVideosTheme có thể xác định màu tuỳ chỉnh, kiểu lớp phủ giới thiệu, kiểu tay điều khiển thu nhỏ và kiểu tay điều khiển mở rộng.

<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>

Ba dòng cuối cùng ở trên cho phép bạn xác định các kiểu cụ thể cho lớp phủ giới thiệu, bộ điều khiển mini và bộ điều khiển mở rộng như một phần của giao diện này. Chúng tôi cũng cung cấp ví dụ trong các phần tiếp theo.

Nút tuỳ chỉnh truyền

Cách thêm mediaRouteTheme tuỳ chỉnh vào Giao diện của ứng dụng:

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

Khai báo giao diện Bộ định tuyến nội dung đa phương tiện tuỳ chỉnh và khai báo mediaRouteButtonStyle tuỳ chỉnh:

<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>

Bạn nên sử dụng setTint nếu phiên bản thư viện hỗ trợ mới hơn 26.0.0. Đối với các phiên bản thư viện hỗ trợ cũ, vui lòng sử dụng buttonTint.

Tuỳ chỉnh giao diện lớp phủ giới thiệu

Lớp IntroductoryOverlay hỗ trợ nhiều thuộc tính kiểu mà ứng dụng của bạn có thể ghi đè trong giao diện tuỳ chỉnh. Ví dụ này cho biết cách ghi đè giao diện văn bản của cả nút và tiêu đề trên tiện ích lớp phủ:

<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>

Tuỳ chỉnh bộ điều khiển thu nhỏ

Tùy chỉnh chủ đề

Lớp MiniControllerFragment hỗ trợ nhiều thuộc tính kiểu mà ứng dụng của bạn có thể ghi đè trong giao diện tuỳ chỉnh. Ví dụ này cho biết cách bật chế độ hiển thị hình thu nhỏ, ghi đè giao diện văn bản của cả tiêu đề phụ và phụ đề chi tiết, đặt màu và tuỳ chỉnh các nút:

<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>

Chọn nút

MiniControllerFragment có 3 khe có thể hiển thị ảnh bìa đĩa nhạc và 2 nút hoặc 3 nút điều khiển nếu ảnh bìa đĩa nhạc chưa được điền.

SLOT  SLOT  SLOT
  1     2     3

Theo mặc định, mảnh này hiển thị nút bật tắt phát/tạm dừng. Nhà phát triển có thể dùng thuộc tính castControlButtons để ghi đè các nút cần hiển thị. Các nút điều khiển được hỗ trợ được xác định là tài nguyên mã nhận dạng:

Loại nút	Nội dung mô tả
`@id/cast_button_type_empty`	Không đặt nút trong vị trí này
`@id/cast_button_type_custom`	Nút tuỳ chỉnh
`@id/cast_button_type_play_pause_toggle`	Chuyển đổi giữa phát và tạm dừng
`@id/cast_button_type_skip_previous`	Chuyển về mục trước trong hàng đợi
`@id/cast_button_type_skip_next`	Chuyển đến mục tiếp theo trong hàng đợi
`@id/cast_button_type_rewind_30_seconds`	Tua lại 30 giây phát lại
`@id/cast_button_type_forward_30_seconds`	Tua đi 30 giây phát lại
`@id/cast_button_type_mute_toggle`	Tắt tiếng và bật tiếng người nhận
`@id/cast_button_type_closed_caption`	Mở hộp thoại để chọn văn bản và bản âm thanh

Dưới đây là ví dụ sử dụng ảnh bìa đĩa nhạc, nút bật tắt phát/tạm dừng và nút tua đi theo thứ tự từ trái sang phải:

<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">

Cảnh báo: Mảng này phải chứa đúng 3 mục, nếu không, hệ thống sẽ gửi một trường hợp ngoại lệ về thời gian chạy. Nếu bạn không muốn hiển thị nút trong một khu vực, hãy sử dụng @id/cast_button_type_empty.

Thêm nút tuỳ chỉnh

MiniControllerFragment hỗ trợ thêm các nút điều khiển tuỳ chỉnh không do SDK cung cấp, chẳng hạn như nút "ngón tay cái lên". Các bước thực hiện:

Chỉ định một khe chứa nút tuỳ chỉnh bằng cách sử dụng @id/cast_button_type_custom trong thuộc tính castControlButtons của MiniControllerFragment.
Triển khai một lớp con của UIController. UIController chứa các phương thức được SDK gọi khi trạng thái của phiên truyền hoặc phiên nội dung nghe nhìn thay đổi. Lớp con của UIController phải lấy ImageView làm một trong các tham số và cập nhật trạng thái của lớp đó nếu cần.
Lớp con MiniControllerFragment, sau đó ghi đè onCreateView và gọi getButtonImageViewAt(int) để lấy ImageView cho nút tuỳ chỉnh đó. Sau đó, hãy gọi bindViewToUIController(View, UIController) để liên kết khung hiển thị đó với UIController tuỳ chỉnh của bạn.
Hãy xem MediaIntentReceiver tại bài viết Thêm thao tác tuỳ chỉnh để biết cách xử lý thao tác từ nút tuỳ chỉnh.

Dưới đây là ví dụ về cách liên kết một nút ở vùng 2 với UIController có tên là 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);
        ...
    }
}

Tuỳ chỉnh tay điều khiển mở rộng

Tùy chỉnh chủ đề

Nếu Hoạt động của tay điều khiển mở rộng sử dụng thanh công cụ có giao diện tối, thì bạn có thể đặt giao diện trên thanh công cụ để sử dụng văn bản sáng và màu biểu tượng sáng:

<style name="Theme.CastVideosTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="castExpandedControllerToolbarStyle">
        @style/ThemeOverlay.AppCompat.Dark.ActionBar
    </item>
</style>

Bạn có thể chỉ định hình ảnh của riêng mình dùng để vẽ các nút trên bộ điều khiển mở rộng:

<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>

Chọn nút

Hoạt động của tay điều khiển mở rộng có 5 ô để hiển thị các nút điều khiển. Vị trí ở giữa luôn hiển thị nút bật tắt phát/tạm dừng và không thể định cấu hình. Bốn khe còn lại có thể được ứng dụng của người gửi định cấu hình từ trái sang phải.

SLOT  SLOT  PLAY/PAUSE  SLOT  SLOT
  1     2     BUTTON      3     4

Theo mặc định, Hoạt động hiển thị nút phụ đề, chuyển đến nút mục trước, chuyển đến nút mục tiếp theo và nút bật/tắt tắt tiếng trong 4 ô này, từ trái sang phải. Nhà phát triển có thể sử dụng thuộc tính castControlButtons để ghi đè nút nào sẽ hiển thị trong khe nào. Danh sách các nút điều khiển được hỗ trợ được xác định là các tài nguyên mã nhận dạng giống với các loại nút dành cho các nút điều khiển thu nhỏ.

Dưới đây là ví dụ về cách đặt nút tua lại ở vị trí thứ hai, nút tua đi ở vị trí thứ ba, đồng thời để trống vị trí đầu tiên và cuối cùng:

// 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>

Mảng này phải chứa đúng 4 mục, nếu không thì hệ thống sẽ gửi một ngoại lệ đối với thời gian chạy. Nếu bạn không muốn hiển thị nút trong một khu vực, hãy sử dụng @id/cast_button_type_empty. CastContext có thể quản lý vòng đời và cách trình bày của hoạt động này.

Thêm nút tuỳ chỉnh

ExpandedControllerActivity hỗ trợ thêm các nút điều khiển tuỳ chỉnh không do SDK cung cấp, chẳng hạn như nút "ngón tay cái lên". Các bước thực hiện:

Chỉ định một khe chứa nút tuỳ chỉnh bằng cách sử dụng @id/cast_button_type_custom trong thuộc tính castControlButtons của ExpandedControllerActivity. Sau đó, bạn có thể dùng getButtonImageViewAt(int) để lấy ImageView cho nút tuỳ chỉnh đó.
Triển khai một lớp con của UIController. UIController chứa các phương thức được SDK gọi khi trạng thái của phiên truyền hoặc phiên phát nội dung đa phương tiện thay đổi. Lớp con của bạn UIController phải lấy ImageView làm một trong các tham số và cập nhật trạng thái của lớp đó nếu cần.
Lớp con ExpandControllerActivity, sau đó ghi đè onCreate rồi gọi getButtonImageViewAt(int) để lấy đối tượng khung hiển thị của nút. Sau đó, hãy gọi bindViewToUIController(View, UIController) để liên kết khung hiển thị với UIController tuỳ chỉnh của bạn.
Hãy xem MediaIntentReceiver tại bài viết Thêm thao tác tuỳ chỉnh để biết cách xử lý thao tác từ nút tuỳ chỉnh.

Dưới đây là ví dụ về cách liên kết một nút ở vùng 2 với UIController có tên là 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);
        ...
    }
}

Tích hợp tính năng Truyền

Tiếp

Tự động hóa các quy trình kiểm tra giao diện người dùng