Dostosowanie interfejsu nadawcy w Androidzie

Możesz dostosować widżety przesyłania. określając kolory, styl przycisków, tekstu i miniatury i wybieraj typy wyświetlanych przycisków.

Dostosuj motyw aplikacji

Ten przykład tworzy niestandardowy styl motywu Theme.CastVideosTheme, który możliwość definiowania niestandardowych kolorów, początkowego stylu nakładki, minikontrolera i rozwinięty styl kontrolera.

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

Ostatnie trzy wiersze powyżej umożliwiają definiowanie stylów nakładka wprowadzająca, minikontroler i rozszerzony kontroler są częścią tego motywu. Przykłady podano w sekcjach poniżej.

Dostosuj przycisk Cast

Aby dodać niestandardowy obiekt mediaRouteTheme do motywu aplikacji:

<style name="Theme.CastVideosTheme" parent="Theme.AppCompat.Light.NoActionBar">
  <!-- ... -->
  <item name="mediaRouteTheme">@style/CustomMediaRouterTheme</item>
</style>

Zadeklaruj niestandardowy motyw routera multimediów i zadeklaruj niestandardowy 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 powinien być używany, jeśli wersja biblioteki pomocy technicznej jest nowsza niż 26.0.0. Dla starszych obsługi wersji bibliotek, użyj buttonTint .

Dostosuj motyw nakładki wprowadzającej

IntroductoryOverlay obsługuje różne atrybuty stylu, które aplikacja może zastąpić w niestandardowym motyw. Ten przykład pokazuje, jak zastąpić wygląd tekstu na przycisku i tytuł na widżecie nakładki:

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

Dostosuj minikontroler

Dostosowanie motywu

MiniControllerFragment obsługuje różne atrybuty stylu, które aplikacja może zastąpić w niestandardowym motyw. Z tego przykładu dowiesz się, jak włączyć wyświetlanie miniatury, zastąpi wygląd tekstu podtytułu i napisów, ustaw dostosować kolory i dostosować przyciski:

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

Wybierz przyciski

W elemencie MiniControllerFragment są 3 miejsca, w których można wyświetlić okładkę albumu dwa przyciski lub trzy przyciski sterujące, jeśli okładka albumu nie jest wypełniona.

SLOT  SLOT  SLOT
  1     2     3

Domyślnie we fragmencie znajduje się przycisk przełączania odtwarzania/wstrzymania. Programiści mogą używać atrybut castControlButtons, który ma zastąpić, które przyciski mają być wyświetlane. Obsługiwane przyciski sterujące są zdefiniowane jako Materiały dotyczące identyfikatorów:

Oto przykład, w którym wykorzystano okładkę albumu oraz przycisk przełączania odtwarzania/wstrzymania. oraz przycisk przechodzenia do przodu w tej kolejności od lewej do prawej:

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

Ostrzeżenie: ta tablica musi zawierać dokładnie 3 elementy; w przeciwnym razie środowisko wykonawcze zostanie zgłoszony. Jeśli nie chcesz wyświetlać przycisku w danym boksie, użyj @id/cast_button_type_empty

Dodaj przyciski niestandardowe

Do MiniControllerFragment można dodawać niestandardowe przyciski elementów sterujących, niedostarczone przez pakiet SDK, na przykład przycisk „kciuk w górę” Przycisk Kroki:

1. Określ boks zawierający przycisk niestandardowy za pomocą @id/cast_button_type_custom w atrybucie castControlButtons elementu MiniControllerFragment.

2. Zaimplementuj podklasę UIController UIController zawiera metody wywoływane przez pakiet SDK, gdy stan zmian sesji przesyłania lub sesji multimediów. Twoja podklasa klasy UIController powinien wykonać ImageView. jako jeden z parametrów i w razie potrzeby zaktualizować jego stan.

3. Podklasa MiniControllerFragment, następnie zastąp onCreateView i zadzwoń getButtonImageViewAt(int) aby uzyskać ImageView dla danego przycisku niestandardowego. Następnie zadzwoń bindViewToUIController(View, UIController) aby powiązać widok z niestandardowym UIController

4. Zobacz MediaIntentReceiver na stronie Dodaj działania niestandardowe. za pomocą przycisku niestandardowego.

   Oto przykład powiązania przycisku w boksie 2 z UIController pod tytułem 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);
        ...
    }
}

Dostosuj rozwinięty kontroler

Dostosowanie motywu

Jeśli aktywność na rozszerzonym kontrolerze korzysta z paska narzędzi z ciemnym motywem, można ustawić na pasku narzędzi motyw z jasnym tekstem i jasnym kolorem ikon:

<style name="Theme.CastVideosTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="castExpandedControllerToolbarStyle">
        @style/ThemeOverlay.AppCompat.Dark.ActionBar
    </item>
</style>

Możesz określić własne obrazy, które będą używane do rysowania przycisków na rozszerzony kontroler:

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

Wybierz przyciski

Aktywność na rozwiniętej kontrolerze ma 5 przedziałów, w których wyświetlają się przyciski sterujące. Pośrodku zawsze zawiera przycisk przełączania odtwarzania/wstrzymywania i nie można go skonfigurować. Pozostałe cztery W aplikacji nadawcy możesz skonfigurować przedziały od lewej do prawej.

SLOT  SLOT  PLAY/PAUSE  SLOT  SLOT
  1     2     BUTTON      3     4

Domyślnie w Aktywności jest widoczny przycisk napisów, a przejście do przycisk poprzedni element, przycisk przejścia do następnego elementu oraz przełącznik wyciszenia w tych czterech boksach, od lewej do prawej. Programiści mogą używać atrybut castControlButtons w celu zastąpienia, które przyciski mają być wyświetlane które przedziały czasu. Lista obsługiwanych przycisków sterujących ma postać Identyfikator zasobów identycznych jak rodzaje przycisków na minikontrolerze.

Oto przykład, w którym w drugim boksie umieszczamy przycisk przewijania do tyłu, przycisk do przodu w trzecim miejscu, pozostawiając pierwsze i ostatnie puste:

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

Tablica musi zawierać dokładnie 4 elementy. W przeciwnym razie wyjątek środowiska wykonawczego zostanie wyrzucony. Jeśli nie chcesz wyświetlać przycisku w danym boksie, użyj @id/cast_button_type_empty CastContext może zarządzać cyklem życia prezentacji tych działań.

Dodaj przyciski niestandardowe

ExpandedControllerActivity umożliwia dodawanie niestandardowych przycisków sterujących, których nie ma pakiet SDK. na przykład „kciuk w górę” Przycisk Kroki:

1. Określ boks zawierający przycisk niestandardowy za pomocą @id/cast_button_type_custom w atrybucie castControlButtons elementu ExpandedControllerActivity. Następnie możesz użyć getButtonImageViewAt(int) aby uzyskać ImageView dla danego przycisku niestandardowego.

2. Zaimplementuj podklasę UIController UIController zawiera metody wywoływane przez pakiet SDK, gdy stan zmian sesji przesyłania lub sesji multimediów. Twoja podklasa Funkcja UIController powinna przyjąć wartość ImageView jako jeden z parametrów, i w razie potrzeby aktualizować jego stan.

3. Podklasa ExtendedControllerActivity, zastąp onCreate i zadzwoń getButtonImageViewAt(int) aby pobrać obiekt widoku przycisku. Następnie zadzwoń bindViewToUIController(View, UIController) aby powiązać widok z niestandardowym UIController.

4. Zobacz MediaIntentReceiver w sekcji Add Custom Actions (Dodaj działania niestandardowe) jak obsługiwać działanie z przycisku niestandardowego.

Oto przykład powiązania przycisku w boksie 2 z UIController o nazwie 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);
        ...
    }
}