Android-Benutzeroberfläche für Absender anpassen

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

Hier ist ein Beispiel, das 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:

1. Geben Sie mithilfe von @id/cast_button_type_custom im Attribut castControlButtons von MiniControllerFragment.

2. Implementieren Sie eine abgeleitete Klasse von UIController Die UIController enthält Methoden, die vom SDK aufgerufen werden, wenn der Zustand oder die Mediensitzung ändert sich. Ihre abgeleitete Klasse von UIController sollte eine ImageView als einen der Parameter und aktualisieren Sie seinen Status nach Bedarf.

3. Abgeleitete Klasse MiniControllerFragment, dann überschreiben onCreateView und Anruf getButtonImageViewAt(int) um die ImageView. für diese benutzerdefinierte Schaltfläche. Rufen Sie dann bindViewToUIController(View, UIController) um die Ansicht mit Ihrer benutzerdefinierten UIController

4. 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 die Verknüpfung einer Schaltfläche in Slot 2 mit einem UIController namens 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);
        ...
    }
}

Erweiterten Controller anpassen

Design anpassen

Wenn für die Aktivität 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 erweiterter 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. wie „Mag ich“ Schaltfläche. Folgende Schritte sind auszuführen:

1. Geben Sie mithilfe von @id/cast_button_type_custom im Attribut castControlButtons von ExpandedControllerActivity. Sie können dann getButtonImageViewAt(int) um die ImageView für diese benutzerdefinierte Schaltfläche.

2. 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 von UIController sollte ImageView als einen der Parameter verwenden. und aktualisieren Sie den Status bei Bedarf.

3. Erstellen Sie eine abgeleitete Klasse von ExtendedControllerActivity und überschreiben Sie onCreate und rufen Sie getButtonImageViewAt(int) um das Ansichtsobjekt der Schaltfläche abzurufen. Rufen Sie dann bindViewToUIController(View, UIController) um die Ansicht mit Ihrer benutzerdefinierten UIController zu verknüpfen.

4. Weitere Informationen finden Sie unter MediaIntentReceiver unter Benutzerdefinierte Aktionen hinzufügen .

Hier ist ein Beispiel für die Verknüpfung 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>

// 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);
        ...
    }
}