自定义滚动条Android

Question

如何制作此滚动条：

Answer 1

设置android：scrollbarThumbVertical不是最佳解决方案，它会根据列表大小拉伸拇指图像......

你最好使用android：fastScrollThumbDrawable

以下是一个例子：

<ListView
    android:id="@+id/list"
    android:layout_width="match_parent"
    android:layout_height="fill_parent"
    android:fadeScrollbars="false"
    android:scrollbarAlwaysDrawVerticalTrack="true"
    android:scrollbarSize="0dip"
    android:scrollbarStyle="outsideInset"
    android:fastScrollAlwaysVisible="true"
    android:fastScrollEnabled="false"
    android:scrollbars="vertical" />

然后在styles.xml AppTheme上添加

<style name="AppTheme" parent="AppBaseTheme">
    <item name="android:fastScrollThumbDrawable">@drawable/scroller_style</item>
</style>

并在res / drawable文件夹中创建文件：scroller_style.xml，其内容为

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

    <item android:drawable="@drawable/scroller_active" android:state_pressed="true"/>
    <item android:drawable="@drawable/scroller"/>

</selector>

其中scroller是你的拇指图像，scroller_active是你的活动拇指图像（可选）

Answer 2

This perfect example指导您完成解决方案。

我选择了主要部件以便快速使用。如果有人需要更多细节，请查看完整的文章。

垂直ScrollBar Track Drawable

创建新文件res/drawable/scrollbar_vertical_track.xml并复制粘贴以下内容。此文件定义滚动条轨道的形状。

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

    <gradient
        android:angle="0"
        android:endColor="#9BA3C5"
        android:startColor="#8388A4" />

    <corners android:radius="6dp" />

</shape>

垂直ScrollBar Thumb Drawable

创建新文件res/drawable/scrollbar_vertical_thumb.xml并复制粘贴以下内容。此文件定义滚动条拇指的形状。

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

    <gradient
        android:angle="0"
        android:endColor="#005A87"
        android:startColor="#007AB8" />

    <corners android:radius="6dp" />

</shape>

• 这些drawable允许设置轨道的形状，颜色和拇指 滚动条分别。
• 在这里，我们创建了一个圆形的轨道和拇指 通过为。提供半径属性滚动条。

<强> styles.xml

创建以下样式并将其应用于ScrollView。 打开res/values/styles.xml并进行修改，使其内容如下所示。

<resources xmlns:android="http://schemas.android.com/apk/res/android">

    <style name="scrollbar_shape_style">
        <item name="android:scrollbarAlwaysDrawVerticalTrack">true</item>
        <item name="android:scrollbarStyle">outsideOverlay</item>
        <item name="android:scrollbars">vertical</item>
        <item name="android:fadeScrollbars">true</item>
        <item name="android:scrollbarThumbVertical">@drawable/scrollbar_vertical_thumb</item>
        <item name="android:scrollbarTrackVertical">@drawable/scrollbar_vertical_track</item>
        <item name="android:scrollbarSize">12dp</item>
        <item name="android:scrollbarFadeDuration">2000</item>
        <item name="android:scrollbarDefaultDelayBeforeFade">1000</item>
    </style>

</resources>

将自定义样式应用于ScrollView：

我们将样式scrollbar_shape_style应用于使用shape drawable的ScrollView。

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    style="@style/scrollbar_shape_style"
    ...
       >

...
</ScrollView>