web-dev-qa-db-fra.com

Interface utilisateur personnalisée sur l'échantillon d'exoplayer

** J'ai vraiment besoin d'aide si vous ne savez rien, ne me donnez pas de point négatif: | si quelque chose vous dérange commentez **

Je veux écrire une interface utilisateur personnalisée pour mon lecteur dans Exoplayer (changer le bouton de pause de lecture ou ajouter de nouveaux boutons comme la vitesse du joueur, etc.).

J'utilise l'exemple Exoplayer de github et avant d'ajouter du code à mon projet d'origine, je veux tester l'interface utilisateur personnalisée sur l'échantillon officiel.

J'ai lu des pages dans Stackoverflow et tuts + sur l'interface utilisateur personnalisée mais je suis vraiment confus!

pourquoi changer l'image de certains boutons ou changer leur emplacement doit être si difficile :) comment puis-je gérer cela?

[~ # ~] modifier [~ # ~]

c'est l'exemple https://github.com/google/ExoPlayer/tree/master/demo

J'ai lu ces deux articles:

http://www.brightec.co.uk/ideas/custom-Android-media-controller

http://code.tutsplus.com/tutorials/create-a-music-player-on-Android-user-controls--mobile-22787

selon cela link "Au lieu d'écrire votre propre contrôleur multimédia à partir de zéro, vous pouvez commencer avec la classe MediaController qui est incluse dans Android" et je pose cette question parce que je ne peux pas faire ces étapes sur exoplayer la bibliothèque et le didacticiel sont écrits pour le lecteur multimédia par défaut

androidmediacontrollerexoplayer
10
Siavash Abdoli

En fait, le code des méthodes de lecture et de pause invoquantes est dans la classe PlayerControl .

Si vous ne souhaitez pas utiliser l'interface utilisateur par défaut Android Media Controller, n'utilisez pas la classe MediaController, créez votre propre interface utilisateur dans votre fichier de mise en page avec lecture et pause personnalisées et liez les actions avec le bouton onClickListener.

Pour lire la vidéo, appelez exoPlayer.setPlayWhenReady(true);

Et pour faire une pause: appelez exoPlayer.setPlayWhenReady(false);

C'est un problème similaire avec comment créer une interface utilisateur personnalisée pour Android MediaController

3
Liuting

ok, cela m'a pris une demi-journée, jusqu'à ce que je ne plonge pas dans le code de la bibliothèque et que je trouve un tel texte:

Pour personnaliser la disposition de PlaybackControlView dans toute votre application, ou juste pour certaines configurations, vous pouvez définir exo_playback_control_view.xml disposition dans votre application res/layout répertoires. Ces dispositions remplaceront celle fournie par la bibliothèque ExoPlayer et seront gonflées pour être utilisées par PlaybackControlView.

Texte intégral: https://github.com/google/ExoPlayer/blob/release-v2/library/ui/src/main/Java/com/google/Android/exoplayer2/ui/PlaybackControlView.Java =

Aussi, vous voulez ajouter que vous pouvez spécifier une disposition personnalisée dans PlayerView comme ceci:

<com.google.Android.exoplayer2.ui.SimpleExoPlayerView Android:id="@+id/player_view"
      Android:layout_width="match_parent"
      Android:layout_height="match_parent"
      app:controller_layout_id="@layout/custom_controls"/>
17
Sough

La personnalisation de l'interface utilisateur d'ExoPlayer est assez simple. Si vous regardez la source ExoPlayer, le répertoire res de mise en page contient le fichier exo_player_control_view.xml Qui pointe vers (inclut) une autre mise en page - exo_playback_control_view.

  1. Copiez le contenu de la ressource de mise en page - exo_playback_control_view.xml
  2. Créez un fichier de ressources de mise en page avec le nom de votre choix - par exemple: custom_exo_playback_control_view.xml. Collez le contenu copié dans le nouveau xml
  3. Apportez les modifications nécessaires aux widgets de l'interface utilisateur. Ne modifiez pas l'attribut Id d'un widget/contrôle.
  4. Pointez la ressource d'interface utilisateur exoPlayer personnalisée dans votre fichier de mise en page qui contient le PlayerView.

Voici le xml custom_exo_controller_view Que j'ai créé à partir de l'original. Je voulais une couleur d'arrière-plan différente pour les commandes du lecteur et différentes couleurs de bouton et de vue de progression:

<LinearLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:app="http://schemas.Android.com/apk/res-auto"
    xmlns:tools="http://schemas.Android.com/tools"
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:layout_gravity="bottom"
    Android:background="@drawable/attachment_document_desc_bg"
    Android:layoutDirection="ltr"
    Android:orientation="vertical"
    Android:paddingStart="20dp"
    Android:paddingEnd="20dp"
    tools:targetApi="28">

  <LinearLayout
      Android:layout_width="match_parent"
      Android:layout_height="wrap_content"
      Android:gravity="center"
      Android:orientation="horizontal"
      Android:paddingTop="4dp">

    <ImageButton
        Android:id="@id/exo_prev"
        style="@style/ExoMediaButton.Previous"
        Android:tint="@color/colorPrimaryDark"
        Android:tintMode="src_in" />

    <ImageButton
        Android:id="@id/exo_rew"
        style="@style/ExoMediaButton.Rewind"
        Android:tint="@color/colorPrimaryDark"
        Android:tintMode="src_in" />

    <ImageButton
        Android:id="@id/exo_shuffle"
        style="@style/ExoMediaButton.Shuffle"
        Android:tint="@color/colorPrimaryDark"
        Android:tintMode="src_in" />

    <ImageButton
        Android:id="@id/exo_repeat_toggle"
        style="@style/ExoMediaButton"
        Android:tint="@color/colorPrimaryDark"
        Android:tintMode="src_in" />

    <ImageButton
        Android:id="@id/exo_play"
        style="@style/ExoMediaButton.Play"
        Android:tint="@color/colorPrimaryDark"
        Android:tintMode="src_in" />

    <ImageButton
        Android:id="@id/exo_pause"
        style="@style/ExoMediaButton.Pause"
        Android:tint="@color/colorPrimaryDark"
        Android:tintMode="src_in" />

    <ImageButton
        Android:id="@id/exo_ffwd"
        style="@style/ExoMediaButton.FastForward"
        Android:tint="@color/colorPrimaryDark"
        Android:tintMode="src_in" />

    <ImageButton
        Android:id="@id/exo_next"
        style="@style/ExoMediaButton.Next"
        Android:tint="@color/colorPrimaryDark"
        Android:tintMode="src_in" />

    <ImageButton
        Android:id="@id/exo_vr"
        style="@style/ExoMediaButton.VR"
        Android:tint="@color/colorPrimaryDark"
        Android:tintMode="src_in" />

  </LinearLayout>

  <LinearLayout
      Android:layout_width="match_parent"
      Android:layout_height="wrap_content"
      Android:layout_marginTop="4dp"
      Android:gravity="center_vertical"
      Android:orientation="horizontal">

    <TextView
        Android:id="@id/exo_position"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:includeFontPadding="false"
        Android:paddingLeft="4dp"
        Android:paddingRight="4dp"
        Android:textColor="#ff323232"
        Android:textSize="14sp"
        Android:textStyle="bold" />

    <com.google.Android.exoplayer2.ui.DefaultTimeBar
        Android:id="@id/exo_progress"
        Android:layout_width="0dp"
        Android:layout_height="26dp"
        Android:layout_weight="1"
        app:played_color="@color/colorPrimaryDark"
        app:unplayed_color="@color/gray" />

    <TextView
        Android:id="@id/exo_duration"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:includeFontPadding="false"
        Android:paddingLeft="4dp"
        Android:paddingRight="4dp"
        Android:textColor="#ff323232"
        Android:textSize="14sp"
        Android:textStyle="bold" />

  </LinearLayout>

</LinearLayout>

Voici le code que j'utilise pour le lecteur. Remarquez que l'attribut xml app:controller_layout_id Pointe vers la vue de contrôleur personnalisée définie ci-dessus.

<FrameLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:app="http://schemas.Android.com/apk/res-auto"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:padding="20dp">

  <com.google.Android.exoplayer2.ui.PlayerView
      Android:id="@+id/video_view"
      Android:layout_width="match_parent"
      Android:layout_height="match_parent"
      Android:layout_gravity="center"
      app:auto_show="true"
      app:controller_layout_id="@layout/exo_controller_view"
      app:fastforward_increment="10000"
      app:repeat_toggle_modes="none"
      app:resize_mode="fixed_width"
      app:rewind_increment="10000"
      app:surface_type="surface_view"
      app:use_controller="true" />

</FrameLayout>

Cela devrait obtenir l'interface utilisateur comme vous le souhaitez.

Vous pouvez ajouter des contrôles supplémentaires selon vos besoins dans le contrôleur personnalisé et dans votre code, trouver le contrôle avec findViewById() et écrire des écouteurs d'événements, etc.

2
Ram Iyer