如果移動端訪問不佳，請使用–>GitHub版

背景

設計師給的設計圖完全依照 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：

總結

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

PS:

你可以關注的我Github、CSDN和微博