Android必知必會-自定義Scrollbar樣式

設計師給的設計圖完全依照 IOS 的標準來的，導致很多細節的控件都得自己重寫，最近的設計圖中有顯示滾動條，Android 默認的滾動條樣式（帶描邊）和設計圖格格不入，無奈，只好研究下自定義 Scrollbar 樣式。這里稍微整理下。

知識點

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

<!-- 情況A ：垂直滾動條-->
android:scrollbars="vertical"
android:scrollbarTrackVertical="@drawable/xxx_vertical_track"
android:scrollbarThumbVertical="@drawable/xxx_vertical_thumb"
<!-- 情況B ：水平滾動條-->
android:scrollbars="horizontal"
android:scrollbarTrackHorizontal="@drawable/xxx_horizontal_track"
android:scrollbarThumbHorizontal="@drawable/xxx_horizontal_thumb"

<!-- 其他通用的屬性 -->
<!-- 1.定義滾動條的樣式和位置 -->
android:scrollbarStyle="outsideInset"
<!-- 2.定義滾動條的大小，垂直時指寬度，水平時指高度 -->
android:scrollbarSize="4dp"

即 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 后面，所以四種值分別表示：

Demo

下面是兩個Demo：

color:

<color name="red_square">#CCFF6464</color>
<color name="transparent">#00000000</color>

drawable:scrollbar_vertical_thumb

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 填充 -->
    <solid android:color="#66000000"/>
    <!-- 圓角 -->
    <corners android:radius="1dp" />
</shape>

Demo 1

layout：

android:scrollbarStyle="outsideOverlay"
android:scrollbarThumbVertical="@drawable/scrollbar_vertical_thumb"
<!-- 
scrollbarTrackVertical設為透明或者直接不設置即可
android:scrollbarTrackVertical="@color/transparent"
再次強調：scrollbarThumbVertical、scrollbarTrackVertical 不可以直接設置為顏色值,但可以使用@color的方式使用顏色值
-->
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

總結

在查資料的過程中，發現滾動條也可以使用代碼來畫，這里不做過多介紹，有興趣的可以研究一下。

via： http://likfe.github.io/2016/05/16/diyScrollbar/