一个手机的屏幕大小是有限的,那么我要显示的东西显示不下怎么办?这就会使用到ScrollView来进行滚动显示,他的定义如下:

可以看到ScrollView是继承于FrameLayout的,所以ScrollView也可以当做一个布局来看,而在后面的例子也能看出ScrollView确实是有布局管理器一样的效果。因为ScrollView有两种(一种是横的HorizontalScrollView,一种是垂直的ScrollView,为了区分,后面就称其为VerticalScrollView),所以今天的例子有点多,我把这两个结合在一起。

要实现的功能如下:在VerticalScrollView中放入8个按钮当做导航,点击屏幕空白处来控制导航的伸缩,在HorizontalScrollView中放入8个按钮,当做菜单。具体实现效果如下:

主界面

VerticalScrollView效果:

HorzontalScrollView效果:

其中上面VerticalScrollView用到了动画(后面有专门的篇幅来学习,这里只是为了效果,可直接拷贝动画文件)。

在res文件夹下面建立一个anim的子文件夹存放动画文件(inoftranslate和outoftranslate),代码如下:

outoftranslate:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate
android:fromXDelta="0"
android:toXDelta="-100%"
android:fromYDelta="0"
android:toYDelta="0"
android:duration="1000"/>
<alpha
android:fromAlpha="1"
android:toAlpha="0"
android:duration="1000"></alpha>
</set>

inoftranslate:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate
android:fromXDelta="-100%"
android:toXDelta="0"
android:fromYDelta="0"
android:toYDelta="0"
android:duration="1000"/>
<alpha
android:fromAlpha="0"
android:toAlpha="1"
android:duration="1000"></alpha>
</set>

然后新建两个布局文件(horizontal.xml和vertical.xml),代码如下:

horizontal.xml:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
> <ImageView
android:id="@+id/imageView1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_above="@+id/bottom"
android:background="@drawable/img_2" /> <HorizontalScrollView
android:id="@+id/bottom"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:scrollbars="none" > <LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="horizontal"
android:background="#ffccff" > <Button
android:id="@+id/Button1"
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="wrap_content"
android:background="@drawable/png_1" /> <Button
android:id="@+id/Button2"
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/png_2" /> <Button
android:id="@+id/Button3"
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/png_3" /> <Button
android:id="@+id/Button4"
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/png_4" /> <Button
android:id="@+id/Button5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/png_5" /> <Button
android:id="@+id/Button6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/png_6" /> <Button
android:id="@+id/Button7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/png_7" /> <Button
android:id="@+id/Button8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/png_8" /> </LinearLayout>
</HorizontalScrollView> </RelativeLayout>

vertical.xml:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/mainLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
> <ImageView
android:id="@+id/imageView1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_above="@+id/bottom"
android:background="@drawable/img_1" /> <ScrollView
android:id="@+id/scrollView1"
android:scrollbars="none"
android:layout_width="wrap_content"
android:layout_height="wrap_content" > <LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<Button
android:id="@+id/Button1"
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="wrap_content"
android:background="@drawable/png_1" /> <Button
android:id="@+id/Button2"
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/png_2" /> <Button
android:id="@+id/Button3"
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/png_3" /> <Button
android:id="@+id/Button4"
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/png_4" /> <Button
android:id="@+id/Button5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/png_5" /> <Button
android:id="@+id/Button6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/png_6" /> <Button
android:id="@+id/Button7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/png_7" /> <Button
android:id="@+id/Button8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/png_8" />
</LinearLayout>
</ScrollView> <TextView
android:id="@+id/show"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:text="显示哪个按钮被点击"
android:textSize="30sp" /> </RelativeLayout>

然后是main.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"
android:background="@drawable/background"> <Button
android:id="@+id/horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="HorizontalScrollView例子"
android:textColor="#ffccff"
android:textSize="20sp"
android:background="@drawable/button_selector" /> <Button
android:id="@+id/vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="VerticalScrollView例子"
android:textColor="#ffccff"
android:textSize="20sp"
android:layout_marginTop="20dp"
android:background="@drawable/button_selector" /> </LinearLayout>

接下来新建两个java文件(HorizontalScrollView.java和VerticalScrollView.java),代码如下:

HorizontalScrollView.java:

package com.example.scrollviewdemo;

import android.app.Activity;
import android.os.Bundle;
import android.view.Window; /**
* @author Kay
* @blog http://blog.csdn.net/Kaypro
*/
public class HorizontalScrollView extends Activity{
@Override
protected void onCreate(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
super.setContentView(R.layout.horizontal);
}
}

VerticalScrollView.java:

package com.example.scrollviewdemo;

import android.app.Activity;
import android.os.Bundle;
import android.view.MotionEvent;
import android.view.View;
import android.view.Window;
import android.view.View.OnClickListener;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.view.animation.LinearInterpolator;
import android.widget.Button;
import android.widget.RelativeLayout;
import android.widget.ScrollView;
import android.widget.TextView; /**
* @author Kay
* @blog http://blog.csdn.net/Kaypro
*/
public class VerticalScrollView extends Activity {
private ScrollView scroll = null;
private RelativeLayout mainLayout = null;
private Animation outoftranslate;
private Animation inoftranslate;
private TextView show = null; private Button button1 = null;
private Button button2 = null;
private Button button3 = null;
private Button button4 = null;
private Button button5 = null;
private Button button6 = null;
private Button button7 = null;
private Button button8 = null;
/**
* 是否显示导航栏(true为显示)
*/
private boolean isOut = true;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.vertical);
init();
}
private void init(){
mainLayout = (RelativeLayout)super.findViewById(R.id.mainLayout);
scroll = (ScrollView)super.findViewById(R.id.scrollView1);
show = (TextView)super.findViewById(R.id.show); button1 = (Button)super.findViewById(R.id.Button1);
button2 = (Button)super.findViewById(R.id.Button2);
button3 = (Button)super.findViewById(R.id.Button3);
button4 = (Button)super.findViewById(R.id.Button4);
button5 = (Button)super.findViewById(R.id.Button5);
button6 = (Button)super.findViewById(R.id.Button6);
button7 = (Button)super.findViewById(R.id.Button7);
button8 = (Button)super.findViewById(R.id.Button8); button1.setOnClickListener(new MyClick());
button2.setOnClickListener(new MyClick());
button3.setOnClickListener(new MyClick());
button4.setOnClickListener(new MyClick());
button5.setOnClickListener(new MyClick());
button6.setOnClickListener(new MyClick());
button7.setOnClickListener(new MyClick());
button8.setOnClickListener(new MyClick()); //加载anim文件夹下面的动画文件inoftranslate和outoftranslate
inoftranslate = AnimationUtils.loadAnimation(this, R.anim.inoftranslate);
outoftranslate = AnimationUtils.loadAnimation(this, R.anim.outoftranslate);
//设置动画速率为线性变化
inoftranslate.setInterpolator(new LinearInterpolator());
outoftranslate.setInterpolator(new LinearInterpolator());
//设置动画结束停留在结束位置
inoftranslate.setFillAfter(true);
outoftranslate.setFillAfter(true);
//上一篇讲过的OnTouchListener
mainLayout.setOnTouchListener(new View.OnTouchListener() { @Override
public boolean onTouch(View v, MotionEvent event) {
// TODO Auto-generated method stub
switch(event.getAction()){
case MotionEvent.ACTION_DOWN:
isOut = !isOut;
if(!isOut){
//隐藏导航
System.out.println("--------"+isOut+"-------");
scroll.startAnimation(outoftranslate);
show.setText("导航隐藏");
}else{
//显示导航
System.out.println("--------"+isOut+"-------");
scroll.startAnimation(inoftranslate);
show.setText("导航显示");
}
}
return false;
}
});
}
private class MyClick implements OnClickListener{
//按钮个数较多,新建内部类实现OnClickListener接口,根据id判断点击哪个按钮。
@Override
public void onClick(View v) {
// TODO Auto-generated method stub
switch(v.getId()){
case R.id.Button1:
show.setText("Button 1被点击..");
break;
case R.id.Button2:
show.setText("Button 2被点击..");
break;
case R.id.Button3:
show.setText("Button 3被点击..");
break;
case R.id.Button4:
show.setText("Button 4被点击..");
break;
case R.id.Button5:
show.setText("Button 5被点击..");
break;
case R.id.Button6:
show.setText("Button 6被点击..");
break;
case R.id.Button7:
show.setText("Button 7被点击..");
break;
case R.id.Button8:
show.setText("Button 8被点击..");
break; }
} }
}

最后是MainActivity.java:

package com.example.scrollviewdemo;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.Window;
import android.widget.Button; /**
* @author Kay
* @blog http://blog.csdn.net/Kaypro
*/
public class MainActivity extends Activity { private Button horizontal = null;
private Button vertical = null;
@Override
protected void onCreate(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
super.setContentView(R.layout.main);
init();
}
private void init(){
horizontal = (Button)super.findViewById(R.id.horizontal);
vertical = (Button)super.findViewById(R.id.vertical); horizontal.setOnClickListener(new MyClick());
vertical.setOnClickListener(new MyClick());
}
private class MyClick implements OnClickListener{ @Override
public void onClick(View v) {
// TODO Auto-generated method stub
switch (v.getId()) {
case R.id.horizontal:
//新建一个意图
Intent intent1 = new Intent();
//设置跳转的Activity
intent1.setClass(MainActivity.this, HorizontalScrollView.class);
//开始跳转
startActivity(intent1);
break;
case R.id.vertical:
Intent intent2 = new Intent();
intent2.setClass(MainActivity.this, VerticalScrollView.class);
startActivity(intent2);
break;
}
}
}
}

最后由于新建了两个Activity,所以要在AndroidManifest.xml里面注册,注册完如下:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.scrollviewdemo"
android:versionCode="1"
android:versionName="1.0" > <uses-sdk
android:minSdkVersion="8"
android:targetSdkVersion="10" /> <application
android:allowBackup="true"
android:icon="@drawable/ic_launcher"
android:label="@string/app_name"
android:theme="@style/AppTheme" >
<activity
android:name="com.example.scrollviewdemo.MainActivity"
android:label="@string/app_name" >
<intent-filter>
<action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
<activity
android:name="com.example.scrollviewdemo.HorizontalScrollView"></activity>
<activity
android:name="com.example.scrollviewdemo.VerticalScrollView"></activity>
</application> </manifest>

到这一步这个例子就算完成了,至于button按钮的效果,在控件篇(上)

http://blog.csdn.net/kaypro/article/details/9730229
)就有说过,这里就不重复贴代码了。

这里说下在使用ScrollView要注意的地方,ScrollView只能包裹一个直接子元素,往往是一个内嵌布局管理器,而不能包含多个,否则程序会出现java.lang.IIIegalStateException:ScrollView can host only one direct child的异常。

这里把这个例子传到资源下载那里http://download.csdn.net/detail/zenglinkai/6037485

一步一步学android之控件篇——ScrollView的更多相关文章

  1. 一步一步学android之控件篇——ListView基本使用

    ListView组件在应用程序中可以说是不可或缺的一部分,ListView主要是显示列表数据,同时可以滚动查看,这篇博客主要是对ListView的基本用法进行说明,后面会依次对ListView点击动态 ...

  2. android基本控件学习-----ScrollView

    ScrollView(滚动条)的讲解: 一.对于ScrollView滚动条还是很好理解的,共有两种水平和垂直,ScrollView和HorizontalScrollview,这个里面不知道该总结写什么 ...

  3. Android 开源控件与常用开发框架开发工具类

    Android的加载动画AVLoadingIndicatorView 项目地址: https://github.com/81813780/AVLoadingIndicatorView 首先,在 bui ...

  4. android 基础控件(EditView、SeekBar等)的属性及使用方法

        android提供了大量的UI控件,本文将介绍TextView.ImageView.Button.EditView.ProgressBar.SeekBar.ScrollView.WebView ...

  5. Android基本控件之Menus

    在我们的手机中有很多样式的菜单,比如:我们的短信界面,每条短信,我们长按都会出现一个菜单,还有很多的种类.那么现在,我们就来详细的讨论一下安卓中的菜单 Android的控件中就有这么一个,叫做Menu ...

  6. Android:控件布局(相对布局)RelativeLayout

    RelativeLayout是相对布局控件:以控件之间相对位置或相对父容器位置进行排列. 相对布局常用属性: 子类控件相对子类控件:值是另外一个控件的id android:layout_above-- ...

  7. Android:控件布局(线性布局)LinearLayout

    LinearLayout是线性布局控件:要么横向排布,要么竖向排布 决定性属性:必须有的! android:orientation:vertical (垂直方向) .horizontal(水平方向) ...

  8. 矩阵, 矩阵 , Android基础控件之ImageView

    天下文章大家抄,以下所有内容,有来自copy,有来自查询,亦有自己的总结(目的是总结出自己的东西),所以说原创,不合适,说是转载也不恰当,所以我称之为笔记,可惜没有此分类选项,姑且不要脸一点,选择为原 ...

  9. 跟我学android-常用控件之 TextView

    TextView 是Android文本控件,用于显示文字. 我们先看一看TextView的结构(developer.android.com) 从这里我们可以得知,TextView是View的子类,他有 ...

随机推荐

  1. 关于用自带摄像机录像无法捕获uri 问题解决

    这个 我自己调用,好像并没有出现什么问题. 下面是我的代码.你们可以参照一下 File file = new File(Environment.getExternalStorageDirectory( ...

  2. You have not agreed to the Xcode license.

    You have not agreed to the Xcode license. Before running the installer again please agree to the lic ...

  3. Android:res之selector背景选择器

    selector根据不同的选定状态来定义不同的现实效果 常用属性: android:state_selected--------选中android:state_focused--------获得焦点a ...

  4. 分析JavaScript代码应该放在HTML代码哪个位置比较好

    本文总结了多种放置JS代码的方法,需要的朋友可以参考下 在哪里放置 JavaScript 代码? 通常情况下,JavaScript 代码是和 HTML 代码一起使用的,可以将 JavaScript 代 ...

  5. Oracle查看和修改连接数(进程/会话/并发等等)

    查询数据库当前进程的连接数及会话的连接数.并发连接数以及会话情况等等,感兴趣的你可以参考下哈,希望可以帮助到你   1.查询数据库当前进程的连接数: 复制代码 代码如下: select count(* ...

  6. 如何使Label带有链接??此法感觉有点取巧!!!

    关键代码 /**************************************************************第一行***************************** ...

  7. #pragma anon_unions, #pragma no_anon_unions

    #pragma anon_unions, #pragma no_anon_unions 这些编译指示启用和禁用对匿名结构和联合的支持. 缺省设置 缺省值为 #pragma no_anon_unions ...

  8. Autoconf/Automake工具简介

    在linux下编程的时候,有时候工程项目很大,文件比较多,此时需要使用自动创建Makefile文件功能.也就是使用Autoconf/Automake工具自动生成Makefile,为编译程序带来了方便, ...

  9. Unix/Linux环境C编程入门教程(14) Mandriva LinuxCCPP开发环境搭建

    1. Mandriva是目前全球最优秀的Linux发行版之一,稳居于linux排行榜第一梯队. Mandriva公司现在仍然是 这个时候mandriva Linux系统安装完成,基于Mandriva的 ...

  10. javascript 中 keyup、keypress和keydown事件

    keyup.keypress和keydown事件都是有关于键盘的事件 1. keydown事件在键盘的键被按下的时候触发,keyup 事件在按键被释放的时候触发    keydown.keypress ...