android - exoplayer 示例上的自定义 UI

Question

** 我真的需要帮助，如果你什么都不知道，请不要给我打分:|如果有什么事打扰你评论**

我想在 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 类开始，而不是从头开始编写您自己的媒体 Controller ”，我问这个问题是因为我无法在 exoplayer 库上执行此步骤，并且教程是为默认媒体播放器编写的

Answer 1

自定义 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。我想要播放器控件的不同背景颜色以及不同的按钮和进度 View 颜色:

<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 指向上面定义的自定义 Controller View 。

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

您可以根据需要在自定义 Controller 和代码中添加额外的控件，使用 findViewById() 查找控件并编写事件监听器等。