更多精彩内容,请点击阅读:《API Demos 2.3 学习笔记》
下面简单介绍下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的属性取值以及含义如下:
常量 |
取值 |
描述 |
---|---|---|
|
0x00000000 |
不显示滚动条 |
|
0x00000100 |
只显示横向滚动条 |
|
0x00000200 |
只显示竖直滚动条 |
知识点5:android:scrollbarFadeDuration ="100" 设置滚动条淡出效果(从有到慢慢的变淡直至消失)时间,以milliseconds(毫秒)为单位。
知识点6:android:scrollbarSize="12dip" 设置竖直滚动条的宽度或者横向滚动条的高度。
知识点7:android:scrollbarStyle的属性取值以及含义如下:
知识点6:android:scrollbarSize="12dip" 设置竖直滚动条的宽度或者横向滚动条的高度。
知识点7:android:scrollbarStyle的属性取值以及含义如下:
常量 |
取值 |
描述 |
---|---|---|
|
0x0 |
Insidethe padding and overlaid |
|
0x01000000 |
Insidethe padding and inset |
|
0x02000000 |
Edgeof the view and overlaid |
|
0x03000000 |
Edgeof the view and inset |
知识点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 控件 --> <!-- 这是ScrollView的一个简单例子。ScrollView控件内置一个包含若干个TextView控件的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 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 控件 --> <!-- 这是ScrollView的一个简单例子。ScrollView控件内置一个包含若干个TextView控件的LinearLayout布局控件。 --> <!-- android:scrollbarTrackVertical="@drawable/scrollbar_vertical_track" 设置竖直滚动条背景的drawable--> <!-- android:scrollbarThumbVertical="@drawable/scrollbar_vertical_thumb" 设置竖直滚动条的drawable--> <!-- android:scrollbarSize="12dip" 设置竖直滚动条的宽度或者横向滚动条的高度。--> <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"?> <!-- 演示如何使用 ScrollView 控件 --> <!-- 这里演示了5个 ScrollView控件,并分别自定义了它们的属性 --> <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 控件1 --> <!-- android:background="#FF0000" 设置滚动条背景颜色为 #FF0000 --> <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 控件2 --> <!-- android:background="##00FF00" 设置滚动条背景颜色为 ##00FF00 --> <!-- android:paddingRight="12dip" 设置ScrollView内部的控件距离ScrollView右边界 12dip --> <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 控件3 --> <!-- android:background="@android:drawable/edit_text" 设置滚动条背景颜色为 android内置的背景颜色 @android:drawable/edit_text --> <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> <!-- ScrollView 控件4 --> <!-- android:background="@android:drawable/edit_text" 设置滚动条背景颜色为 android内置的背景颜色 @android:drawable/edit_text --> <!-- android:scrollbarStyle="outsideOverlay" 设置ScrollView滚动条类型为 outsideOverlay--> <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 控件5 --> <!-- android:background="@android:drawable/edit_text" 设置滚动条背景颜色为 android内置的背景颜色 @android:drawable/edit_text --> <!-- android:scrollbarStyle="outsideInset" 设置ScrollView滚动条类型为 outsideInset--> <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); } }
预览效果: