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

简介:

更多精彩内容,请点击阅读:《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);
    }
}


预览效果:

                          




相关文章
|
4月前
|
人工智能 监控 安全
F5社区学习笔记:API和AI如何改变应用安全?
F5社区学习笔记:API和AI如何改变应用安全?
54 1
|
4月前
|
jenkins API 持续交付
jenkins学习笔记之十五:SonarSQube API使用
jenkins学习笔记之十五:SonarSQube API使用
|
7月前
|
XML API 数据格式
【Qt 学习笔记】QWidget的enable属性 | API的介绍
【Qt 学习笔记】QWidget的enable属性 | API的介绍
190 0
|
前端开发 API
前端学习笔记202305学习笔记第三十天-什么是mvc-c层api 前后端联动1
前端学习笔记202305学习笔记第三十天-什么是mvc-c层api 前后端联动1
75 0
|
前端开发 API
前端学习笔记202305学习笔记第三十一天-什么是mvc-c层api 前后端联动3
前端学习笔记202305学习笔记第三十一天-什么是mvc-c层api 前后端联动3
55 0
|
前端开发 API
前端学习笔记202305学习笔记第三十一天-什么是mvc-c层api 和mvc总结3
前端学习笔记202305学习笔记第三十一天-什么是mvc-c层api 和mvc总结3
48 0
|
前端开发 API
前端学习笔记202305学习笔记第三十一天-什么是mvc-c层api 和mvc总结4
前端学习笔记202305学习笔记第三十一天-什么是mvc-c层api 和mvc总结
55 0
|
9天前
|
JSON API 开发工具
淘宝实时 API 接口丨淘宝商品详情接口(Taobao.item_get)
淘宝商品详情接口(Taobao.item_get)允许开发者获取商品的详细信息,包括基本信息、描述、卖家资料、图片、属性及销售情况等。开发者需注册账号、创建应用并获取API密钥,通过构建请求获取JSON格式数据,注意遵守平台规则,合理使用接口,确保数据准确性和时效性。
|
10天前
|
JSON 安全 API
Python调用API接口的方法
Python调用API接口的方法
50 5
|
10天前
|
JSON 缓存 监控
淘宝商品详情接口(Taobao.item_get)丨淘宝API接口指南
淘宝商品详情接口(Taobao.item_get)允许开发者通过HTTP GET方法获取淘宝商品的详细信息,包括商品ID、价格、库存等。请求需包含key、secret、num_iid等必选参数,支持缓存及多种返回格式。此接口广泛应用于电商数据分析、商品选品、价格监控等领域,提升商家运营效率。