首页 > 移动开发 > 一步一步学android之控件篇——ScrollView

一步一步学android之控件篇——ScrollView

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

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

 

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

主界面

 

VerticalScrollView效果:

 

HorzontalScrollView效果:

 

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

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

outoftranslate:

 

[html][/html] view plaincopy

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <set xmlns:android="http://schemas.android.com/apk/res/android">
  3.     <translate
  4.         android:fromXDelta="0"
  5.         android:toXDelta="-100%"
  6.         android:fromYDelta="0"
  7.         android:toYDelta="0"
  8.         android:duration="1000"/>
  9.     <alpha
  10.         android:fromAlpha="1"
  11.         android:toAlpha="0"
  12.         android:duration="1000"></alpha>
  13. </set>

inoftranslate:

 

 

[html][/html] view plaincopy

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <set xmlns:android="http://schemas.android.com/apk/res/android">
  3.     <translate
  4.         android:fromXDelta="-100%"
  5.         android:toXDelta="0"
  6.         android:fromYDelta="0"
  7.         android:toYDelta="0"
  8.         android:duration="1000"/>
  9.     <alpha
  10.         android:fromAlpha="0"
  11.         android:toAlpha="1"
  12.         android:duration="1000"></alpha>
  13. </set>

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

 

horizontal.xml:

 

[html][/html] view plaincopy

  1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2.     xmlns:tools="http://schemas.android.com/tools"
  3.     android:layout_width="match_parent"
  4.     android:layout_height="match_parent"
  5.      >
  6.     <ImageView
  7.         android:id="@+id/imageView1"
  8.         android:layout_width="fill_parent"
  9.         android:layout_height="fill_parent"
  10.         android:layout_above="@+id/bottom"
  11.         android:background="@drawable/img_2" />
  12.     <HorizontalScrollView
  13.         android:id="@+id/bottom"
  14.         android:layout_width="fill_parent"
  15.         android:layout_height="wrap_content"
  16.         android:layout_alignParentBottom="true"
  17.         android:scrollbars="none" >
  18.         <LinearLayout
  19.             android:layout_width="wrap_content"
  20.             android:layout_height="match_parent"
  21.             android:orientation="horizontal"
  22.             android:background="#ffccff" >
  23.                 <Button
  24.                     android:id="@+id/Button1"
  25.                     android:layout_width="wrap_content"
  26.                     android:layout_weight="1"
  27.                     android:layout_height="wrap_content"
  28.                     android:background="@drawable/png_1" />
  29.                 <Button
  30.                     android:id="@+id/Button2"
  31.                      android:layout_weight="1"
  32.                     android:layout_width="wrap_content"
  33.                     android:layout_height="wrap_content"
  34.                     android:background="@drawable/png_2" />
  35.                 <Button
  36.                     android:id="@+id/Button3"
  37.                      android:layout_weight="1"
  38.                     android:layout_width="wrap_content"
  39.                     android:layout_height="wrap_content"
  40.                     android:background="@drawable/png_3" />
  41.                 <Button
  42.                     android:id="@+id/Button4"
  43.                      android:layout_weight="1"
  44.                     android:layout_width="wrap_content"
  45.                     android:layout_height="wrap_content"
  46.                     android:background="@drawable/png_4" />
  47.                 <Button
  48.                     android:id="@+id/Button5"
  49.                     android:layout_width="wrap_content"
  50.                     android:layout_height="wrap_content"
  51.                     android:background="@drawable/png_5" />
  52.                 <Button
  53.                     android:id="@+id/Button6"
  54.                     android:layout_width="wrap_content"
  55.                     android:layout_height="wrap_content"
  56.                     android:background="@drawable/png_6" />
  57.                 <Button
  58.                     android:id="@+id/Button7"
  59.                     android:layout_width="wrap_content"
  60.                     android:layout_height="wrap_content"
  61.                     android:background="@drawable/png_7" />
  62.                 <Button
  63.                     android:id="@+id/Button8"
  64.                     android:layout_width="wrap_content"
  65.                     android:layout_height="wrap_content"
  66.                     android:background="@drawable/png_8" />
  67.         </LinearLayout>
  68.     </HorizontalScrollView>
  69. </RelativeLayout>

vertical.xml:

 

 

[html][/html] view plaincopy

  1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2.     xmlns:tools="http://schemas.android.com/tools"
  3.     android:id="@+id/mainLayout"
  4.     android:layout_width="match_parent"
  5.     android:layout_height="match_parent"
  6.      >
  7.     <ImageView
  8.         android:id="@+id/imageView1"
  9.         android:layout_width="fill_parent"
  10.         android:layout_height="fill_parent"
  11.         android:layout_above="@+id/bottom"
  12.         android:background="@drawable/img_1" />
  13.     <ScrollView
  14.         android:id="@+id/scrollView1"
  15.         android:scrollbars="none"
  16.         android:layout_width="wrap_content"
  17.         android:layout_height="wrap_content" >
  18.         <LinearLayout
  19.             android:layout_width="match_parent"
  20.             android:layout_height="match_parent"
  21.             android:orientation="vertical" >
  22.             <Button
  23.                     android:id="@+id/Button1"
  24.                     android:layout_width="wrap_content"
  25.                     android:layout_weight="1"
  26.                     android:layout_height="wrap_content"
  27.                     android:background="@drawable/png_1" />
  28.                 <Button
  29.                     android:id="@+id/Button2"
  30.                      android:layout_weight="1"
  31.                     android:layout_width="wrap_content"
  32.                     android:layout_height="wrap_content"
  33.                     android:background="@drawable/png_2" />
  34.                 <Button
  35.                     android:id="@+id/Button3"
  36.                      android:layout_weight="1"
  37.                     android:layout_width="wrap_content"
  38.                     android:layout_height="wrap_content"
  39.                     android:background="@drawable/png_3" />
  40.                 <Button
  41.                     android:id="@+id/Button4"
  42.                      android:layout_weight="1"
  43.                     android:layout_width="wrap_content"
  44.                     android:layout_height="wrap_content"
  45.                     android:background="@drawable/png_4" />
  46.                 <Button
  47.                     android:id="@+id/Button5"
  48.                     android:layout_width="wrap_content"
  49.                     android:layout_height="wrap_content"
  50.                     android:background="@drawable/png_5" />
  51.                 <Button
  52.                     android:id="@+id/Button6"
  53.                     android:layout_width="wrap_content"
  54.                     android:layout_height="wrap_content"
  55.                     android:background="@drawable/png_6" />
  56.                 <Button
  57.                     android:id="@+id/Button7"
  58.                     android:layout_width="wrap_content"
  59.                     android:layout_height="wrap_content"
  60.                     android:background="@drawable/png_7" />
  61.                 <Button
  62.                     android:id="@+id/Button8"
  63.                     android:layout_width="wrap_content"
  64.                     android:layout_height="wrap_content"
  65.                     android:background="@drawable/png_8" />
  66.         </LinearLayout>
  67.     </ScrollView>
  68.     <TextView
  69.         android:id="@+id/show"
  70.         android:layout_width="wrap_content"
  71.         android:layout_height="wrap_content"
  72.         android:layout_alignParentBottom="true"
  73.         android:layout_alignParentRight="true"
  74.         android:text="显示哪个按钮被点击"
  75.         android:textSize="30sp" />
  76. </RelativeLayout>

然后是main.xml:

 

 

[html][/html] view plaincopy

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     android:layout_width="match_parent"
  4.     android:layout_height="match_parent"
  5.     android:orientation="vertical"
  6.     android:background="@drawable/background">
  7.     <Button
  8.         android:id="@+id/horizontal"
  9.         android:layout_width="fill_parent"
  10.         android:layout_height="wrap_content"
  11.         android:text="HorizontalScrollView例子"
  12.         android:textColor="#ffccff"
  13.         android:textSize="20sp"
  14.         android:background="@drawable/button_selector" />
  15.     <Button
  16.         android:id="@+id/vertical"
  17.         android:layout_width="fill_parent"
  18.         android:layout_height="wrap_content"
  19.         android:text="VerticalScrollView例子"
  20.         android:textColor="#ffccff"
  21.         android:textSize="20sp"
  22.         android:layout_marginTop="20dp"
  23.         android:background="@drawable/button_selector" />
  24. </LinearLayout>

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

 

HorizontalScrollView.java:

 

[java][/java] view plaincopy

  1. package com.example.scrollviewdemo;
  2. import android.app.Activity;
  3. import android.os.Bundle;
  4. import android.view.Window;
  5. /**
  6.  * @author Kay
  7.  * @blog http://blog.csdn.net/Kaypro
  8.  */
  9. public class HorizontalScrollView extends Activity{
  10.     @Override
  11.     protected void onCreate(Bundle savedInstanceState) {
  12.         // TODO Auto-generated method stub
  13.         super.onCreate(savedInstanceState);
  14.         requestWindowFeature(Window.FEATURE_NO_TITLE);
  15.         super.setContentView(R.layout.horizontal);
  16.     }
  17. }

VerticalScrollView.java:

 

 

[java][/java] view plaincopy

  1. package com.example.scrollviewdemo;
  2. import android.app.Activity;
  3. import android.os.Bundle;
  4. import android.view.MotionEvent;
  5. import android.view.View;
  6. import android.view.Window;
  7. import android.view.View.OnClickListener;
  8. import android.view.animation.Animation;
  9. import android.view.animation.AnimationUtils;
  10. import android.view.animation.LinearInterpolator;
  11. import android.widget.Button;
  12. import android.widget.RelativeLayout;
  13. import android.widget.ScrollView;
  14. import android.widget.TextView;
  15. /**
  16.  * @author Kay
  17.  * @blog http://blog.csdn.net/Kaypro
  18.  */
  19. public class VerticalScrollView extends Activity {
  20.     private ScrollView scroll = null;
  21.     private RelativeLayout mainLayout = null;
  22.     private Animation outoftranslate;
  23.     private Animation inoftranslate;
  24.     private TextView show = null;
  25.     private Button button1 = null;
  26.     private Button button2 = null;
  27.     private Button button3 = null;
  28.     private Button button4 = null;
  29.     private Button button5 = null;
  30.     private Button button6 = null;
  31.     private Button button7 = null;
  32.     private Button button8 = null;
  33.     /**
  34.      * 是否显示导航栏(true为显示)
  35.      */
  36.     private boolean isOut = true;
  37.     @Override
  38.     protected void onCreate(Bundle savedInstanceState) {
  39.         super.onCreate(savedInstanceState);
  40.         requestWindowFeature(Window.FEATURE_NO_TITLE);
  41.         setContentView(R.layout.vertical);
  42.         init();
  43.     }
  44.     private void init(){
  45.         mainLayout = (RelativeLayout)super.findViewById(R.id.mainLayout);
  46.         scroll = (ScrollView)super.findViewById(R.id.scrollView1);
  47.         show = (TextView)super.findViewById(R.id.show);
  48.         button1 = (Button)super.findViewById(R.id.Button1);
  49.         button2 = (Button)super.findViewById(R.id.Button2);
  50.         button3 = (Button)super.findViewById(R.id.Button3);
  51.         button4 = (Button)super.findViewById(R.id.Button4);
  52.         button5 = (Button)super.findViewById(R.id.Button5);
  53.         button6 = (Button)super.findViewById(R.id.Button6);
  54.         button7 = (Button)super.findViewById(R.id.Button7);
  55.         button8 = (Button)super.findViewById(R.id.Button8);
  56.         button1.setOnClickListener(new MyClick());
  57.         button2.setOnClickListener(new MyClick());
  58.         button3.setOnClickListener(new MyClick());
  59.         button4.setOnClickListener(new MyClick());
  60.         button5.setOnClickListener(new MyClick());
  61.         button6.setOnClickListener(new MyClick());
  62.         button7.setOnClickListener(new MyClick());
  63.         button8.setOnClickListener(new MyClick());
  64.         //加载anim文件夹下面的动画文件inoftranslate和outoftranslate
  65.         inoftranslate = AnimationUtils.loadAnimation(this, R.anim.inoftranslate);
  66.         outoftranslate = AnimationUtils.loadAnimation(this, R.anim.outoftranslate);
  67.         //设置动画速率为线性变化
  68.         inoftranslate.setInterpolator(new LinearInterpolator());
  69.         outoftranslate.setInterpolator(new LinearInterpolator());
  70.         //设置动画结束停留在结束位置
  71.         inoftranslate.setFillAfter(true);
  72.         outoftranslate.setFillAfter(true);
  73.         //上一篇讲过的OnTouchListener
  74.         mainLayout.setOnTouchListener(new View.OnTouchListener() {
  75.             @Override
  76.             public boolean onTouch(View v, MotionEvent event) {
  77.                 // TODO Auto-generated method stub
  78.                 switch(event.getAction()){
  79.                 case MotionEvent.ACTION_DOWN:
  80.                     isOut = !isOut;
  81.                     if(!isOut){
  82.                         //隐藏导航
  83.                         System.out.println("--------"+isOut+"-------");
  84.                         scroll.startAnimation(outoftranslate);
  85.                         show.setText("导航隐藏");
  86.                     }else{
  87.                         //显示导航
  88.                         System.out.println("--------"+isOut+"-------");
  89.                         scroll.startAnimation(inoftranslate);
  90.                         show.setText("导航显示");
  91.                     }
  92.                 }
  93.                 return false;
  94.             }
  95.         });
  96.     }
  97.     private class MyClick implements OnClickListener{
  98.         //按钮个数较多,新建内部类实现OnClickListener接口,根据id判断点击哪个按钮。
  99.         @Override
  100.         public void onClick(View v) {
  101.             // TODO Auto-generated method stub
  102.             switch(v.getId()){
  103.             case R.id.Button1:
  104.                 show.setText("Button 1被点击..");
  105.                 break;
  106.             case R.id.Button2:
  107.                 show.setText("Button 2被点击..");
  108.                 break;
  109.             case R.id.Button3:
  110.                 show.setText("Button 3被点击..");
  111.                 break;
  112.             case R.id.Button4:
  113.                 show.setText("Button 4被点击..");
  114.                 break;
  115.             case R.id.Button5:
  116.                 show.setText("Button 5被点击..");
  117.                 break;
  118.             case R.id.Button6:
  119.                 show.setText("Button 6被点击..");
  120.                 break;
  121.             case R.id.Button7:
  122.                 show.setText("Button 7被点击..");
  123.                 break;
  124.             case R.id.Button8:
  125.                 show.setText("Button 8被点击..");
  126.                 break;
  127.             }
  128.         }
  129.     }
  130. }

最后是MainActivity.java:

 

 

[java][/java] view plaincopy

  1. package com.example.scrollviewdemo;
  2. import android.app.Activity;
  3. import android.content.Intent;
  4. import android.os.Bundle;
  5. import android.view.View;
  6. import android.view.View.OnClickListener;
  7. import android.view.Window;
  8. import android.widget.Button;
  9. /**
  10.  * @author Kay
  11.  * @blog http://blog.csdn.net/Kaypro
  12.  */
  13. public class MainActivity extends Activity {
  14.     private Button horizontal = null;
  15.     private Button vertical = null;
  16.     @Override
  17.     protected void onCreate(Bundle savedInstanceState) {
  18.         // TODO Auto-generated method stub
  19.         super.onCreate(savedInstanceState);
  20.         requestWindowFeature(Window.FEATURE_NO_TITLE);
  21.         super.setContentView(R.layout.main);
  22.         init();
  23.     }
  24.     private void init(){
  25.         horizontal = (Button)super.findViewById(R.id.horizontal);
  26.         vertical = (Button)super.findViewById(R.id.vertical);
  27.         horizontal.setOnClickListener(new MyClick());
  28.         vertical.setOnClickListener(new MyClick());
  29.     }
  30.     private class MyClick implements OnClickListener{
  31.         @Override
  32.         public void onClick(View v) {
  33.             // TODO Auto-generated method stub
  34.             switch (v.getId()) {
  35.             case R.id.horizontal:
  36.                 //新建一个意图
  37.                 Intent intent1 = new Intent();
  38.                 //设置跳转的Activity
  39.                 intent1.setClass(MainActivity.this, HorizontalScrollView.class);
  40.                 //开始跳转
  41.                 startActivity(intent1);
  42.                 break;
  43.             case R.id.vertical:
  44.                 Intent intent2 = new Intent();
  45.                 intent2.setClass(MainActivity.this, VerticalScrollView.class);
  46.                 startActivity(intent2);
  47.                 break;
  48.             }
  49.         }
  50.     }
  51. }

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

 

 

[html][/html] view plaincopy

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <manifest xmlns:android="http://schemas.android.com/apk/res/android"
  3.     package="com.example.scrollviewdemo"
  4.     android:versionCode="1"
  5.     android:versionName="1.0" >
  6.     <uses-sdk
  7.         android:minSdkVersion="8"
  8.         android:targetSdkVersion="10" />
  9.     <application
  10.         android:allowBackup="true"
  11.         android:icon="@drawable/ic_launcher"
  12.         android:label="@string/app_name"
  13.         android:theme="@style/AppTheme" >
  14.         <activity
  15.             android:name="com.example.scrollviewdemo.MainActivity"
  16.             android:label="@string/app_name" >
  17.             <intent-filter>
  18.                 <action android:name="android.intent.action.MAIN" />
  19.                 <category android:name="android.intent.category.LAUNCHER" />
  20.             </intent-filter>
  21.         </activity>
  22.         <activity
  23.             android:name="com.example.scrollviewdemo.HorizontalScrollView"></activity>
  24.         <activity
  25.             android:name="com.example.scrollviewdemo.VerticalScrollView"></activity>
  26.     </application>
  27. </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。


本文固定链接: http://www.devba.com/index.php/archives/2476.html | 开发吧

报歉!评论已关闭.