Sie können Cast-Widgets anpassen. indem Sie die Farben, die Schaltflächen, den Text und des Erscheinungsbildes und durch die Auswahl der Schaltflächentypen, die angezeigt werden sollen.
App-Design anpassen
In diesem Beispiel wird der benutzerdefinierte Designstil Theme.CastVideosTheme
erstellt, der
können benutzerdefinierte Farben, einen einführenden Overlay-Stil, einen Mini-Controller definieren
und einem erweiterten Controller-Stil.
<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>
Mit den letzten drei Zeilen oben können Sie spezielle Stile für Einführendes Overlay, Mini-Controller und erweiterter Controller als Teil dieses Themas. Beispiele finden Sie in den folgenden Abschnitten.
Cast-Symbol anpassen
So fügen Sie dem Design Ihrer App ein benutzerdefiniertes mediaRouteTheme
-Element hinzu:
<style name="Theme.CastVideosTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- ... -->
<item name="mediaRouteTheme">@style/CustomMediaRouterTheme</item>
</style>
Benutzerdefiniertes Media Router-Design und ein benutzerdefiniertes
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
sollte verwendet werden, wenn die Version der Support Library neuer als 26.0.0 ist. Ältere
Bibliotheksversionen unterstützen, verwenden Sie buttonTint
.
Einführendes Overlay-Design anpassen
Die
IntroductoryOverlay
unterstützt verschiedene Stilattribute, die Ihre App in einem benutzerdefinierten
aus. In diesem Beispiel wird gezeigt, wie Sie die Textdarstellung der Schaltfläche
und Titel über dem Overlay-Widget:
<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>
Mini-Controller anpassen
Design anpassen
Die
MiniControllerFragment
unterstützt verschiedene Stilattribute, die Ihre App in einem benutzerdefinierten
aus. In diesem Beispiel wird gezeigt, wie Sie
die Anzeige der Miniaturansicht aktivieren,
die Textdarstellung der Zwischenüberschrift und der Untertitel überschreiben,
und die Schaltflächen anpassen:
<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>
Schaltflächen auswählen
Ein MiniControllerFragment
hat drei Bereiche, in denen das Albumcover angezeigt werden kann.
und zwei Tasten oder drei Steuerungstasten, falls das Albumcover nicht bereits ausgefüllt ist.
SLOT SLOT SLOT
1 2 3
Standardmäßig zeigt das Fragment eine Schaltfläche zum Wechseln zwischen Wiedergabe und Pause. Entwickler können
das Attribut castControlButtons
, um zu überschreiben, welche Schaltflächen angezeigt werden sollen.
Die unterstützten Steuerschaltflächen sind definiert als
ID-Ressourcen:
Schaltflächenart | Beschreibung |
---|---|
@id/cast_button_type_empty |
Platzieren Sie keine Schaltfläche in diesem Slot |
@id/cast_button_type_custom |
Benutzerdefinierte Schaltfläche |
@id/cast_button_type_play_pause_toggle |
Wechselt zwischen Wiedergabe und Pause |
@id/cast_button_type_skip_previous |
Wechselt zum vorherigen Element in der Warteschlange |
@id/cast_button_type_skip_next |
Wechselt zum nächsten Element in der Warteschlange |
@id/cast_button_type_rewind_30_seconds |
Spult die Wiedergabe 30 Sekunden zurück |
@id/cast_button_type_forward_30_seconds |
Spult 30 Sekunden vor |
@id/cast_button_type_mute_toggle |
Schaltet den Empfänger stumm und hebt die Stummschaltung auf |
@id/cast_button_type_closed_caption |
Öffnet ein Dialogfeld zum Auswählen von Text- und Audiotracks |
Hier ist ein Beispiel für das Albumcover, eine Schaltfläche zum Wechseln zwischen Wiedergabe und Pause, und eine Schaltfläche zum Vorspulen in dieser Reihenfolge von links nach rechts:
<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">
Warnung: Dieses Array muss genau drei Elemente enthalten, andernfalls eine Laufzeit
Ausnahme ausgelöst. Wenn eine Schaltfläche nicht in einer Anzeigenfläche erscheinen soll, verwenden Sie
@id/cast_button_type_empty
Benutzerdefinierte Schaltflächen hinzufügen
Ein MiniControllerFragment
unterstützt das Hinzufügen von benutzerdefinierten Steuerschaltflächen,
nicht vom SDK bereitgestellt, z. B. „Mag ich“ Schaltfläche. Folgende Schritte sind auszuführen:
Geben Sie mithilfe von
@id/cast_button_type_custom
im AttributcastControlButtons
vonMiniControllerFragment
.Implementieren Sie eine abgeleitete Klasse von
UIController
DieUIController
enthält Methoden, die vom SDK aufgerufen werden, wenn der Status oder die Mediensitzung ändert sich. Ihre abgeleitete Klasse vonUIController
sollte eineImageView
als einen der Parameter und aktualisieren Sie seinen Status nach Bedarf.Abgeleitete Klasse
MiniControllerFragment
, und dann überschreibenonCreateView
und AnrufgetButtonImageViewAt(int)
um dieImageView
. für diese benutzerdefinierte Schaltfläche. Rufen Sie dannbindViewToUIController(View, UIController)
um die Ansicht mit Ihrem benutzerdefiniertenUIController
Weitere Informationen finden Sie unter
MediaIntentReceiver
Benutzerdefinierte Aktionen hinzufügen, um mehr über die Verarbeitung der Aktion zu erfahren über Ihre benutzerdefinierte Schaltfläche.Hier ist ein Beispiel für das Verknüpfen einer Schaltfläche in Slot 2 mit einem
UIController
mit dem NamenMyCustomUIController
:
// 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>
<ph type="x-smartling-placeholder">// 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); ... } }
Erweiterten Controller anpassen
Design anpassen
Wenn für die Aktivitäten eines erweiterten Controllers eine Symbolleiste mit einem dunklen Design verwendet wird, kann ein Design für die Symbolleiste so festlegen, dass heller Text und eine helle Symbolfarbe verwendet werden:
<style name="Theme.CastVideosTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="castExpandedControllerToolbarStyle">
@style/ThemeOverlay.AppCompat.Dark.ActionBar
</item>
</style>
Sie können Ihre eigenen Bilder angeben, die zum Zeichnen der Schaltflächen auf dem erweiterten Controller:
<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>
Schaltflächen auswählen
Die Aktivität des erweiterten Controllers hat fünf Plätze zum Anzeigen der Steuerungstasten. Im mittleren Bereich zeigt immer eine Schaltfläche zum Wechseln zwischen Wiedergabe und Pause an und ist nicht konfigurierbar. Die anderen vier Anzeigenflächen können von der Sender-App von links nach rechts konfiguriert werden.
SLOT SLOT PLAY/PAUSE SLOT SLOT
1 2 BUTTON 3 4
Standardmäßig wird in der Aktivität eine Untertitelschaltfläche angezeigt,
Schaltfläche für vorheriges Element, Schaltfläche „Zum nächsten Element springen“ und Ein/Aus-Schaltfläche für die Stummschaltung
in diesen vier Flächen, von links nach rechts. Entwickler können die
Attribut castControlButtons
, um zu überschreiben, in welchen Schaltflächen die Schaltfläche angezeigt werden soll
welche Slots es gibt. Die Liste der unterstützten Steuerschaltflächen ist definiert als
ID-Ressourcen identisch mit
Tastentypen für Mini-Controller-Tasten.
Hier ist ein Beispiel, bei dem eine Zurückspulen-Schaltfläche im zweiten Slot platziert wird: ein Überspringen-Button im dritten Slot weiter und lassen Sie das erste und das letzte Feld leer:
// 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>
Das Array muss genau vier Elemente enthalten. Andernfalls wird eine Laufzeitausnahme ausgelöst.
nicht verworfen werden. Wenn eine Schaltfläche nicht in einer Anzeigenfläche erscheinen soll, verwenden Sie
@id/cast_button_type_empty
CastContext
kann den Lebenszyklus und
Präsentation dieser Aktivität.
Benutzerdefinierte Schaltflächen hinzufügen
Ein ExpandedControllerActivity
unterstützt das Hinzufügen von benutzerdefinierten Steuerschaltflächen, die nicht vom SDK bereitgestellt werden.
z. B. „Mag ich“ Schaltfläche. Folgende Schritte sind auszuführen:
Geben Sie mithilfe von
@id/cast_button_type_custom
im AttributcastControlButtons
vonExpandedControllerActivity
. Sie können danngetButtonImageViewAt(int)
um dieImageView
für diese benutzerdefinierte Schaltfläche.Implementieren Sie eine abgeleitete Klasse von
UIController
UIController
enthält Methoden, die vom SDK aufgerufen werden, wenn der Status oder die Mediensitzung ändert sich. Ihre abgeleitete Klasse vonUIController
sollteImageView
als einen der Parameter verwenden. und aktualisieren Sie den Status bei Bedarf.Erstellen Sie eine abgeleitete Klasse von ExtendedControllerActivity und überschreiben Sie
onCreate
und rufen SiegetButtonImageViewAt(int)
um das Ansichtsobjekt der Schaltfläche abzurufen. Rufen Sie dannbindViewToUIController(View, UIController)
um die Ansicht mit Ihrer benutzerdefiniertenUIController
zu verknüpfen.Weitere Informationen finden Sie unter
MediaIntentReceiver
unter Benutzerdefinierte Aktionen hinzufügen .
Hier ist ein Beispiel für das Verknüpfen einer Schaltfläche in Slot 2 mit einem
UIController
mit dem Namen 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>
<ph type="x-smartling-placeholder">// 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); ... } }