Android ScrollView scrollbarStyle 样式详解

ScrollView 当内容超过了整个屏幕或者容器的时候需要使用 ScrollView

并且 ScrollView 的直接子元素只能有一个。

ScrollView 的用法非常简单，这里主要说的是 ScrollView 中 ScrollBar 的用法：

 

1，普通样式的 ScrollBar(默认样式)，如下图所示:

2，下面再来看一个比较绚的效果：

布局文件：

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:scrollbarTrackVertical="@drawable/scrollbar_vertical_track"
    android:scrollbarThumbVertical="@drawable/scrollbar_vertical_thumb"
    android:scrollbarSize="12dip">
                 ......

</ScrollView>

scrollbar_vertical_track.xml：

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient android:startColor="#505050" android:endColor="#C0C0C0"
            android:angle="0"/>
    <corners android:radius="0dp" />
</shape>

scrollbar_vertical_thumb.xml:

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient android:startColor="#3333FF" android:endColor="#8080FF"
            android:angle="0"/>
    <corners android:radius="6dp" />
</shape>

3，ScrollView 中 ScrollBar 的 style

该属性可以通过 xml 文件配置如：

android:scrollbarStyle="insideInset" 

也可以通过 Java 代码配置：

findViewById(R.id.view3).setScrollBarStyle(View.SCROLLBARS_INSIDE_INSET);

大致可以设置 4 个属性：

• outsideInset：该 ScrollBar 显示在视图(view)的边缘，增加了 view 的 padding. 如果可能的话，该 ScrollBar 仅仅覆盖这个 view 的背景.
• outsideOverlay：该 ScrollBar 显示在视图(view)的边缘，不增加 view 的 padding，该 ScrollBar 将被半透明覆盖
• insideInset：该 ScrollBar 显示在 padding 区域里面，增加了控件的 padding 区域，该 ScrollBar 不会和视图的内容重叠.
• insideOverlay：该 ScrollBar 显示在内容区域里面，不会增加了控件的 padding 区域，该 ScrollBar 以半透明的样式覆盖在视图(view)的内容上.

 

下面通过例子来具体分析下：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >


        <ScrollView
            android:layout_width="100dip"
            android:layout_height="120dip"
            android:background="#00FF00"
            android:paddingRight="12dip"
            android:scrollbarStyle="outsideInset" >


            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="#60AA60"
                android:text="@string/scrollbar_3_text"
                android:textColor="#000000" />
        </ScrollView>


        <ScrollView
            android:id="@+id/view3"
            android:layout_width="100dip"
            android:layout_height="120dip"
            android:background="#00FF00"
            android:paddingRight="12dip"
            android:scrollbarStyle="outsideOverlay" >


            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="#60AA60"
                android:text="@string/scrollbar_3_text"
                android:textColor="#000000" />
        </ScrollView>
    </LinearLayout>


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >


        <ScrollView
            android:id="@+id/view4"
            android:layout_width="100dip"
            android:layout_height="120dip"
            android:background="@android:drawable/edit_text"
            android:scrollbarStyle="insideInset" >


            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="@string/scrollbar_3_text"
                android:textColor="#000000" />
        </ScrollView>


        <ScrollView
            android:id="@+id/view5"
            android:layout_width="100dip"
            android:layout_height="120dip"
            android:background="@android:drawable/edit_text"
            android:scrollbarStyle="insideOverlay" >


            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="@string/scrollbar_3_text"
                android:textColor="#000000" />
        </ScrollView>
    </LinearLayout>


</LinearLayout>

ScrollView 的显示结果对比图：

 

但是第 3、4 两张图并没有说明 insideInset 和 insideOverLay 的 padding 区域的差别，那上面的布局稍作修改。那么看下图：