Android ViewFlipper滑动屏幕切换图片

来源:互联网 发布:ecshop 修改sql语句 编辑:程序博客网 时间:2024/04/30 07:11

最近看到ViewFlipper和Animation在一起的用法,感觉很好,我就自己写了一下,感觉灰常好用,效果比gallery的滚动查看图片好用多了,这个也是实现滚动屏幕切换图片,但是用户体验要好很多!

程序一开始界面,第一张图片:



1.gif



向右滑动屏幕切换到第二张图片:


2.gif 

向右滑动切换第三张图片:

向左滑动就又切换到第二张图片了!

以此类推!

3.gif

代码奉上:一、MainActivity。java类文件:

  1. view plainprint?
  2. package com.cn.daming;  
  3.   
  4. import android.app.Activity;  
  5. import android.content.Intent;  
  6. import android.graphics.Color;  
  7. import android.graphics.drawable.GradientDrawable;  
  8. import android.graphics.drawable.GradientDrawable.Orientation;  
  9. import android.os.Bundle;  
  10. import android.util.Log;  
  11. import android.view.GestureDetector;  
  12. import android.view.GestureDetector.OnGestureListener;  
  13. import android.view.LayoutInflater;  
  14. import android.view.MotionEvent;  
  15. import android.view.View;  
  16. import android.view.animation.AnimationUtils;  
  17. import android.widget.ViewFlipper;  
  18.   
  19. public class MainActivity extends Activity implements OnGestureListener{  
  20.       
  21.     private GestureDetector detector;  
  22.     private ViewFlipper flipper;  
  23.     private final int HELPFILP_RESULT = 106;  
  24.     Intent getMainActivity = null;  
  25.     int count = 1;  
  26.       
  27.     @Override  
  28.     public void onCreate(Bundle savedInstanceState) {  
  29.         super.onCreate(savedInstanceState);  
  30.         drawBackground();  
  31.         LayoutInflater inflater = LayoutInflater.from(this);  
  32.         final View layout = inflater.inflate(R.layout.view_flipper, null);  
  33.         setContentView(layout);  
  34.         flipper = (ViewFlipper) findViewById(R.id.view_flipper);  
  35.         detector = new GestureDetector(this);  
  36.     }  
  37.   
  38.     public void drawBackground()  
  39.     {  
  40.         GradientDrawable grad = new GradientDrawable(   
  41.                    Orientation.TL_BR,  
  42.                    new int[] {Color.rgb(0, 0, 127),  
  43.                            Color.rgb(0, 0, 255),  
  44.                            Color.rgb(127, 0, 255),  
  45.                            Color.rgb(127, 127, 255),  
  46.                            Color.rgb(127, 255, 255),  
  47.                            Color.rgb(255, 255, 255)}   
  48.         );   
  49.   
  50.         this.getWindow().setBackgroundDrawable(grad);  
  51.     }  
  52.       
  53.     @Override  
  54.     public boolean onTouchEvent(MotionEvent event) {  
  55.         return this.detector.onTouchEvent(event);  
  56.     }  
  57.   
  58.     public boolean onDown(MotionEvent arg0) {  
  59.         // TODO Auto-generated method stub  
  60.         return false;  
  61.     }  
  62.   
  63.     public boolean onFling(MotionEvent e1, MotionEvent e2, float arg2,  
  64.             float arg3) {  
  65.         Log.i("Fling", "Fling Happened!");  
  66.         if (e1.getX() - e2.getX() > 5) {  
  67.             this.flipper.setInAnimation(AnimationUtils.loadAnimation(this,  
  68.                     R.anim.push_left_in));  
  69.             this.flipper.setOutAnimation(AnimationUtils.loadAnimation(this,  
  70.                     R.anim.push_left_out));  
  71.             if (count < 3) {  
  72.                 this.flipper.showNext();  
  73.                 count++;  
  74.             }  
  75.   
  76.             return true;  
  77.         } else if (e1.getX() - e2.getX() < -5) {  
  78.             this.flipper.setInAnimation(AnimationUtils.loadAnimation(this,  
  79.                     R.anim.push_right_in));  
  80.             this.flipper.setOutAnimation(AnimationUtils.loadAnimation(this,  
  81.                     R.anim.push_right_out));  
  82.             if (count > 1) {  
  83.                 this.flipper.showPrevious();  
  84.                 count--;  
  85.             }  
  86.             return true;  
  87.         }  
  88.         return true;  
  89.     }  
  90.   
  91.     public void onLongPress(MotionEvent arg0) {  
  92.         // TODO Auto-generated method stub  
  93.           
  94.     }  
  95.   
  96.     public boolean onScroll(MotionEvent arg0, MotionEvent arg1, float arg2,  
  97.             float arg3) {  
  98.         // TODO Auto-generated method stub  
  99.         return false;  
  100.     }  
  101.   
  102.     public void onShowPress(MotionEvent arg0) {  
  103.         // TODO Auto-generated method stub  
  104.           
  105.     }  
  106.   
  107.     public boolean onSingleTapUp(MotionEvent arg0) {  
  108.         // TODO Auto-generated method stub  
  109.         return false;  
  110.     }  
  111. }  
复制代码
二、view_flipper.xml布局文件
  1. view plainprint?
  2. <?xml version="1.0" encoding="utf-8"?>  
  3. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  4.     android:id="@+id/layout" android:orientation="horizontal"  
  5.     android:layout_width="fill_parent" android:layout_height="fill_parent"  
  6.     >  
  7.     <ViewFlipper android:id="@+id/view_flipper"  
  8.         android:layout_width="fill_parent" android:layout_height="fill_parent"  
  9.         android:persistentDrawingCache="animation" android:flipInterval="1000"  
  10.         android:inAnimation="@anim/push_left_in" android:outAnimation="@anim/push_left_out">  
  11.         <LinearLayout android:orientation="horizontal"   
  12.             android:layout_width="fill_parent" android:layout_height="fill_parent">  
  13.             <ImageView android:id="@+id/view_bg1" android:src="@drawable/bg1"  
  14.                 android:layout_width="fill_parent" android:layout_height="fill_parent"  
  15.                 >  
  16.             </ImageView>  
  17.         </LinearLayout>  
  18.         <LinearLayout android:orientation="horizontal"   
  19.             android:layout_width="fill_parent" android:layout_height="fill_parent">  
  20.             <ImageView android:id="@+id/view_bg2" android:src="@drawable/bg2"  
  21.                 android:layout_width="fill_parent" android:layout_height="fill_parent"  
  22.                 >  
  23.             </ImageView>  
  24.         </LinearLayout>  
  25.         <LinearLayout android:orientation="horizontal"  
  26.             android:layout_width="fill_parent" android:layout_height="fill_parent">  
  27.             <ImageView android:id="@+id/view_bg3" android:src="@drawable/bg3"  
  28.                 android:layout_width="fill_parent" android:layout_height="fill_parent"  
  29.             >  
  30.             </ImageView>  
  31.         </LinearLayout>  
  32.     </ViewFlipper>  
  33. </LinearLayout>   
复制代码

三、anim动画布局文件:

       1、push_left_in.xml布局文件:

  1. view plainprint?
  2. <span style="font-size:13px;"><?xml version="1.0" encoding="utf-8"?>  
  3. <set xmlns:android="http://schemas.android.com/apk/res/android">  
  4.         <translate android:fromXDelta="100%p" android:toXDelta="0"  
  5.                 android:duration="500" />  
  6.         <alpha android:fromAlpha="0.1" android:toAlpha="1.0"  
  7.                 android:duration="500" />  
  8. </set></span>  
  9. view plainprint?
  10. <strong>  
  11. </strong>   
复制代码

2、push_left_out.xml布局文件


  1. view plainprint?
  2. <?xml version="1.0" encoding="utf-8"?>  
  3. <set xmlns:android="http://schemas.android.com/apk/res/android">  
  4.         <translate android:fromXDelta="0" android:toXDelta="-100%p"  
  5.                 android:duration="500" />  
  6.         <alpha android:fromAlpha="1.0" android:toAlpha="0.1"  
  7.                 android:duration="500" />  
  8. </set>  
复制代码

3、push_right_in.xml布局文件

  1. view plainprint?
  2. <span style="font-size:13px;color:#000000;"><?xml version="1.0" encoding="UTF-8"?>  
  3. <set xmlns:android="http://schemas.android.com/apk/res/android">  
  4.         <translate android:fromXDelta="-100%p" android:toXDelta="0"  
  5.                 android:duration="500" />  
  6.         <alpha android:fromAlpha="0.1" android:toAlpha="1.0"  
  7.                 android:duration="500" />  
  8. </set></span>  
复制代码

4、push_right_out.xml布局文件

  1. view plainprint?
  2. <?xml version="1.0" encoding="UTF-8"?>  
  3. <set xmlns:android="http://schemas.android.com/apk/res/android">  
  4.         <translate android:fromXDelta="0" android:toXDelta="100%p"  
  5.                 android:duration="500" />  
  6.         <alpha android:fromAlpha="1.0" android:toAlpha="0.1"  
  7.                 android:duration="500" />  
  8. </set>  
复制代码

3.gif (87.12 KB, 下载次数: 6)

3.gif

2.gif (89.11 KB, 下载次数: 8)

2.gif

1.gif (92.4 KB, 下载次数: 6)

1.gif

原创粉丝点击