Android 自定义滚动条

by Jack Pu

做前端肯定离不开设计师要求自定义滚动条内容，相对于 iOS / Web ,Android 相对比较容易控制，我们可以非常方便的改变 View 或者 WebView 的样式。Android 提供了两个 xml 属性

他们分别表示我们需要改变滚动条的拖拽部分和底部轨道的样式。

如下图

比较常规的设计，我们实现一个带圆角的矩形，我们在 drawable 目录下新建两个文件

custom_scrollbar_thumbnail.xml

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

    <solid android:color="#c4de17" />
    <corners android:radius="2dp" />
    <size android:width="4dp"/>
    <padding
        android:left="0.5dp"
        android:right="0.5dp" />

</shape>

custom_scrollbar_track.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <solid android:color="#05000000" />
    <corners android:radius="2dp" />
    <size android:width="4dp"/>
    <padding
        android:left="0.5dp"
        android:right="0.5dp" />
</shape>

在需要变动滚动条样式的组件里面申明引用

比如 webview


            <WebView
                android:id="@+id/contentWebView"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scrollbarThumbVertical="@drawable/custom_scrollbar_thumbnail"
                android:scrollbarTrackVertical="@drawable/custom_scrollbar_track"
                />

扩展阅读