如果移动端访问不佳，请使用–>GitHub版

背景

设计师给的设计图完全依照 IOS 的标准来的，导致很多细节的控件都得自己重写，最近的设计图中有显示滚动条，Android 默认的滚动条样式(带描边)和设计图格格不入，无奈，只好研究下自定义 Scrollbar 样式。这里稍微整理下。

知识点

在ListView/ScrollView/RecyclerView中添加属性：

android:scrollbars="vertical"

android:scrollbarTrackVertical="@drawable/xxx_vertical_track"

android:scrollbarThumbVertical="@drawable/xxx_vertical_thumb"

android:scrollbars="horizontal"

android:scrollbarTrackHorizontal="@drawable/xxx_horizontal_track"

android:scrollbarThumbHorizontal="@drawable/xxx_horizontal_thumb"

android:scrollbarStyle="outsideInset"

android:scrollbarSize="4dp"

属性

效果

scrollbarThumbVertical[Horizontal]

短条

scrollbarTrackVertical[Horizontal]

长条，即背景

即scrollbaTrackxxx，scrollbarThumbxxx自定义的 xml 文件，放在Drawable中，track是指长条，thumb是指短条，然后再 xml 中定义短条和长条的样式。

需要注意

其中，scrollbaTrackxxx、scrollbarThumbxxx可以使用：

Shape自定义 Drawable

图片

.9.png

@color/xxx的方式使用颜色值

不可以直接使用#xxxxxx颜色值

android:scrollbarStyle

android:scrollbarStyle可以定义滚动条的样式和位置，可选值有insideOverlay、insideInset、outsideOverlay、outsideInset四种。

其中inside和outside分别表示是否在 view 的 padding 区域内，overlay和inset表示覆盖在 view 上或是插在 view 后面，所以四种值分别表示：

属性值

效果

insideOverlay

默认值，表示在padding区域内并且覆盖在view上

insideInset

表示在padding区域内并且插入在view后面

outsideOverlay

表示在padding区域外并且覆盖在view上

outsideInset

表示在padding区域外并且插入在view后面

Demo

下面是两个Demo：

color:

#CCFF6464

#00000000

drawable:scrollbar_vertical_thumb

Demo 1

layout：

android:scrollbarStyle="outsideOverlay"

android:scrollbarThumbVertical="@drawable/scrollbar_vertical_thumb"

android:scrollbarSize="3dp"

android:scrollbars="vertical"

Demo 2

layout：

android:scrollbarStyle="outsideOverlay"

android:scrollbarThumbVertical="@color/red_square"

android:scrollbarSize="3dp"

android:scrollbars="vertical"

效果图

默认样式 :

Demo 1 :

Demo 2：

总结

在查资料的过程中，发现滚动条也可以使用代码来画，这里不做过多介绍，有兴趣的可以研究一下。

PS: