Hi，大家好，我是编程小6，很荣幸遇见你，我把这些年在开发过程中遇到的问题或想法写出来，今天说一说ExoPlayer系列(1)-自定义UI[通俗易懂],希望能够帮助你!!!。

• ExoPlayer布局
• 修改属性
• 复写布局文件
• 自定义布局文件
• 三种自定义的实现方式。
• 总结
• 参考资料

ExoPlayer布局

ExoPlayer包含了几个UI的控件，最主要的是下面的两个:

• StyledPlayerView它是一个播放界面的UI控件，包括展示Video,字幕，音乐播放中的专辑画面，还有一些控制播放的UI，这部分的UI被封装在了StyledPlayerControlView中，只不过StyledPlayerView依赖了它
• StyledPlayerControlView它是一个控制ExoPlayer的UI,里面包含了，播放，暂停，快进，快退，进度条等UI的显示。

上面这两个控件是ExoPlayer库中定义好的，可以拿来即用，但是作为一个设计优秀的库，这些UI控件不是必须的，开发者可以自定义自己的UI，也就是不使用上面的UI控件，自己开发一套UI,但是这种情况带来的后果就是加大了开发者的负担。但是，ExoPlayer的优秀之处是又提供了一种更为方便的自定义UI的方式，还是使用上面的2个控件配合下面三种方式去自定义UI：

• 通过修改这两个控件的attributes的属性(或者调用相应的方法)。
• 通过全局的复写这几个控件的布局文件。
• 对于某个UI，自定义布局文件。

稍微介绍一下上面的方式，就是整个控件框架还是使用上面的两个控件，通过修改它们的属性和自定义布局文件来达到自定义UI的效果，为了有一个更为直观的认识，下面通过一些示例，解释一下上面提到的3种方式。

修改属性

比如修改

app:resize_mode="fill"

则为效果图填充效果，如果修改为

app:resize_mode="fit"

则为自适应效果。

  <com.google.android.exoplayer2.ui.StyledPlayerView
        android:id="@+id/style_player_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
-       app:resize_mode="fill"
+       app:resize_mode="fit"
        app:hide_on_touch="true"
        app:show_timeout="5000"
        />

左图为fill,右图为fit

复写布局文件

在我们app的res目录定义一个布局文件，名称必须定义成exo_styled_player_control_view.xml,里面控件id的名称是固定的,必现是ExoPlayer定义好的，比如下面控制播放和暂停的按钮必id必须是`exo_play_pause

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">




    <ImageButton android:id="@id/exo_play_pause"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_gravity="center"
        android:background="@color/design_default_color_error"
        style="@style/ExoMediaButton.Play"/>


</FrameLayout>

device-2021-12-29-200806

自定义布局文件

如果想替换StyledPlayerView中默认的播放控制的UI,可以复写其布局文件，做法是把controller_layout_id替换成我们自己的布局文件custom_control_layout。

<com.google.android.exoplayer2.ui.StyledPlayerView
        android:id="@+id/style_player_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:resize_mode="fit"
        app:hide_on_touch="true"
        app:show_timeout="5000"
 +      app:controller_layout_id="@layout/custom_control_layout"
        />

但是custom_control_layout.xml这个布局有一定的要求，那就是控件id的名称是固定的,必现是ExoPlayer定义好的，比如下面控制播放和暂停的按钮必id必须是exo_play_pause.具体这些id是什么，可以查阅StyledPlayerControlView这个类。

<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">


    <View android:id="@id/exo_controls_background"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@color/exo_black_opacity_60"/>


    <LinearLayout
        android:id="@id/exo_center_controls"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:background="@android:color/transparent"
        android:gravity="center"
        android:padding="@dimen/exo_styled_controls_padding"
        android:clipToPadding="false">


        <ImageView android:id="@id/exo_prev"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_custom_previous"
            android:layout_gravity="center"
            />


        <ImageView android:id="@id/exo_play_pause"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:src="@drawable/ic_custom_play_pasue"/>


        <ImageView
            android:id="@id/exo_next"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_custom_next"
            android:layout_gravity="center"
            />
    </LinearLayout>


</merge>

三种自定义的实现方式。

上面的三种自定义的实现方式，有助于我们自己写自定义View的时候借鉴，下面介绍一下其具体的实现方式，方便我们借鉴。这样，我们后面写的自定义View，功能可以更多，扩展性更好。

• 修改属性

其实很好理解，自定义View的时候，预置了很多的属性，通过修改这些属性达到自定义Ui的作用，下面的代码就是上面设置resizeMode的实现方式。

public StyledPlayerView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
 		...
    int resizeMode = AspectRatioFrameLayout.RESIZE_MODE_FIT;
    
    if (attrs != null) {
      TypedArray a =
          context
              .getTheme()
              .obtainStyledAttributes(
                  attrs, R.styleable.StyledPlayerView, defStyleAttr, /* defStyleRes= */ 0);
      try {
       ...
        resizeMode = a.getInt(R.styleable.StyledPlayerView_resize_mode, resizeMode);
    	...
      } finally {
        a.recycle();
      }
      ...
    }
  }

• 重写布局文件

上面的例子，在app moudule重写了exo_styled_player_control_view.xml布局文件，其实在StyledPlayerControlView 里有个同名的布局文件。在运行时，app module的布局文件会覆盖exoplayer库里的同名布局文件。但是这里要注意，在布局文件中使用的控件id，必现是StyledPlayerView或者StyledPlayerControlView中定义好的。

public StyledPlayerControlView(
      Context context,
      @Nullable AttributeSet attrs,
      int defStyleAttr,
      @Nullable AttributeSet playbackAttrs) {
    super(context, attrs, defStyleAttr);
    int controllerLayoutId = R.layout.exo_styled_player_control_view;
  ...
}

• 自定义布局文件

public StyledPlayerView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);

    ...
    int playerLayoutId = R.layout.exo_styled_player_view;
   
    if (attrs != null) {
      TypedArray a =
          context
              .getTheme()
              .obtainStyledAttributes(
                  attrs, R.styleable.StyledPlayerView, defStyleAttr, /* defStyleRes= */ 0);
      try {
     		...
        playerLayoutId =
            a.getResourceId(R.styleable.StyledPlayerView_player_layout_id, playerLayoutId);
     
      } finally {
        a.recycle();
      }
    }
	...
    LayoutInflater.from(context).inflate(playerLayoutId, this);
   ...
  }

• 上面的代码解释了，如果我们定义一个新的布局，然后可以替换StyledPlayerView中的默认布局。StyledPlayerControlView也是类似的原理。

总结

本节主要描述了如何使用ExoPlayer提供的UI控件来自定义播放界面，下一节将讲解一下Track selection。

参考资料

• Sample地址
• ExoPlayer官方文档