web-dev-qa-db-fra.com

Barre de défilement personnalisée Android

Comment puis-je faire cette barre de défilement:

androidscrollbar
22
Unmerciful

Pour changer l'image du pouce, vous pouvez simplement créer le style suivant et l'appliquer à votre 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>

où scroller_thumb est votre image personnalisée pour le pouce du scroller.

notez également les attributs suivants:

  1. "Android: fadeScrollbars" qui est défini sur false pour que l'image du pouce reste définitivement.
  2. "Android: scrollbarStyle" qui est défini sur outsideOverlay pour créer l'image du pouce dessinée au "bord de la vue et superposée" comme indiqué ici: Android: scrollbarStyle

Maintenant, afin de placer la ligne mince que vous voulez sous la roulette de défilement, ajoutez simplement une vue d'image contenant l'image de ligne, à l'enfant direct du ScrollView (l'enfant RelativeLayout en tant qu'enfant direct pour le ScrollView vous permettra de positionner l'image sur le côté droit de la vue - c'est donc mon choix).

et c'est tout.

28
Daniel L.

Configuration d'Android: scrollbarThumbVertical n'est pas la meilleure solution, il étirera l'image du pouce en fonction de la taille de la liste ...

Vous feriez mieux d'utiliser Android: fastScrollThumbDrawable

Voici un exemple:

<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" />

Ensuite, sur l'AppTheme styles.xml que vous ajoutez

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

et sur le dossier res/drawable vous créez le fichier: scroller_style.xml avec le contenu

<?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>

où scroller est votre image de pouce et scroller_active est votre image de pouce active (facultatif)

10
Bruno

Cet exemple parfait vous guide à travers la solution.

J'ai choisi les pièces principales pour une utilisation rapide. si quelqu'un a besoin de plus de détails, consultez l'article complet.

Piste de barre de défilement verticale à dessiner

Créez un nouveau fichier res/drawable/scrollbar_vertical_track.xml et copiez collez le contenu suivant. Ce fichier définit la forme de la piste de la barre de défilement.

<?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>

Barre de défilement verticale à dessiner

Créez un nouveau fichier res/drawable/scrollbar_vertical_thumb.xml et copiez collez le contenu suivant. Ce fichier définit la forme du curseur de la barre de défilement.

<?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>
  • Ces tiroirs permettent de définir la forme, la couleur de la piste et le pouce de la barre de défilement respectivement.
  • Ici, nous créons une piste arrondie et le pouce de la barre de défilement en fournissant un attribut de rayon pour.

styles.xml

Créez le style suivant et appliquez-le à ScrollView. Ouvert res/values/styles.xml et modifiez pour avoir le contenu comme indiqué ci-dessous.

<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>

Application du style personnalisé à ScrollView:

Nous appliquons le style scrollbar_shape_style au ScrollView qui utilise la forme dessinable.

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

...
</ScrollView>
5
Alex Jolig