Android 自定义 Scrollbar

概述

在 Android 开发中，我们经常需要使用滚动条（Scrollbar）来实现对长列表的滚动操作。默认情况下，Android 提供了自带的滚动条样式，但有时我们可能需要自定义滚动条的样式以满足设计需求。本文将介绍如何在 Android 中自定义滚动条，并提供示例代码帮助读者理解。

基本原理

Android 的滚动条是通过 View 的 ScrollBarDrawable 和 ScrollBarStyle 属性来实现的。默认情况下，ScrollBarDrawable 使用系统自带的样式，而 ScrollBarStyle 定义了滚动条的显示方式。

要自定义滚动条，我们需要创建一个自定义的 ScrollBarDrawable，并设置给目标 View 的 ScrollBarStyle 属性。自定义的 ScrollBarDrawable 可以继承自 ScrollingView 或 View 类，并重写相应的方法来绘制滚动条的样式。

自定义滚动条的实现步骤

下面将以一个简单的示例来说明如何在 Android 中自定义滚动条。

步骤 1：创建自定义的 ScrollBarDrawable 类

我们首先创建一个名为 CustomScrollBarDrawable 的类，继承自 ScrollBarDrawable。

class CustomScrollBarDrawable extends ScrollBarDrawable {
    // ...
}

步骤 2：重写绘制方法

在 CustomScrollBarDrawable 类中，我们需要重写 drawVerticalScrollBar 和 drawHorizontalScrollBar 方法来绘制垂直和水平滚动条。

@Override
protected void drawVerticalScrollBar(Canvas canvas, Drawable scrollBar, int left, int top, int right, int bottom) {
    // 绘制垂直滚动条逻辑
}

@Override
protected void drawHorizontalScrollBar(Canvas canvas, Drawable scrollBar, int left, int top, int right, int bottom) {
    // 绘制水平滚动条逻辑
}

在这两个方法中，我们可以使用 canvas 对象来绘制滚动条的样式，比如绘制背景、滚动条的形状和颜色等。

步骤 3：设置自定义滚动条样式

在目标 View 的代码中，我们需要获取滚动条属性，并设置自定义的 ScrollBarDrawable 给 ScrollBarStyle。

CustomScrollBarDrawable scrollBarDrawable = new CustomScrollBarDrawable();
scrollBarDrawable.setScrollbarThumbVertical(ContextCompat.getDrawable(this, R.drawable.scrollbar_vertical_thumb));
scrollBarDrawable.setScrollbarTrackVertical(ContextCompat.getDrawable(this, R.drawable.scrollbar_vertical_track));

view.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY);
view.setVerticalScrollBarEnabled(true);
view.setScrollBarDrawable(scrollBarDrawable);

在上述代码中，我们设置了垂直滚动条的样式，使用了自定义的 ScrollBarDrawable 类，并通过 setScrollbarThumbVertical 和 setScrollbarTrackVertical 方法设置了滚动条的拇指和轨道的样式。

步骤 4：添加滚动条资源文件

为了实现自定义滚动条的样式，我们需要在项目中添加相应的资源文件。在 res 目录下创建 drawable 和 drawable-v21 文件夹，并添加以下资源文件：

  1. scrollbar_vertical_thumb.xml：定义垂直滚动条拇指的样式。
<shape xmlns:android="
    <solid android:color="@color/scrollbar_thumb_color" />
    <corners android:radius="@dimen/scrollbar_thumb_radius" />
</shape>
  1. scrollbar_vertical_track.xml：定义垂直滚动条轨道的样式。
<shape xmlns:android="
    <solid android:color="@color/scrollbar_track_color" />
    <corners android:radius="@dimen/scrollbar_track_radius" />
</shape>

步骤 5：设置滚动条样式的资源文件

在 res 目录下的 values 文件夹中，创建一个名为 attrs.xml 的文件，并添加以下内容：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <attr name="scrollbar_thumb_color" format="color" />
    <attr name="scrollbar_thumb_radius" format="dimension