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 các nút, văn bản và hình thu nhỏ giao diện và bằng cách chọn loại nút 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, tay điều khiển mini 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 dành riêng cho lớp phủ giới thiệu, tay điều khiển thu nhỏ và bộ điều khiển mở rộng như một phần của chủ đề này. Ví dụ được bao gồm trong các phần tiếp theo.

Tuỳ chỉnh nút Truyền

Cách thêm một 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 tuỳ chỉnh của Bộ định tuyến nội dung đa phương tiện và khai báo một giao diện tuỳ chỉnh 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 nên được sử dụng nếu phiên bản thư viện hỗ trợ mới hơn 26.0.0. Cho người lớn tuổi hơn các phiên bản thư viện hỗ trợ, vui lòng sử dụng buttonTint thay thế.

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

Chiến lược phát hành đĩa đơn IntroductoryOverlay hỗ trợ nhiều thuộc tính kiểu mà ứng dụng của bạn có thể ghi đè trong một thuộc tính tuỳ chỉnh chủ đề. Ví dụ này cho biết cách ghi đè hình thức văn bản của cả hai 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 tay điều khiển thu nhỏ

Tùy chỉnh chủ đề

Chiến lược phát hành đĩa đơn MiniControllerFragment hỗ trợ nhiều thuộc tính kiểu mà ứng dụng của bạn có thể ghi đè trong một thuộc tính tuỳ chỉnh chủ đề. Ví dụ này cho biết cách bật chế độ hiển thị hình thu nhỏ để ghi đè hình thức văn bản của cả tiêu đề phụ và phụ đề, đặt màu sắc 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ó ba ô có thể hiển thị ảnh bìa đĩa nhạc và hai nút hoặc ba nút điều khiển nếu ảnh bìa đĩa nhạc không được điền sẵn.

SLOT  SLOT  SLOT
  1     2     3

Theo mặc định, mảnh này sẽ hiện nút bật/tắt phát/tạm dừng. Nhà phát triển có thể sử dụng thuộc tính castControlButtons để ghi đè những nút sẽ hiển thị. Các nút điều khiển được hỗ trợ được định nghĩa là Tài nguyên về mã nhận dạng:

Loại nút	Mô tả
`@id/cast_button_type_empty`	Đừng đặt nút trong vùng này
`@id/cast_button_type_custom`	Nút tuỳ chỉnh
`@id/cast_button_type_play_pause_toggle`	Chuyển đổi giữa chế độ phát và tạm dừng
`@id/cast_button_type_skip_previous`	Chuyển đến 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 so với thời điểm phát
`@id/cast_button_type_forward_30_seconds`	Tua đi 30 giây so với nội dung phát
`@id/cast_button_type_mute_toggle`	Tắt tiếng và bật tiếng bộ thu
`@id/cast_button_type_closed_caption`	Mở hộp thoại để chọn bản âm thanh và văn bản

Dưới đây là một ví dụ sẽ 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 chính xác 3 mục, nếu không thì thời gian chạy hệ thống sẽ gửi ngoại lệ. Nếu bạn không muốn hiển thị nút trong một ô, hãy sử dụng @id/cast_button_type_empty.

Thêm nút tuỳ chỉnh

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

Chỉ định một vùng 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 lớp con của UIController. UIController chứa các phương thức mà SDK gọi khi trạng thái về các thay đổi trong phiên truyền hoặc phiên đa phương tiện. Lớp con của UIController sẽ mất một ImageView làm một trong các tham số và cập nhật trạng thái của tham số đó nếu cần.
Lớp con MiniControllerFragment, sau đó ghi đè onCreateView và gọi getButtonImageViewAt(int) để tải ImageView cho nút tuỳ chỉnh đó. Sau đó gọi bindViewToUIController(View, UIController) để liên kết chế độ xem với các từ khoá tùy chỉnh UIController.
Xem MediaIntentReceiver tại phần Thêm Thao tác tuỳ chỉnh để biết cách xử lý thao tác từ nút tuỳ chỉnh.

Sau đây là ví dụ về cách liên kết một nút tại vị trí 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 bộ điều khiển mở rộng

Tùy chỉnh chủ đề

Nếu chế độ Hoạt động của tay điều khiển mở rộng sử dụng thanh công 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 để 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

Phần Hoạt động của trình điều khiển mở rộng có 5 ô để hiển thị các nút điều khiển. Ở 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 người còn lại vị trí có thể định cấu hình được, từ trái sang phải, bằng ứng dụng của người gửi.

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

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

Dưới đây là một ví dụ đặt nút tua lại ở vị trí thứ hai, nút bỏ qua nút tiến lên ở vị trí thứ ba và để trống vị trí đầu tiên và vị trí 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ì ngoại lệ thời gian chạy sẽ gửi. Nếu bạn không muốn hiển thị nút trong một ô, hãy sử dụng @id/cast_button_type_empty. CastContext có thể quản lý vòng đời và phần trình bày của hoạt động này.

Thêm nút tuỳ chỉnh

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

Chỉ định một vùng 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ể sử dụng getButtonImageViewAt(int) để có được ImageView cho nút tuỳ chỉnh đó.
Triển khai lớp con của UIController. UIController chứa các phương thức mà SDK gọi khi trạng thái về các thay đổi trong phiên truyền hoặc phiên đa phương tiện. Lớp con của bạn 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 nếu cần.
Lớp con AdditionalControllerActivity, sau đó ghi đè onCreate và gọi getButtonImageViewAt(int) để lấy đối tượng thành phần hiển thị của nút. Sau đó gọi bindViewToUIController(View, UIController) để liên kết chế độ xem với UIController tuỳ chỉnh của bạn.
Xem MediaIntentReceiver tại phần Thêm Thao tác tuỳ chỉnh để biết cách xử lý thao tác từ nút tuỳ chỉnh.

Sau đây là ví dụ về cách liên kết một nút tại vị trí 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