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 nút, văn bản và hình thu nhỏ giao diện, cũng như chọn loại nút cần 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 mini 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 mini và bộ điều khiển mở rộng trong giao diện này. Các ví dụ được đưa vào trong các phần sau.

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 Bộ đị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>

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. Đối với các phiên bản thư viện hỗ trợ cũ hơn, vui lòng sử dụng buttonTint thay thế.

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

Tuỳ chỉnh giao diện

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 thấy cách bật tính năng 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 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.

SLOT  SLOT  SLOT
  1     2     3

Theo mặc định, mảnh này sẽ hiển thị nút chuyển đổi 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 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 Mô tả
@id/cast_button_type_empty Không đặt nút nào 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 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 của thiết bị nhận
@id/cast_button_type_closed_caption Mở hộp thoại để chọn văn bản và bản âm thanh

Sau đây là ví dụ sử dụng ảnh bìa đĩa nhạc, nút chuyển đổi 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 thị nút ở 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 lớp con đó khi 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 đó, gọi bindViewToUIController(View, UIController) để liên kết khung hiển thị với UIControllertuỳ chỉnh.

  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 nút ở 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

Tuỳ chỉnh giao diện

Nếu Hoạt động của bộ đ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

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. Vị trí ở giữa luôn hiển thị nút chuyển đổi phát/tạm dừng và không thể định cấu hình. 4 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ụ đề chi tiết, nút chuyển đến mục trước, nút chuyển đến mục tiếp theo và nút chuyển đổi tắt tiếng ở 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 đè các nút cần hiển thị ở vị trí 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 với các loại nút cho nút bộ điều khiển mini.

Sau đâ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 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 đưa ra. Nếu bạn không muốn hiển thị nút ở một vị trí, hãy sử dụng @id/cast_button_type_empty. CastContext có thể quản lý vòng đời và bản trình bày của hoạt động này.

Thêm nút tuỳ chỉnh

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

  3. Tạo lớp con ExpandedControllerActivity, sau đó ghi đè onCreate và gọi getButtonImageViewAt(int) để lấy đối tượng khung hiển thị của nút. Sau đó, gọi bindViewToUIController(View, UIController) để liên kết khung hiển thị với UIController tuỳ chỉnh.

  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 nút ở vị trí 2 với a 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