Android–UI之ScrollView实例

  categories:android  tags:  author:

ScrollView和HorizontalScrollView是Android当中比较常用的两个布局容器,从字面意义上 来看也是非常的简单的,ScrollView就是一个可以滚动的View,这个滚动的方向是垂直方向的,而HorizontalScrollView则是 一个水平方向的可以滚动的View。本篇随笔可能描述性的知识比较少,最主要还是通过代码来看看如何使用这两个View。

一、ScrollView的简单介绍

首先来看看ScrollView和HorizontalScrollView这两个View的定义。ScrollView和 HorizontalScrollView都是一个布局容器,里面可以放入child View控件,我们通过其继承关系看到,ScrollView和HorizontalScrollView这两个类是ViewGroup的一个间接子类。

java.lang.Object   ↳    android.view.View        ↳    android.view.ViewGroup             ↳    android.widget.FrameLayout                  ↳    android.widget.ScrollView

java.lang.Object   ↳    android.view.View        ↳    android.view.ViewGroup             ↳    android.widget.FrameLayout                  ↳    android.widget.HorizontalScrollView

因为ScrollView和HorizontalScrollView只是两种滚动方向不同的View而已,其他方面都基本相同,所以下面只单单以ScrollView来讲解。

通过使用ScrollView,我们可以滚动其里面的子View控件,这样就允许我们控件的高度可以大于我们实际屏幕的尺寸高度。 ScrollView是一个FrameLayout,至于什么是FrameLayout,简单的来说,FrameLayout通常被用来设计成在屏幕上占 用一块地方并且里面只有一个Item,我们常用到的例如DatePicker、TimePicker这些控件都是属于FrameLayout布局的。因此 在ScrollView当中,也通常只包含一个子元素,并且这个子元素也是一个布局文件,这样我们才能在这个布局文件里面添加我们想要的任何子控件,从而 实现滚动的效果。

对于ScrollView来说,因为其是垂直方向上的滚动布局,因此通常我们给其添加一个LinearLayout的子元素,并且设置 orientation为vertical(垂直方向的)。下面我们通过一个小例子来看看如何使用我们的ScrollView来展示多张图片,并且实现图 片的垂直方向的滚动。

首先我们定义一个ScrollView,因为ScrollView也是一个ViewGroup,所以我们可以直接使用ScrollView作为我们的xml文件的根元素:

通过官方文档的继承关系可以看出,它继承自FrameLayout,所以它是一种特殊类型的FrameLayout,因为它可以使用用户滚动显示一个占据 的空间大于物理显示的视图列表。值得注意的是,ScrollView只能包含一个子视图或视图组,在实际项目中,通常包含的是一个垂直的 LinearLayout。

值得注意的是,ScrollView不能和ListView一起使用,因为ListView已经对垂直方向的滚动做了处理,它会迫使如果 ListView的内容大于物理视图的内容的时候,强制垂直滚动的效果,所以这里使用ScrollView和ListView混合使用是没有意义的, ScrollView还需要注意EditText自带的 多行输入的滚动效果,也是不可以混合使用的,如果在ScrollView中包含了多行的EditText,那EditText中自带的滚动效果将失效。其 中心思想就是ScrollView是一个滚动视图的容器,对于一些自带了滚动效果的控件,是无法和它一起被混合使用的。

在Android平台下,与ScrollView类似的还有一个HorizontalScrollView容器,这个容器与 ScrollView的作用相反,主要适用于水平滚动,了解了ScrollView就基本上了解了HorizontalScrollView,所以这里着 重讲解ScrollView的使用。

示例Demo

ScrollView其实就是一个布局,所以基本上没有什么太多的自己的方法或者属性需要特别讲解。这里直接展示一个Demo来讲解一下使用以及效果即可,这里提供了十张图片,需要放置在res/drawable-hdpi目录下。

wps2f1c.tmp_thumb[1]

1. 垂直滚动

wps2f4c.tmp_thumb[1]

布局代码,参考源代码

效果展示:

wps2f6c.tmp_thumb[1]wps2f7c.tmp_thumb[1]

2. 水平滚动

HorizontalScrollView

对于HorizontalScrollView而 言,其实所有的思想都与ScrollView类似,唯一的区别是HorizontalScrollView是支持水平滚动的。在上面的实例中,只需要改变 一下外围的ScrollView为HorizontalScrollView,再把其中包裹的LinearLayout的 android:orientation属性设置为horizontal即可实现水平滚动的效果。因为没有什么新的技术含量,这里就不再展示Demo代码 了。

效果展示:

wps2f8d.tmp_thumb[1]wps2f9e.tmp_thumb[1]

3. 运行中动态添加数据

wps2fae.tmp_thumb[1]

我们通过添加一个新的功能, 实现动态添加内容, 如上图

wps2fbf.tmp_thumb[1]

在前面添加内容

wps2fc0.tmp_thumb[1]

在结尾添加内容

布局代码片段如下, 全部代码参考源代码中

<?xml version=”1.0″ encoding=”utf-8″?><LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android”

android:orientation=”vertical”

android:layout_width=”match_parent”

android:layout_height=”match_parent”>

下面是一个单独的区域,放置一些按钮

<LinearLayout

android:layout_width=”fill_parent”

android:layout_height=”wrap_content” android:layout_gravity=”left|center_vertical”>

<Button

android:layout_width=”wrap_content”

android:layout_height=”wrap_content”

android:text=”return”

android:id=”@+id/bt_return”/>

<Button

android:layout_width=”wrap_content”

android:layout_height=”wrap_content”

android:text=”+”

android:id=”@+id/bt_add” android:layout_gravity=”left|center_vertical”/>

<Button

android:layout_width=”wrap_content”

android:layout_height=”fill_parent”

android:text=”@string/add_tail”

android:id=”@+id/bt_add_tail”/>

</LinearLayout>

下面是 垂直滚动的视图

<ScrollView xmlns:android=”http://schemas.android.com/apk/res/android”

android:layout_width=”match_parent”

android:layout_height=”match_parent”

android:id=”@+id/scl_myscroll”

>

这个是容器, 我们主要向这个视图添加相关图像和文本

<LinearLayout

android:layout_width=”match_parent”

android:layout_height=”wrap_content”

android:orientation=”vertical”

android:id=”@+id/my_l1″>

Java代码中

是用来获取上面 线性布局的容器的, 然后将内容添加到这个布局中

my_l1 = (LinearLayout) findViewById(R.id.my_l1);

下面函数是用来添加具体内容的

private void setMsg(LinearLayout layout, Context context, int bgColur,

String MSG, boolean tail) {

TextView tv = new TextView(context);

// 获取一个全局的日历实例,用于获取当前系统时间并格式化成小时:分钟形式,

// 仅用于测试,这里的时间应该是由其他程序提供

tv.setText(“某人  说 hello : [”

+ DateFormat.format(“kk:mm”, Calendar.getInstance()) + “]\n”

+ MSG);

tv.setBackgroundColor(bgColur);

if(tail){

layout.addView(tv);

}

else{

layout.addView(tv, 0);

}

}

总结

对于现在的Android开发,大部分应用中,需要用到滚动效果的时候,比如说滑动的展示新闻的效果,都会直接使用ListView来装载数 据。但是ScrollView还是有一定用处的,比如一些软件的属性的设置,就可以放在一个ScrollView中。核心思想就是对于一些动态的效果展 示,就使用ListView,对于固定的一些效果展示,就使用ScrollView包裹即可。

源代码:链接: http://pan.baidu.com/s/1hqqxegG 密码: cjuk



快乐成长 每天进步一点点