Android Scrollbar理解

Scrollbar可以采用垂直或者水平，原理相同，下面就通过垂直的scrollbar带你玩转它(很简单)

自定义Scrollbar采用默认大小及样式

默认尺寸及Style.png

GridView布局如下

<com.base.module.grandstream.launcher.widget.MyGridView
    android:id="@+id/folder_gv"
    android:layout_width="180px"
    android:layout_height="180px"
    android:layout_centerInParent="true"
    android:background="@mipmap/bg_menu_files_bg"
    android:listSelector="@android:color/transparent"
    android:numColumns="2"
    android:padding="10px"
    android:scrollbarThumbVertical="@drawable/scrollbar_vertical_thumb"
    android:scrollbarTrackVertical="@android:color/holo_orange_dark" />

GridView总宽度为180px,padding为10px，每个app区域也就是蓝色区域为80px。
drawable/scrollbar_vertical_thumb.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape>
            <!--此处指定高度不起作用-->
            <corners android:radius="2px"></corners>
            <solid android:color="#ff0000" />
        </shape>
    </item>
</layer-list>

可以看到滑道上下充满布局且不包括padding区域，距离右侧也是padding宽度，其可以覆盖在其他View之上(例如蓝色框区域)，滑块和滑道宽度是相同的。

自定义Scrollbar大小

scrollbarSize 只有在指定了scrollbarThumbVertical后才会生效。

设置scrollbarSize为10px，显示效果如下

自定义Scollbar尺寸定义.png

GridView布局和上面相同，只加入android:scrollbarSize="10px"，那么scrollbarTrackVertical和scrollbarThumbVertical宽度均为10px。
滑道为橙色,那滑块为什么看起来窄很多，其实滑块也是10px，只不过显示的图片在左右中间，且宽度只有6px。滑块重新定义为如下
drawable/scrollbar_vertical_thumb.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:width="6px"
        android:height="60px"
        android:left="2px"
        android:top="10px">
        <shape>
            <!--此处指定高度不起作用-->
            <corners android:radius="3px"></corners>
            <solid android:color="#ff0000" />
        </shape>
    </item>
</layer-list>

红色滑块，宽度6px,高度60px，距离scrollbar的左端为2px,顶端为10px,从而如上图显示效果。

Scrollbar内置风格(必须掌握)

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

属性值	效果
insideOverlay	默认值 ，表示绘制在padding区域内并且覆盖在view上
insideInset	表示在padding区域内并且插入在view后面
outsideOverlay	表示在padding区域外并且覆盖在view上
outsideInset	表示在padding区域外并且插入在view后面

第一次读上面介绍我是没读懂，始终没理解padding区域内，其实padding区域内，并不是说绘制在padding上，而是View除了padding的部分，也就是所说的padding区域以内。通过下面示例就立马明白了。

insideOverlay	insideInset	outsideOverlay	outsideInset

上面四种样式均基于之前GridView布局中尺寸

1. insideOverlay
   padding10px，蓝色区域为80px，滑动条从右padding区域内的右边缘向左以覆盖模式绘制，会覆盖在蓝色区域上。
2. insideInset
   padding10px,蓝色区域被挤压为75px,滑动条从右padding区域内的右边缘向左以插入模式绘制，插入到padding区域内,会占据空间。Inset就是插入的意思，由于可用区域剩余(180-10*2-10)等于150px,那么蓝色区域就只剩余150/2=75px
3. outsideOverlay
   padding依然为10px，但可以看到右侧padding已经看不到了，这是因为滑动条是从View的右边缘以覆盖模式开始绘制，而不是从右padding区域内的右边缘开始绘制，如果滑动条宽度大于右padding,那么滑动条依然会覆盖在蓝色区域内。
4. outsideInset
   padding依然为10px,但滑动条从View的右边缘以插入模式绘制，导致右padding向左移动，从而padding区域内空间压缩，导致蓝色区域剩余75px。

总结

scrollbar核心已经理解，剩下就是style的选取，以及滑块(scrollbarThumbVertical)和滑道(scrollbarTrackVertical)图片的绘制。