Android使用ViewFlipper实现左右滑动效果面

在我的博客中，上次是使用ViewPager实现左右滑动的效果的，请看文章：Android使用ViewPager实现左右滑动效果 。

 

这次我来使用ViewFlipper实现这种效果，好了，先看看效果吧：

 

 

 

 

效果看完了就来实现这个效果。

1.布局文件

主界面使用下面的布局：

[html] view plaincopy
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:layout_width="fill_parent"  
  4.     android:layout_height="fill_parent"  
  5.     android:orientation="vertical" >  
  6.   
  7.     <ViewFlipper android:id="@+id/ViewFlipper1"  
  8.         android:layout_width="fill_parent"   
  9.         android:layout_height="fill_parent">  
  10.     </ViewFlipper>  
  11.       
  12.       
  13.       
  14.     <LinearLayout  
  15.         android:orientation="horizontal"  
  16.         android:layout_width="wrap_content"  
  17.           
  18.         android:layout_gravity="bottom|center_horizontal"  
  19.         android:layout_height="wrap_content"  
  20.           
  21.         >  
  22.         <ImageView  
  23.             android:layout_width="wrap_content"  
  24.             android:layout_height="wrap_content"  
  25.             android:src="@drawable/da"  
  26.             
  27.             android:id="@+id/imageview1"  
  28.             />  
  29.         <ImageView  
  30.             android:layout_width="wrap_content"  
  31.             android:layout_height="wrap_content"  
  32.             android:src="@drawable/xiao"  
  33.             android:id="@+id/imageview2"  
  34.             />  
  35.         <ImageView  
  36.             android:layout_width="wrap_content"  
  37.             android:layout_height="wrap_content"  
  38.             android:src="@drawable/xiao"  
  39.             android:id="@+id/imageview3"  
  40.             />  
  41.         <ImageView  
  42.             android:layout_width="wrap_content"  
  43.             android:layout_height="wrap_content"  
  44.             android:src="@drawable/xiao"  
  45.             android:id="@+id/imageview4"  
  46.             />  
  47.               
  48.         </LinearLayout>  
  49.   
  50.   
  51. </FrameLayout>  


简单的介绍一下布局文件：最外层是一个FrameLayout，使用FrameLayout就是为了是的下面的四个点在ViewFlipper上面。LayoutLayout在FrameLayout的下面和水平居中。

2.ViewFlipper的使用

[java] view plaincopy
  1. flipper = (ViewFlipper) this.findViewById(R.id.ViewFlipper1);  
  2.         flipper.addView(addImageView(R.drawable.png1o));  
  3.         flipper.addView(addImageView(R.drawable.png2o));  
  4.         flipper.addView(addImageView(R.drawable.png3o));  
  5.   
  6.         flipper.addView(addView());  


 

在Activity中声明一个ViewFlipper的对象，在布局中找到。将三张图片加到ViewFlipper中，另外再加一个View，这个View是从XML布局文件中得到的。布局文件如下：

[html] view plaincopy
  1. <?xml version="1.0" encoding="utf-8"?>   
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:orientation="vertical"  
  4.     android:layout_width="fill_parent"  
  5.     android:layout_height="fill_parent"  
  6.       
  7.     >  
  8. <Button  
  9.         android:id="@+id/button"  
  10.         android:layout_width="wrap_content"  
  11.         android:layout_height="wrap_content"  
  12.         android:layout_marginBottom="45dp"        
  13.         android:text="进入程序"  
  14.         android:textColor="#3E3E3E"   
  15.         android:layout_gravity="center_horizontal"  
  16.         />  
  17. </LinearLayout>   


在这个布局文件中有一个Button，用于跳转Activity用。

 

在Activity中声明一个GestureDetector对象，在onCreate方法中分配内存。

detector = new GestureDetector(this);

使用this为参数，那么就要使得activity类impllements  OnGestureListener接口。重写几个方法。覆盖父类的onTouchEvent方法，在这个方法中如下写：

[java] view plaincopy
  1. @Override  
  2.     public boolean onTouchEvent(MotionEvent event) {  
  3.         // TODO Auto-generated method stub  
  4.         return this.detector.onTouchEvent(event);   
  5.     }  


这样就使得detector能接受消息响应了。

 

在实现OnGestureListener的方法中判断用户的滑动来切换界面：

[java] view plaincopy
  1. @Override  
  2. public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,  
  3.         float velocityY) {  
  4.     System.out.println("in------------>>>>>>>");  
  5.     if (e1.getX() - e2.getX() > 120) {  
  6.         if (i < 3) {  
  7.             i++;  
  8.             setImage(i);  
  9.             this.flipper.setInAnimation(AnimationUtils.loadAnimation(this,  
  10.                     R.anim.animation_right_in));  
  11.             this.flipper.setOutAnimation(AnimationUtils.loadAnimation(this,  
  12.                     R.anim.animation_left_out));  
  13.             this.flipper.showNext();  
  14.         }  
  15.         return true;  
  16.     }   
  17.     else if (e1.getX() - e2.getX() < -120) {  
  18.         if (i > 0) {  
  19.             i--;  
  20.             setImage(i);  
  21.             this.flipper.setInAnimation(AnimationUtils.loadAnimation(this,  
  22.                     R.anim.animation_left_in));  
  23.             this.flipper.setOutAnimation(AnimationUtils.loadAnimation(this,  
  24.                     R.anim.animation_right_out));  
  25.             this.flipper.showPrevious();  
  26.         }  
  27.         return true;  
  28.     }  
  29.     return false;  
  30.       
  31. }  
  32.   
  33. void setImage(int i)  
  34. {  
  35.     for(int j=0;j<4;j++)  
  36.     {  
  37.         if(j!=i)  
  38.         iamges[j].setImageResource(R.drawable.xiao);  
  39.         else  
  40.             iamges[j].setImageResource(R.drawable.da);  
  41.     }  
  42. }  


界面切换的时候改变下面的四个小ImageView的图片。切换的动画在res/anim文件夹中，这里就不多说了。

 

整个工程的下载：Android使用ViewFlipper实现左右滑动效果面。

 

 

 

 

-------------------------------------------------------------------------------------------------------------------------------

 

 

 在android的图片的浏览时候经常使用。最近在网上查找资料自己也做一个如下：

 

 

Java代码  收藏代码
  1. package com.easyway.buttonpageflipper;  
  2.   
  3. import com.easyway.buttonpageflipper.R;  
  4.   
  5. import android.app.Activity;  
  6. import android.graphics.PixelFormat;  
  7. import android.os.Bundle;  
  8. import android.os.Handler;  
  9. import android.os.Message;  
  10. import android.view.GestureDetector;  
  11. import android.view.GestureDetector.OnGestureListener;  
  12. import android.view.Gravity;  
  13. import android.view.MotionEvent;  
  14. import android.view.View;  
  15. import android.view.WindowManager;  
  16. import android.view.WindowManager.LayoutParams;  
  17. import android.view.animation.AnimationUtils;  
  18. import android.widget.ImageView;  
  19. import android.widget.ViewFlipper;  
  20.   
  21. /** 
  22.  * Android实现带渐显按钮的左右滑动效果 自然状态下按钮不可见,触摸屏幕时显示按钮 
  23.  *  
  24.  * @author longgangbai 
  25.  *  
  26.  */  
  27. public class ButtonpageflipperActivity extends Activity implements OnGestureListener{  
  28.     // 声明两个按钮,分别代表向左和向右滑动  
  29.     private ImageView btnLeft = null;  
  30.     private ImageView btnRight = null;  
  31.     // 设置WindowManager  
  32.     private WindowManager wm = null;  
  33.     private WindowManager.LayoutParams wmParams = null;  
  34.     // ImageView的alpha值  
  35.     private int mAlpha = 0;  
  36.     private boolean isHide;  
  37.     private ViewFlipper viewFlipper = null;  
  38.     private GestureDetector detector;  
  39.     /** Called when the activity is first created. */  
  40.     @Override  
  41.     public void onCreate(Bundle savedInstanceState) {  
  42.         super.onCreate(savedInstanceState);  
  43.         setContentView(R.layout.main);  
  44.         setTitle("Android实现渐显按钮的左右滑动效果");  
  45.         viewFlipper = (ViewFlipper) this.findViewById(R.id.myViewFlipper);  
  46.         detector = new GestureDetector(this);  
  47.         // 初始化左右按钮  
  48.         initImageButtonView();  
  49.         viewFlipper.addView(addImageView(R.drawable.photo1));  
  50.         viewFlipper.addView(addImageView(R.drawable.photo2));  
  51.         viewFlipper.addView(addImageView(R.drawable.photo3));  
  52.         viewFlipper.addView(addImageView(R.drawable.photo4));  
  53.         viewFlipper.addView(addImageView(R.drawable.photo5));  
  54.     }  
  55.      private View addImageView(int id) {  
  56.             ImageView iv = new ImageView(this);  
  57.             iv.setImageResource(id);  
  58.             return iv;  
  59.         }  
  60.   
  61.     /** 
  62.      * 初始化悬浮按钮 
  63.      */  
  64.     private void initImageButtonView() {  
  65.         // 获取WindowManager  
  66.         wm = (WindowManager) getApplicationContext().getSystemService("window");  
  67.         // 设置LayoutParams相关参数  
  68.         wmParams = new WindowManager.LayoutParams();  
  69.         // 设置window type  
  70.         wmParams.type = LayoutParams.TYPE_PHONE;  
  71.         // 设置图片格式,效果为背景透明  
  72.         wmParams.format = PixelFormat.RGBA_8888;  
  73.         // 设置Window flag参数  
  74.         wmParams.flags = LayoutParams.FLAG_NOT_TOUCH_MODAL  
  75.                 | LayoutParams.FLAG_NOT_FOCUSABLE;  
  76.         // 设置x、y初始值  
  77.         wmParams.x = 0;  
  78.         wmParams.y = 0;  
  79.         // 设置窗口长宽数据  
  80.         wmParams.width = 50;  
  81.         wmParams.height = 50;  
  82.         // 创建左右按钮  
  83.         createLeftButtonView();  
  84.         createRightButtonView();  
  85.     }  
  86.   
  87.     /** 
  88.      * 设置左边按钮 
  89.      */  
  90.     private void createLeftButtonView() {  
  91.         btnLeft = new ImageView(this);  
  92.         btnLeft.setImageResource(R.drawable.left);  
  93.         btnLeft.setAlpha(0);  
  94.         btnLeft.setOnClickListener(new View.OnClickListener() {  
  95.             public void onClick(View arg0) {  
  96.                 // 上一个图像  
  97.                 viewFlipper.setInAnimation(ButtonpageflipperActivity.this,  
  98.                         R.anim.push_left_in);  
  99.                 viewFlipper.setOutAnimation(ButtonpageflipperActivity.this,  
  100.                         R.anim.push_left_out);  
  101.                 viewFlipper.showPrevious();  
  102.             }  
  103.         });  
  104.         // 调整窗口  
  105.         wmParams.gravity = Gravity.LEFT | Gravity.CENTER_VERTICAL;  
  106.         // 显示图像  
  107.         wm.addView(btnLeft, wmParams);  
  108.     }  
  109.   
  110.     /** 
  111.      * 设置右边按钮 
  112.      */  
  113.     private void createRightButtonView() {  
  114.         btnRight = new ImageView(this);  
  115.         btnRight.setImageResource(R.drawable.right);  
  116.         btnRight.setAlpha(0);  
  117.         btnRight.setOnClickListener(new View.OnClickListener() {  
  118.             public void onClick(View arg0) {  
  119.                 // 下一个图像  
  120.                 viewFlipper.setInAnimation(ButtonpageflipperActivity.this,  
  121.                         R.anim.push_right_in);  
  122.                 viewFlipper.setOutAnimation(ButtonpageflipperActivity.this,  
  123.                         R.anim.push_right_out);  
  124.                 viewFlipper.showNext();  
  125.                   
  126.             }  
  127.         });  
  128.         // 调整窗口  
  129.         wmParams.gravity = Gravity.RIGHT | Gravity.CENTER_VERTICAL;  
  130.         // 显示图像  
  131.         wm.addView(btnRight, wmParams);  
  132.     }  
  133.   
  134.     /** 
  135.      * 设置按钮渐显效果 
  136.      */  
  137.     private Handler mHandler = new Handler() {  
  138.         public void handleMessage(Message msg) {  
  139.             if (msg.what == 1 && mAlpha < 255) {  
  140.                 // 通过设置不透明度设置按钮的渐显效果  
  141.                 mAlpha += 50;  
  142.                 if (mAlpha > 255)  
  143.                     mAlpha = 255;  
  144.                 btnLeft.setAlpha(mAlpha);  
  145.                 btnLeft.invalidate();  
  146.                 btnRight.setAlpha(mAlpha);  
  147.                 btnRight.invalidate();  
  148.                 if (!isHide && mAlpha < 255)  
  149.                     mHandler.sendEmptyMessageDelayed(1, 100);  
  150.                   
  151.             } else if (msg.what == 0 && mAlpha > 0) {  
  152.                 mAlpha -= 10;  
  153.                 if (mAlpha < 0)  
  154.                     mAlpha = 0;  
  155.                 btnLeft.setAlpha(mAlpha);  
  156.                 btnLeft.invalidate();  
  157.                 btnRight.setAlpha(mAlpha);  
  158.                 btnRight.invalidate();  
  159.                 if (isHide && mAlpha > 0)  
  160.                     mHandler.sendEmptyMessageDelayed(0, 800);  
  161.             }  
  162.         }  
  163.     };  
  164.   
  165.     private void showImageButtonView() {  
  166.         isHide = false;  
  167.         mHandler.sendEmptyMessage(1);  
  168.     }  
  169.   
  170.     private void hideImageButtonView() {  
  171.         new Thread() {  
  172.             public void run() {  
  173.                 try {  
  174.                     Thread.sleep(1500);  
  175.                     isHide = true;  
  176.                     mHandler.sendEmptyMessage(0);  
  177.                 } catch (Exception e) {  
  178.                     ;  
  179.                 }  
  180.             }  
  181.         }.start();  
  182.     }  
  183.   
  184.     @Override  
  185.     public boolean onTouchEvent(MotionEvent event) {  
  186.         this.detector.onTouchEvent(event);  
  187.         switch (event.getAction()) {  
  188.         case MotionEvent.ACTION_MOVE:  
  189.         case MotionEvent.ACTION_DOWN:  
  190.             showImageButtonView();  
  191.             break;  
  192.         case MotionEvent.ACTION_UP:  
  193.             hideImageButtonView();  
  194.             break;  
  195.         }  
  196.         return true;  
  197.     }  
  198.   
  199.     @Override  
  200.     public void onDestroy() {  
  201.         super.onDestroy();  
  202.         // 在程序退出(Activity销毁)时销毁窗口  
  203.         wm.removeView(btnLeft);  
  204.         wm.removeView(btnRight);  
  205.     }  
  206.   
  207.       @Override  
  208.         public boolean onDown(MotionEvent e) {  
  209.             // TODO Auto-generated method stub  
  210.             return false;  
  211.         }  
  212.           
  213.         @Override  
  214.         public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,  
  215.                 float velocityY) {  
  216.             if (e1.getX() - e2.getX() > 120) {  
  217.                 this.viewFlipper.setInAnimation(AnimationUtils.loadAnimation(this, R.anim.push_left_in));  
  218.                 this.viewFlipper.setOutAnimation(AnimationUtils.loadAnimation(this, R.anim.push_left_out));  
  219.                 this.viewFlipper.showNext();  
  220.                 return true;  
  221.             } else if (e1.getX() - e2.getX() < -120) {  
  222.                 this.viewFlipper.setInAnimation(AnimationUtils.loadAnimation(this, R.anim.push_right_in));  
  223.                 this.viewFlipper.setOutAnimation(AnimationUtils.loadAnimation(this, R.anim.push_right_out));  
  224.                 this.viewFlipper.showPrevious();  
  225.                 return true;  
  226.             }  
  227.               
  228.             return false;  
  229.         }  
  230.           
  231.         @Override  
  232.         public void onLongPress(MotionEvent e) {  
  233.             // TODO Auto-generated method stub  
  234.               
  235.         }  
  236.           
  237.         @Override  
  238.         public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX,  
  239.                 float distanceY) {  
  240.             // TODO Auto-generated method stub  
  241.             return false;  
  242.         }  
  243.           
  244.         @Override  
  245.         public void onShowPress(MotionEvent e) {  
  246.             // TODO Auto-generated method stub  
  247.               
  248.         }  
  249.           
  250.         @Override  
  251.         public boolean onSingleTapUp(MotionEvent e) {  
  252.             // TODO Auto-generated method stub  
  253.             return false;  
  254.         }  
  255.     }  

 

 

 

 

posted @ 2013-06-17 15:08  火腿骑士  阅读(1514)  评论(0)  编辑  收藏  举报