API Demos 2.3 学习笔记 (18)-- Views-> ScrollBars

﹏ヽ暗。殇╰゛Y 2022-06-14 04:58 81阅读 0赞

更多精彩内容，请点击阅读：**[《API Demos 2.3 学习笔记》][API Demos 2.3]**

当一个控件的内容太多，超过了控件的可视范围，就会有一部分内容无法显示出来。这时，我们需要ScrollView控件的帮忙。用ScrollView把该控件包起来，超过控件可视范围的内容，将可以通过滚动来实现浏览。  
下面简单介绍下ScrollView的创建和使用方法。

1、如下所示，由于TextView控件太多，导致一屏无法全部显示。首先，在布局文件中用 LinearLayout把这些TextView控件包起来，然后再用ScrollView把LinearLayout包起来。

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="match_parent"
 android:layout_height="wrap_content">
 
 <LinearLayout
 android:orientation="vertical"
 android:layout_width="match_parent"
 android:layout_height="wrap_content">
 
 <TextView
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:text="@string/scrollbar_1_text"/>
 
 ...中间还有若干个TextView控件
 
 <TextView
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:text="@string/scrollbar_1_text"/>
 </LinearLayout>
 </ScrollView>

2、通过  setContentView(R.layout.scrollbar1); 将上面的布局文件应用到Activity即可。  
  
下面介绍一些 ScrollView的知识点：  
  
知识点1：ScrollView内部只能有一个子元素，即不能并列两个子元素，所以需要把所有的子元素放到一个LinearLayout内部或RelativeLayout等其他布局方式。更多详情，请参考以下博文：http://www.yoyong.com/archives/114  
  
知识点2：android:scrollbarAlwaysDrawHorizontalTrack="true" 和 android:scrollbarAlwaysDrawVerticalTrack="true"    顾名思义，前者表示竖直滚动条是否一直显示，而后者表示横向滚动条是否一直显示。  
  
知识点3：android:scrollbarFadeDuration ="100" 表示 滚动条停止移动到开始淡化消失之间的延迟时间，以milliseconds（毫秒）为单位。  
  
知识点4：android:scrollbars的属性取值以及含义如下：

<table> 
 <tbody> 
 <tr> 
 <th style="border:none; padding:0cm"> 常量 </th> 
 <th style="border:none; padding:0cm"> 取值 </th> 
 <th style="border:none; padding:0cm"> 描述 </th> 
 </tr> 
 <tr> 
 <td style="border:none; padding:0cm"> <code>none</code> </td> 
 <td style="border:none; padding:0cm"> 0x00000000 </td> 
 <td style="border:none; padding:0cm"> 不显示滚动条 </td> 
 </tr> 
 <tr> 
 <td style="border:none; padding:0cm"> <code>horizontal</code> </td> 
 <td style="border:none; padding:0cm"> 0x00000100 </td> 
 <td style="border:none; padding:0cm"> 只显示横向滚动条 </td> 
 </tr> 
 <tr> 
 <td style="border:none; padding:0cm"> <code>vertical</code> </td> 
 <td style="border:none; padding:0cm"> 0x00000200 </td> 
 <td style="border:none; padding:0cm"> 只显示竖直滚动条 </td> 
 </tr> 
 </tbody> 
</table>

知识点5：android:scrollbarFadeDuration ="100" 设置滚动条淡出效果（从有到慢慢的变淡直至消失）时间，以milliseconds（毫秒）为单位。  
  
知识点6：android:scrollbarSize="12dip" 设置竖直滚动条的宽度或者横向滚动条的高度。  
  
知识点7：android:scrollbarStyle的属性取值以及含义如下：

<table> 
 <tbody> 
 <tr> 
 <th style="border:none; padding:0cm"> 常量 </th> 
 <th style="border:none; padding:0cm"> 取值 </th> 
 <th style="border:none; padding:0cm"> 描述 </th> 
 </tr> 
 <tr> 
 <td style="border:none; padding:0cm"> <code>insideOverlay</code> </td> 
 <td style="border:none; padding:0cm"> 0x0 </td> 
 <td style="border:none; padding:0cm"> Insidethe padding and overlaid </td> 
 </tr> 
 <tr> 
 <td style="border:none; padding:0cm"> <code>insideInset</code> </td> 
 <td style="border:none; padding:0cm"> 0x01000000 </td> 
 <td style="border:none; padding:0cm"> Insidethe padding and inset </td> 
 </tr> 
 <tr> 
 <td style="border:none; padding:0cm"> <code>outsideOverlay</code> </td> 
 <td style="border:none; padding:0cm"> 0x02000000 </td> 
 <td style="border:none; padding:0cm"> Edgeof the view and overlaid </td> 
 </tr> 
 <tr> 
 <td style="border:none; padding:0cm"> <code>outsideInset</code> </td> 
 <td style="border:none; padding:0cm"> 0x03000000 </td> 
 <td style="border:none; padding:0cm"> Edgeof the view and inset </td> 
 </tr> 
 </tbody> 
</table>

知识点8：android:scrollbarTrackHorizontal="@drawable/scrollbar\_horizontal\_track"  和android:scrollbarTrackVertical="@drawable/scrollbar\_vertical\_track" 前者用来设置横向滚动条背景的drawable，而后者用来设置竖直滚动条背景的drawable。  
  
知识点9：android:scrollbarThumbHorizontal="@drawable/scrollbar\_horizontal\_thumb"  和android:scrollbarThumbVertical="@drawable/scrollbar\_vertical\_thumb"前者用来设置横向滚动条的drawable，而后者用来设置竖直滚动条的drawable。  
  
下面我们进行实例代码解析：  
  
实例一、Basic   
res-layout-scrollbar1.xml

<?xml version="1.0" encoding="utf-8"?>
 
 
 
 
 
 <ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="match_parent"
 android:layout_height="wrap_content">
 
 <LinearLayout
 android:orientation="vertical"
 android:layout_width="match_parent"
 android:layout_height="wrap_content">
 
 <TextView
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:text="@string/scrollbar_1_text"/>
 <TextView
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:text="@string/scrollbar_1_text"/>
 <TextView
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:text="@string/scrollbar_1_text"/>
 <TextView
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:text="@string/scrollbar_1_text"/>
 <TextView
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:text="@string/scrollbar_1_text"/>
 <TextView
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:text="@string/scrollbar_1_text"/>
 <TextView
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:text="@string/scrollbar_1_text"/>
 <TextView
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:text="@string/scrollbar_1_text"/>
 <TextView
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:text="@string/scrollbar_1_text"/>
 <TextView
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:text="@string/scrollbar_1_text"/>
 <TextView
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:text="@string/scrollbar_1_text"/>
 <TextView
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:text="@string/scrollbar_1_text"/>
 <TextView
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:text="@string/scrollbar_1_text"/>
 <TextView
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:text="@string/scrollbar_1_text"/>
 <TextView
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:text="@string/scrollbar_1_text"/>
 <TextView
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:text="@string/scrollbar_1_text"/>
 <TextView
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:text="@string/scrollbar_1_text"/>
 <TextView
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:text="@string/scrollbar_1_text"/>
 <TextView
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:text="@string/scrollbar_1_text"/>
 <TextView
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:text="@string/scrollbar_1_text"/>
 <TextView
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:text="@string/scrollbar_1_text"/>
 <TextView
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:text="@string/scrollbar_1_text"/>
 <TextView
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:text="@string/scrollbar_1_text"/>
 <TextView
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:text="@string/scrollbar_1_text"/>
 <TextView
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:text="@string/scrollbar_1_text"/>
 <TextView
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:text="@string/scrollbar_1_text"/>
 <TextView
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:text="@string/scrollbar_1_text"/>
 <TextView
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:text="@string/scrollbar_1_text"/>
 <TextView
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:text="@string/scrollbar_1_text"/>
 <TextView
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:text="@string/scrollbar_1_text"/>
 <TextView
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:text="@string/scrollbar_1_text"/>
 <TextView
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:text="@string/scrollbar_1_text"/>
 <TextView
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:text="@string/scrollbar_1_text"/>
 <TextView
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:text="@string/scrollbar_1_text"/>
 <TextView
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:text="@string/scrollbar_1_text"/>
 </LinearLayout>
 </ScrollView>

src-com.example.android.apis.view-ScrollBar1.java

package com.example.android.apis.view;
    
    import com.example.android.apis.R;
    
    import android.app.Activity;
    import android.os.Bundle;
    
    
    public class ScrollBar1 extends Activity {
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
    
            setContentView(R.layout.scrollbar1);
        }
    }

实例二、Fancy  
    res-layout-scrollbar2.xml

<?xml version="1.0" encoding="utf-8"?>
 
 
 
 
 
 
 
 
 <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">
 
 <LinearLayout
 android:orientation="vertical"
 android:layout_width="match_parent"
 android:layout_height="wrap_content">
 
 <TextView
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:text="@string/scrollbar_2_text"/>
 <TextView
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:text="@string/scrollbar_2_text"/>
 <TextView
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:text="@string/scrollbar_2_text"/>
 <TextView
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:text="@string/scrollbar_2_text"/>
 <TextView
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:text="@string/scrollbar_2_text"/>
 <TextView
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:text="@string/scrollbar_2_text"/>
 <TextView
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:text="@string/scrollbar_2_text"/>
 <TextView
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:text="@string/scrollbar_2_text"/>
 <TextView
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:text="@string/scrollbar_2_text"/>
 <TextView
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:text="@string/scrollbar_2_text"/>
 <TextView
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:text="@string/scrollbar_2_text"/>
 <TextView
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:text="@string/scrollbar_2_text"/>
 <TextView
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:text="@string/scrollbar_2_text"/>
 <TextView
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:text="@string/scrollbar_2_text"/>
 <TextView
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:text="@string/scrollbar_2_text"/>
 <TextView
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:text="@string/scrollbar_2_text"/>
 <TextView
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:text="@string/scrollbar_2_text"/>
 <TextView
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:text="@string/scrollbar_2_text"/>
 <TextView
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:text="@string/scrollbar_2_text"/>
 <TextView
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:text="@string/scrollbar_2_text"/>
 <TextView
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:text="@string/scrollbar_2_text"/>
 <TextView
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:text="@string/scrollbar_2_text"/>
 <TextView
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:text="@string/scrollbar_2_text"/>
 <TextView
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:text="@string/scrollbar_2_text"/>
 <TextView
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:text="@string/scrollbar_2_text"/>
 <TextView
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:text="@string/scrollbar_2_text"/>
 <TextView
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:text="@string/scrollbar_2_text"/>
 <TextView
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:text="@string/scrollbar_2_text"/>
 <TextView
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:text="@string/scrollbar_2_text"/>
 <TextView
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:text="@string/scrollbar_2_text"/>
 <TextView
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:text="@string/scrollbar_2_text"/>
 <TextView
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:text="@string/scrollbar_2_text"/>
 <TextView
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:text="@string/scrollbar_2_text"/>
 <TextView
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:text="@string/scrollbar_2_text"/>
 <TextView
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:text="@string/scrollbar_2_text"/>
 </LinearLayout>
 </ScrollView>

src-com.example.android.apis.view-ScrollBar2.java

package com.example.android.apis.view;
    
    import com.example.android.apis.R;
    
    import android.app.Activity;
    import android.os.Bundle;
    
    
    public class ScrollBar2 extends Activity {
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
    
            setContentView(R.layout.scrollbar2);
        }
    }

实例三、Style  
    res-layout-scrollbar3.xml

<?xml version="1.0" encoding="utf-8"?>
 
 
 
 
 <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="#FF0000">
 <LinearLayout
 android:orientation="vertical"
 android:layout_width="match_parent"
 android:layout_height="match_parent">
 
 <TextView
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:text="@string/scrollbar_2_text" />
 <TextView
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:text="@string/scrollbar_2_text" />
 <TextView
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:text="@string/scrollbar_2_text" />
 <TextView
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:text="@string/scrollbar_2_text" />
 <TextView
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:text="@string/scrollbar_2_text" />
 <TextView
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:text="@string/scrollbar_2_text" />
 <TextView
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:text="@string/scrollbar_2_text" />
 <TextView
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:text="@string/scrollbar_2_text" />
 <TextView
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:text="@string/scrollbar_2_text" />
 <TextView
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:text="@string/scrollbar_2_text" />
 </LinearLayout>
 </ScrollView>
 
 
 
 
 <ScrollView
 android:layout_width="100dip"
 android:layout_height="120dip"
 android:background="#00FF00"
 android:paddingRight="12dip">
 <TextView
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:text="@string/scrollbar_3_text"
 android:textColor="#000000"
 android:background="#60AA60" />
 </ScrollView>
 
 
 
 <ScrollView
 android:id="@+id/view3"
 android:layout_width="100dip"
 android:layout_height="120dip"
 android:background="@android:drawable/edit_text">
 <TextView
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:textColor="#000000"
 android:text="@string/scrollbar_3_text" />
 </ScrollView>
 </LinearLayout>
 
 
 
 
 
 <LinearLayout
 android:layout_width="match_parent"
 android:layout_height="wrap_content">
 <ScrollView
 android:id="@+id/view4"
 android:layout_width="100dip"
 android:layout_height="120dip"
 android:scrollbarStyle="outsideOverlay"
 android:background="@android:drawable/edit_text">
 <TextView
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:textColor="#000000"
 android:text="@string/scrollbar_3_text" />
 </ScrollView>
 
 
 
 
 <ScrollView
 android:id="@+id/view5"
 android:layout_width="100dip"
 android:layout_height="120dip"
 android:scrollbarStyle="outsideInset"
 android:background="@android:drawable/edit_text">
 <TextView
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:textColor="#000000"
 android:text="@string/scrollbar_3_text" />
 </ScrollView>
 </LinearLayout>
 </LinearLayout>

src-com.example.android.apis.view-ScrollBar3.java

package com.example.android.apis.view;
    
    import android.app.Activity;
    import android.os.Bundle;
    import android.view.View;
    
    import com.example.android.apis.R;
    
    
    public class ScrollBar3 extends Activity {
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
    
            setContentView(R.layout.scrollbar3);
            
            // 通过findViewById方法获得一个id为view3的ScrollView控件，并设置滚动条类型为 View.SCROLLBARS_INSIDE_INSET 
            findViewById(R.id.view3).setScrollBarStyle(View.SCROLLBARS_INSIDE_INSET);
        }
    }

预览效果：

![0_1330327322vECx.gif][]                           ![0_1330327330vEdv.gif][]

![0_1330327335JBRR.gif][]

欢迎大家关注我的[微信][Link 1]公众号：

[微信][Link 1]公众号：sn0wdr1am

![Center][]

[API Demos 2.3]: http://blog.csdn.net/yang_hui1986527/article/details/6707156
[0_1330327322vECx.gif]: http://hi.csdn.net/attachment/201202/27/0_1330327322vECx.gif
[0_1330327330vEdv.gif]: /images/20220614/7747ed834e7840878ad97b01822d75c9.png
[0_1330327335JBRR.gif]: /images/20220614/5bd329b2d38d458a966f46e7912a024a.png
[Link 1]: http://lib.csdn.net/base/wechat
[Center]: /images/20220614/01419de9c8c248f8825a533ec66ffca6.png