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à giao diện hình thu nhỏ, cũng như chọn các loại nút để hiển thị.

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

Ví dụ này tạo một kiểu giao diện tuỳ chỉnh Theme.CastVideosTheme có thể xác định các màu tuỳ chỉnh, kiểu lớp phủ giới thiệu, kiểu bộ điều khiển thu nhỏ và kiểu bộ đ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 thu nhỏ và bộ điều khiển mở rộng trong chủ đề này. Các ví dụ được trình bày trong những phần tiếp theo.

Tuỳ chỉnh nút 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 Media Router 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 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 một giao diện tuỳ chỉnh. Ví dụ này cho thấy 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 một giao diện tuỳ chỉnh. Ví dụ này cho thấy 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ụ đề, đặ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 vị trí 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 không được điền sẵn.

SLOT  SLOT  SLOT
  1     2     3

Theo mặc định, mảnh này sẽ hiện một 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 đè các nút sẽ 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 Mô tả
@id/cast_button_type_empty Không đặt nút vào 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 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 danh sách chờ
@id/cast_button_type_rewind_30_seconds Tua lại 30 giây
@id/cast_button_type_forward_30_seconds Tua đi 30 giây
@id/cast_button_type_mute_toggle Tắt và bật tiếng đầu thu
@id/cast_button_type_closed_caption Mở hộp thoại để chọn phụ đề và bản âm thanh

Sau đây là ví dụ sử dụng ảnh bìa album, nút bật/tắt chế độ 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, một ngoại lệ thời gian chạy sẽ được đưa ra. Nếu bạn không muốn hiện một nút trong một vị trí, 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 mà SDK không cung cấp, chẳng hạn như nút "thích". Các bước thực hiện:

  1. Chỉ định một vị trí để 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.

  2. 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 tham số đó nếu cần.

  3. Phân lớp MiniControllerFragment, sau đó ghi đè onCreateView và gọi getButtonImageViewAt(int) để nhận 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.

  4. Hãy xem phần MediaIntentReceiver tại 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 ở khe cắm 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 Activity của bộ điều khiển mở rộng sử dụng thanh công cụ có giao diện tối, bạn có thể đặt giao diện cho 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 riê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

Chế độ Hoạt động của bộ điều khiển mở rộng có 5 vị trí để hiển thị các nút điều khiển. Khe giữa luôn hiển thị nút bật/tắt chế độ phát và không thể định cấu hình. Bốn vị trí còn lại có thể được ứng dụng 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 sẽ hiển thị nút phụ đề, nút chuyển đến mục trước, nút chuyển đến mục tiếp theo và nút bật/tắt tiếng ở 4 vị trí này, từ trái sang phải. Nhà phát triển có thể dùng thuộc tính castControlButtons để ghi đè những nút sẽ xuất hiện trong các vị trí. Danh sách 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 giống với các loại nút cho nút điều khiển thu nhỏ.

Sau đây là ví dụ về cách đặt nút tua lại ở vị trí thứ hai, nút bỏ qua tiế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 phải chứa đúng 4 mục, nếu không, một ngoại lệ thời gian chạy sẽ được đưa ra. Nếu bạn không muốn hiện một nút trong một vị trí, 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ợ 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ư nút "thích". Các bước thực hiện:

  1. Chỉ định một vị trí để 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) để lấy ImageView cho nút tuỳ chỉnh đó.

  2. 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 tham số đó nếu cần.

  3. Phân lớp ExpandedControllerActivity, sau đó ghi đè onCreate và 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.

  4. Hãy xem MediaIntentReceiver tại 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 ở khe cắm 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);
        ...
    }
}
Trước
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