Question

**如果你不知道任何事情，我真的需要帮助不给我一个负面意义：|如果有什么打扰你评论**

我想在Exoplayer中为我的播放器编写自定义UI（暂停播放的更改按钮或添加播放器速度等新按钮等）。

我使用来自github的Exoplayer示例，在将代码添加到原始项目之前，我想在官方样本上测试自定义UI。

我在Stackoverflow中读取页面并关于自定义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上执行此步骤库和教程是为默认媒体播放器编写的

Answer 1

好吧，这花了我半天时间，直到我没有深入到图书馆代码并发现这样的文字：

要在整个应用中自定义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"/>

Answer 2

实际上代码游戏＆amp; amp;暂停方法在类PlayerControl中。

如果您不想使用默认的Android媒体控制器用户界面，请不要使用MediaController课程，在自定义播放和播放的布局文件中创建自己的用户界面。暂停按钮并使用按钮的onClickListener绑定操作。

要播放视频，请致电exoPlayer.setPlayWhenReady(true);

暂停：致电exoPlayer.setPlayWhenReady(false);

与how to create custom UI for android MediaController

类似的问题

Answer 3

自定义ExoPlayer的UI非常简单。如果您查看ExoPlayer源，则layout res目录包含文件exo_player_control_view.xml指向（包括）另一种布局exo_playback_control_view。

复制布局资源的内容-exo_playback_control_view.xml
使用您选择的任何名称创建布局资源文件-例如：custom_exo_playback_control_view.xml。将复制的内容粘贴到新的xml
根据需要对UI小部件进行任何更改。请勿更改任何小部件/控件的Id属性。
将自定义exoPlayer UI资源指向包含PlayerView的布局文件。

这是我从原始文件创建的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()查找控件并编写事件侦听器，等等。

exoplayer示例

3 个答案: