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, 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 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 màu sắc tuỳ chỉnh, kiểu lớp phủ giới thiệu, kiểu bộ điều khiển 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 dành riêng 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 giao diện này. Ví dụ được đưa vào các 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 Trình định tuyến nội dung nghe nhì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ũ hơn, 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ùng 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 không có ảnh bìa đĩa nhạc.

SLOT  SLOT  SLOT
  1     2     3

Theo mặc định, mảnh này sẽ hiển thị 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 Đừng đặt nút trong ô 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 đế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
@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 bản âm thanh và văn bản

Dưới đây là ví dụ về việc 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, một ngoại lệ thời gian chạy sẽ được gửi. Nếu bạn không muốn hiện nút trong một vùng, 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 được SDK 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ù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.

  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 lớp con đó nếu cần.

  3. Tạo 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 thành phần hiển thị với UIController tuỳ chỉnh của bạn.

  4. 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 ở vị trí 2 với một 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 Hoạt động của trình điều khiển mở rộng sử dụng thanh công cụ giao diện tối, 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

Activity của trình điều khiển mở rộng có 5 vị trí để 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 vị trí còn lại có thể định cấu hình, từ trái sang phải, theo ứng dụng của người gử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 trong 4 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 đè nút nào sẽ hiển thị trong ô nào. 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 hệt với các loại nút cho nút điều khiển nhỏ.

Dưới đây là ví dụ về việc đặt nút tua lại ở vị trí thứ hai, nút tua đi ở vị trí thứ ba và để 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 phải chứa đúng 4 mục, nếu không, một ngoại lệ thời gian chạy sẽ được gửi. Nếu bạn không muốn hiện nút trong một vùng, 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 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 được SDK 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ù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) để 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 lớp con đó nếu cần.

  3. Tạo lớp con ExpandedControllerActivity, 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 thành phần hiển thị với UIController tuỳ chỉnh của bạn.

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

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