自定义滚动条Android

Question

我如何制作这个滚动条:

Answer 1

要更改拇指图像,您只需创建以下样式并将其应用于ScrollView:

<style name="your_style_name">  
    <item name="android:scrollbarAlwaysDrawVerticalTrack">true</item>
    <item name="android:scrollbarStyle">outsideOverlay</item>
    <item name="android:scrollbars">vertical</item>
    <item name="android:fadeScrollbars">false</item>
    <item name="android:scrollbarThumbVertical">@drawable/scroller_thumb</item>
</style>

其中scroller_thumb是滚动条拇指的自定义图像.

还要注意以下属性:

1. "android:fadeScrollbars"设置为false以使拇指图像永久保留.
2. 设置为outsideOverlay的"android:scrollbarStyle"使拇指图像在"视图的边缘和覆盖"处绘制,如下所示:android:scrollbarStyle

现在,为了在滚动条下放置您想要的细线,只需将包含线条图像的图像视图添加到ScrollView的直接子节点(RelativeLayout子节点作为ScrollView的直接子节点将允许您定位图像视图的右侧 - 所以这将是我的选择).

就是这样.

Answer 2

设置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_active是您的活动拇指图像(可选)