zoukankan      html  css  js  c++  java

  • 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.     }  

     

     

     

     
  • 相关阅读:
    try,catch,finally的简单问题
    设置类可序列化，写入VIewState
    jQuery实现购物车物品数量的加减 （针对GirdView的类似事件）
    js获取Gridview中的控件id
    asmx ASp.net AJAX使用 ScriptManager
    js返回上一页并刷新，JS实现关闭当前子窗口，刷新父窗口
    asp.net(c#)网页跳转七种方法小结
    在触发器中回滚和提交
    redis 缓存对象、列表
    spring cloud 停止服务
  • 原文地址：https://www.cnblogs.com/fx2008/p/3140343.html
Copyright © 2011-2022 走看看