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 区域的差别,那上面的布局稍作修改。那么看下图:

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 技术工厂 设计师:CSDN官方博客 返回首页
实付 39.90元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值