ExoPlayer自定义控制器（controller_layout）

ExoPlayer迁移至media3之后依赖需更换为media3的仓库

implementation "androidx.media3:media3-exoplayer:1.4.1"
implementation "androidx.media3:media3-exoplayer-dash:1.4.1"
implementation "androidx.media3:media3-ui:1.4.1"

具体版本可参考链接

因为exoplayer原来的控制器样式和UI给的不一致，所以需要重新定制。定制需要用的的属性是 controller_layout_id

具体如下

<androidx.media3.ui.PlayerView
    android:id="@+id/player"
    app:use_controller="true"
    app:controller_layout_id="@layout/control_ui"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

control_ui的简易布局为

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
    app:layout_constraintBottom_toBottomOf="parent"
    android:layout_height="match_parent">

    <androidx.appcompat.widget.AppCompatTextView
        android:id="@+id/exo_position"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="6dp"
        android:layout_marginBottom="6dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        tools:text="8:12" />

    <androidx.appcompat.widget.AppCompatTextView
        android:id="@+id/exo_duration"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="6dp"
        android:layout_marginEnd="6dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        tools:text="22:32" />

    <androidx.media3.ui.DefaultTimeBar
        android:id="@+id/exo_progress"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="5dp"
        android:layout_marginTop="5dp"
        android:layout_marginEnd="5dp"
        app:layout_constraintStart_toEndOf="@id/exo_position"
        app:layout_constraintEnd_toStartOf="@id/exo_duration"
        app:layout_constraintBottom_toBottomOf="parent"
        app:played_color="#FF00FF"
        app:unplayed_color="#DDDDDD" />

    <ImageButton
        android:id="@id/exo_play_pause"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="3dp"
        android:layout_marginEnd="3dp"
        android:background="@android:color/transparent"
        android:contentDescription="@string/app_name"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

重点是id为exo_play_pause的ImageButton，这是控制播放暂停的按钮，在很多文档上把这个分为exo_play和exo_pause两个按钮，但在PlayerView里合并为一个按钮，具体可参考media3和exoplayer的迁移文档。

如果需要改动按钮的样式，需要创建values/drawables.xml文件，并复写如下两个属性以及图片

<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:tools="http://schemas.android.com/tools">
    <drawable name="exo_styled_controls_play" tools:ignore="PrivateResource">@drawable/play</drawable>
    <drawable name="exo_styled_controls_pause" tools:ignore="PrivateResource">@drawable/pause</drawable>
</resources>

至此即可完成exoplayer的UI定制功能

修改图标可参考链接复写即可