web-dev-qa-db-ja.com

exoplayerサンプルのカスタムUI

**何かわからないことがあれば、私は否定的な点を教えてくれません。何か気になることがあればコメントしてください**

ExoplayerでプレーヤーのカスタムUIを作成したい（一時停止再生のボタンを変更するか、プレーヤーの速度などの新しいボタンを追加する）。

私はgithubのExoplayerサンプルを使用しています。元のプロジェクトにコードを追加する前に、公式サンプルでカスタムUIをテストしたいと思います。

Stackoverflowとtuts +でカスタムUIについてページを読みましたが、本当に混乱しました！

なぜいくつかのボタンの画像を変更するか、その場所を変更するのはとても難しいに違いありません:)これをどのように処理できるのですか？

[〜＃〜]編集[〜＃〜]

これはサンプルです https://github.com/google/ExoPlayer/tree/master/demo

私はこれら二つの記事を読みました：

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

これによると link 「独自のメディアコントローラーを最初から作成する代わりに、Androidに含まれているMediaControllerクラスから始めることもできます」と私はexoplayerでこの手順を実行できないため、この質問をしますライブラリとチュートリアルは、デフォルトのメディアプレーヤー用に作成されています

androidmediacontrollerexoplayer
10
Siavash Abdoli

実際に、再生と一時停止のメソッドを組み込むコードは、クラス PlayerControl にあります。

デフォルトのAndroidメディアコントローラUIを使用しない場合は、MediaControllerクラスを使用せずに、カスタムの再生と一時停止でレイアウトファイルに独自のUIを作成しますボタンとアクションをボタンのonClickListenerにバインドします。

ビデオを再生するには、exoPlayer.setPlayWhenReady(true);を呼び出します

一時停止するには、exoPlayer.setPlayWhenReady(false);を呼び出します

Android MediaController のカスタムUIを作成する方法）と同様の問題です

3
Liuting

わかりました。ライブラリコードに飛び込んでそのようなテキストを見つけるまで、半日かかりました。

アプリ全体で、または特定の構成のみでPlaybackControlViewのレイアウトをカスタマイズするには、exo_playback_control_view.xmlアプリケーションのレイアウトファイルres/layoutディレクトリ。これらのレイアウトは、ExoPlayerライブラリによって提供されるレイアウトをオーバーライドし、PlaybackControlViewで使用するために拡張されます。

全文： https://github.com/google/ExoPlayer/blob/release-v2/library/ui/src/main/Java/com/google/Android/exoplayer2/ui/PlaybackControlView.Java =

また、次のようにPlayerViewでカスタムレイアウトを指定できることを追加します。

<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

ExoPlayerのUIのカスタマイズは非常に簡単です。 ExoPlayerのソースを見ると、レイアウトresディレクトリには、別のレイアウトを指す（含む）_exo_player_control_view.xml_ファイルが含まれています-_exo_playback_control_view_。

  1. レイアウトリソースの内容をコピーする-_exo_playback_control_view.xml_
  2. 任意の名前でレイアウトリソースファイルを作成します-例：_custom_exo_playback_control_view.xml_。コピーした内容を新しいxmlに貼り付けます
  3. 必要に応じて、UIウィジェットに変更を加えます。ウィジェット/コントロールのId属性を変更しないでください。
  4. PlayerViewを含むレイアウトファイル内のカスタムexoPlayer UIリソースをポイントします。

オリジナルから作成した_custom_exo_controller_view_ xmlは次のとおりです。プレーヤーのコントロールの背景色を変更したり、ボタンや進行状況ビューの色を変更したりしました。

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

以下は、プレーヤーに使用するコードです。 xml属性_app:controller_layout_id_は、上記で定義されたカスタムコントローラービューを指していることに注意してください。

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

これにより、UIが希望どおりに表示されます。

カスタムコントローラーやコードで必要に応じて追加のコントロールを追加したり、findViewById()でコントロールを見つけたり、イベントリスナーを作成したりできます。

2
Ram Iyer