web-dev-qa-db-ja.com

カスタムスクロールバーAndroid

このスクロールバーを作成する方法：

androidscrollbar
22
Unmerciful

つまみの画像を変更するには、次のスタイルを作成して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. 「Android：scrollbarStyle」。outsideOverlayに設定されているため、サムイメージは「ビューの端にオーバーレイされ、ここに表示されるようにオーバーレイされます」 Android：scrollbarStyle

次に、必要な細い線をスクローラーの下に配置するために、ライン画像を含む画像ビューをScrollViewの直接の子に追加します（ScrollViewの直接の子としてRelativeLayoutの子を使用すると、画像を上に配置できますビューの右側-これは私の選択でした）。

以上です。

28
Daniel L.

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はアクティブな親指の画像です（オプション）。

10
Bruno

この完璧な例 は、ソリューションをガイドします。

高速で使用できるように主要部品を選びました。詳細が必要な場合は、記事全体を確認してください。

垂直スクロールバートラックドローアブル

新しいファイルを作成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>

垂直スクロールバー親指ドローアブル

新しいファイルを作成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>
  • これらのドローアブルでは、トラックの形状、色、スクロールバーのサムをそれぞれ設定できます。
  • ここでは、の半径属性を指定して、丸みを帯びたトラックとスクロールバーのつまみを作成します。

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を、シェイプドローアブルを使用するScrollViewに適用します。

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

...
</ScrollView>
5
Alex Jolig