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

  1. 云栖社区>
  2. 博客>
  3. 正文

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

雪梦科技 2012-02-27 15:26:00 浏览784
展开阅读全文

更多精彩内容,请点击阅读:《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的属性取值以及含义如下:

常量

取值

描述

none

0x00000000

不显示滚动条

horizontal

0x00000100

只显示横向滚动条

vertical

0x00000200

只显示竖直滚动条


知识点5:android:scrollbarFadeDuration ="100" 设置滚动条淡出效果(从有到慢慢的变淡直至消失)时间,以milliseconds(毫秒)为单位。

知识点6:android:scrollbarSize="12dip" 设置竖直滚动条的宽度或者横向滚动条的高度。

知识点7:android:scrollbarStyle的属性取值以及含义如下:

常量

取值

描述

insideOverlay

0x0

Insidethe padding and overlaid

insideInset

0x01000000

Insidethe padding and inset

outsideOverlay

0x02000000

Edgeof the view and overlaid

outsideInset

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);
    }
}


预览效果:

                          




网友评论

登录后评论
0/500
评论
雪梦科技
+ 关注