3步打造高颜值ExoPlayer进度条：告别默认样式，提升用户体验

你是否还在为App中单调的播放器进度条发愁？用户抱怨看不清播放位置？本文将通过3个简单步骤，教你如何自定义ExoPlayer的进度条外观，打造符合App风格的播放控制界面。读完本文你将学会：修改进度条颜色、调整滑块样式、实现高级动画效果，让播放器控件瞬间提升一个档次。

了解ExoPlayer进度条的基本结构

ExoPlayer的进度条功能主要由两个核心类实现：PlayerControlView和DefaultTimeBar。前者是整个播放控制器的容器，后者则是具体的进度条实现。

核心组件解析

PlayerControlView（library/ui/src/main/java/com/google/android/exoplayer2/ui/PlayerControlView.java）负责管理整个播放控制界面，包括播放按钮、进度条、音量控制等元素。而DefaultTimeBar（library/ui/src/main/java/com/google/android/exoplayer2/ui/DefaultTimeBar.java）是进度条的具体实现，处理进度显示、用户拖动等交互。

进度条主要由以下几个部分组成：

• 已播放部分：表示当前已播放的媒体内容
• 缓冲部分：表示已加载但未播放的内容
• 滑块(Scrubber)：用于拖动定位播放位置
• 广告标记：显示广告位置（如适用）

默认布局结构

ExoPlayer提供了默认的控制器布局文件exo_player_control_view.xml，你可以在项目中找到类似的布局结构。通过自定义这个布局，我们可以改变进度条的位置和大小。

基础自定义：修改颜色和尺寸

最简单的自定义方式是通过XML属性修改进度条的颜色和尺寸。这种方式无需编写Java代码，适合快速调整外观。

修改XML属性

在布局文件中添加app:前缀的属性来自定义DefaultTimeBar：

<com.google.android.exoplayer2.ui.PlayerControlView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:played_color="#FF4081"
    app:buffered_color="#FF80AB"
    app:unplayed_color="#33FFFFFF"
    app:scrubber_color="#FFFFFF"
    app:bar_height="4dp"
    app:scrubber_enabled_size="16dp"/>

这里我们修改了已播放部分的颜色为粉色，缓冲部分为浅粉色，未播放部分为白色半透明，滑块为白色，并调整了进度条高度和滑块大小。

可用的XML属性

DefaultTimeBar提供了多种可自定义的属性（library/ui/src/main/java/com/google/android/exoplayer2/ui/DefaultTimeBar.java）：

属性名称	描述	默认值
bar_height	进度条高度	4dp
touch_target_height	触摸区域高度	26dp
ad_marker_width	广告标记宽度	4dp
scrubber_enabled_size	滑块正常状态大小	12dp
scrubber_disabled_size	滑块禁用状态大小	0dp
scrubber_dragged_size	滑块拖动状态大小	16dp
played_color	已播放部分颜色	白色
buffered_color	缓冲部分颜色	半透明白色
unplayed_color	未播放部分颜色	20%透明白色
scrubber_color	滑块颜色	白色
ad_marker_color	广告标记颜色	黄色
played_ad_marker_color	已播放广告标记颜色	浅黄

进阶自定义：使用自定义滑块和布局

如果基础属性无法满足需求，我们可以通过自定义滑块图片和控制器布局来实现更个性化的效果。

使用自定义滑块图片

通过scrubber_drawable属性指定自定义滑块图片：

<com.google.android.exoplayer2.ui.PlayerControlView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:scrubber_drawable="@drawable/custom_scrubber"/>

这里的custom_scrubber是一个自定义的Drawable，可以是图片或者形状：

<!-- res/drawable/custom_scrubber.xml -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="#FF4081"/>
    <stroke android:width="2dp" android:color="#FFFFFF"/>
    <size android:width="20dp" android:height="20dp"/>
</shape>

自定义控制器布局

要彻底改变控制器的布局，你需要创建自定义布局文件并通过controller_layout_id属性指定：

<com.google.android.exoplayer2.ui.PlayerControlView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:controller_layout_id="@layout/custom_controller"/>

然后创建res/layout/custom_controller.xml文件，定义自己的控制器布局：

<!-- 简化版自定义控制器布局 -->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom"
    android:background="#CC000000"
    android:orientation="vertical">

    <!-- 进度条 -->
    <com.google.android.exoplayer2.ui.DefaultTimeBar
        android:id="@id/exo_progress"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="16dp"
        android:layout_marginRight="16dp"
        app:bar_height="4dp"
        app:scrubber_color="#FF4081"/>

    <!-- 控制按钮 -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:gravity="center_vertical"
        android:paddingLeft="16dp"
        android:paddingRight="16dp">

        <ImageButton
            android:id="@id/exo_rew"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:src="@drawable/exo_icon_rewind"/>

        <ImageButton
            android:id="@id/exo_play"
            android:layout_width="48dp"
            android:layout_height="48dp"
            android:layout_marginLeft="16dp"
            android:layout_marginRight="16dp"
            android:src="@drawable/exo_icon_play"/>

        <ImageButton
            android:id="@id/exo_ffwd"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:src="@drawable/exo_icon_fastforward"/>

    </LinearLayout>
</LinearLayout>

这个自定义布局将进度条放在控制按钮上方，并修改了滑块颜色。注意所有控件的ID必须使用ExoPlayer预定义的ID（如@id/exo_progress、@id/exo_play等），以便PlayerControlView能够正确识别和绑定这些控件。

高级自定义：创建自定义TimeBar

如果以上方法都无法满足需求，你可以通过实现TimeBar接口来创建完全自定义的进度条。

实现TimeBar接口

创建一个新类继承View并实现TimeBar接口：

public class CustomTimeBar extends View implements TimeBar {
    private final Paint playedPaint;
    private final Paint bufferedPaint;
    private final Paint unplayedPaint;
    private long duration;
    private long position;
    private long bufferedPosition;
    private final CopyOnWriteArraySet<OnScrubListener> listeners = new CopyOnWriteArraySet<>();

    public CustomTimeBar(Context context) {
        super(context);
        playedPaint = new Paint();
        playedPaint.setColor(Color.RED);
        // 初始化其他画笔...
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        // 绘制自定义进度条
        int width = getWidth();
        int height = getHeight();
        
        // 绘制背景（未播放部分）
        canvas.drawRect(0, 0, width, height, unplayedPaint);
        
        // 绘制缓冲部分
        float bufferedWidth = (float) bufferedPosition / duration * width;
        canvas.drawRect(0, 0, bufferedWidth, height, bufferedPaint);
        
        // 绘制已播放部分
        float playedWidth = (float) position / duration * width;
        canvas.drawRect(0, 0, playedWidth, height, playedPaint);
        
        // 绘制自定义滑块
        canvas.drawCircle(playedWidth, height/2, 10, scrubberPaint);
    }

    @Override
    public void setPosition(long position) {
        this.position = position;
        invalidate();
    }

    // 实现其他TimeBar接口方法...
}

在布局中使用自定义TimeBar

然后在控制器布局中使用这个自定义进度条：

<com.yourpackage.CustomTimeBar
    android:id="@id/exo_progress"
    android:layout_width="match_parent"
    android:layout_height="8dp"/>

通过这种方式，你可以实现任何想象中的进度条效果，包括特殊形状、动画效果等。

总结与最佳实践

通过本文介绍的方法，你可以实现从简单到复杂的各种进度条自定义效果。以下是一些最佳实践建议：

1. 优先使用XML属性：对于简单的颜色和尺寸调整，使用XML属性是最简单高效的方式。

2. 合理使用自定义布局：当需要调整控制器整体布局时，使用自定义布局文件。

3. 注意性能：自定义绘制时要注意性能，避免在onDraw中创建对象，尽量使用硬件加速。

4. 测试各种场景：确保自定义进度条在各种情况下都能正常工作，包括直播、广告、缓冲等场景。

5. 考虑可访问性：确保自定义进度条支持辅助功能，如屏幕阅读器、键盘导航等。

通过这些自定义方法，你可以打造出与App风格完美匹配的播放器进度条，提升用户体验。更多关于ExoPlayer自定义的内容，可以参考官方文档（docs/customization.md）。

希望本文能帮助你打造出漂亮实用的播放进度条！如果你有其他自定义技巧或问题，欢迎在评论区分享讨论。别忘了点赞收藏，以便日后参考！