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_customtrong thuộc tínhcastControlButtonscủaMiniControllerFragment.Triển khai lớp con của
UIController.UIControllerchứ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ủaUIControllersẽ mất mộtImageViewlà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 đèonCreateViewvà gọigetButtonImageViewAt(int)để tảiImageViewcho nút tuỳ chỉnh đó. Sau đó gọibindViewToUIController(View, UIController)để liên kết chế độ xem với các từ khoá tùy chỉnhUIController.Xem
MediaIntentReceivertạ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
UIControllercó 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>
// 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)
...
}
}
// 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 đè các 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_customtrong thuộc tínhcastControlButtonscủaExpandedControllerActivity. Sau đó, bạn có thể sử dụnggetButtonImageViewAt(int)để có đượcImageViewcho nút tuỳ chỉnh đó.Triển khai lớp con của
UIController.UIControllerchứ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ủaUIControllerphải lấyImageViewlàm một trong các tham số, và cập nhật trạng thái nếu cần.Lớp con ExpandControllerActivity, sau đó ghi đè
onCreatevà gọigetButtonImageViewAt(int)để lấy đối tượng thành phần hiển thị của nút. Sau đó gọibindViewToUIController(View, UIController)để liên kết chế độ xem vớiUIControllertuỳ chỉnh của bạn.Xem
MediaIntentReceivertạ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>
// 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)
...
}
}
// 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);
...
}
}