您的位置:首页 > 移动开发 > Android开发

android的左右滑动效果实现-ViewFlipper

2015-12-22 13:31 531 查看
说到android的左右滑动效果我们可以说是在每个应用上面都可以看到这样的效果,不管是微博,还是QQ等。实现左右滑动的方式很多,有ViewPaer(不过这个和需要android-support-v4.jar的支持),自定义实现Viewgroup,gallery等都可以达到这种效果。这里做下ViewFliper实现左右滑动的效果。
以下会会用到的技术有: 1、ViewFlipper 2、GestureDetector 3、Animation 主要是这三个类再起作用。
原理:向左向右滑动主要是依赖手势来控制,手势向右滑动就调用 viewFlipper.showNext();方法,同理,向左滑动就会去调用viewFlipper.showPrevious();方法。
接下来直接上代码:
首先在布局文件中添加ViewFlipper的标签:

复制内容到剪贴板
代码:

<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" >
<ViewFlipper          android:id="@+id/viewFlipper"         android:layout_width="match_parent"         android:layout_height="match_parent"         ></ViewFlipper>
< /RelativeLayout>


编写代码:

复制内容到剪贴板
代码:

package com.xzw.ui;
import android.app.Activity;  import android.os.Bundle;  import android.util.Log;  import android.view.GestureDetector;  import android.view.GestureDetector.OnGestureListener;  import android.view.MotionEvent;  import android.view.View;  import android.view.ViewGroup;  import android.view.Window;  import android.view.animation.Animation;  import android.view.animation.AnimationUtils;  import android.widget.ImageView;  import android.widget.ViewFlipper;  /**  * 左右滑动demo  * @author xzw  *  */  public class MainActivity extends Activity implements OnGestureListener {                    private static final String TAG = "MainActivity";                    private ViewFlipper viewFlipper;          private GestureDetector detector; //手势检测
Animation leftInAnimation;          Animation leftOutAnimation;          Animation rightInAnimation;          Animation rightOutAnimation;      @Override      public void onCreate(Bundle savedInstanceState) {          super.onCreate(savedInstanceState);          requestWindowFeature(Window.FEATURE_NO_TITLE);          setContentView(R.layout.activity_main);                    viewFlipper = (ViewFlipper)findViewById(R.id.viewFlipper);          detector = new GestureDetector(this);                    //往viewFlipper添加View          viewFlipper.addView(getImageView(R.drawable.new_feature_1));          viewFlipper.addView(getImageView(R.drawable.new_feature_2));          viewFlipper.addView(getImageView(R.drawable.new_feature_3));          viewFlipper.addView(getImageView(R.drawable.new_feature_4));          viewFlipper.addView(getImageView(R.drawable.new_feature_5));          viewFlipper.addView(getImageView(R.drawable.new_feature_6));                    //动画效果             leftInAnimation = AnimationUtils.loadAnimation(this, R.anim.left_in);                  leftOutAnimation = AnimationUtils.loadAnimation(this, R.anim.left_out);                  rightInAnimation = AnimationUtils.loadAnimation(this, R.anim.right_in);                  rightOutAnimation = AnimationUtils.loadAnimation(this, R.anim.right_out);      }
private ImageView getImageView(int id){              ImageView imageView = new ImageView(this);              imageView.setImageResource(id);              return imageView;      }
@Override      public boolean onTouchEvent(MotionEvent event) {                     return this.detector.onTouchEvent(event); //touch事件交给手势处理。     }                @Override          public boolean onDown(MotionEvent e) {                  // TODO Auto-generated method stub                  return false;          }
@Override          public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,                          float velocityY) {                  Log.i(TAG, "e1="+e1.getX()+" e2="+e2.getX()+" e1-e2="+(e1.getX()-e2.getX()));                                                                if(e1.getX()-e2.getX()>120){                          viewFlipper.setInAnimation(leftInAnimation);                          viewFlipper.setOutAnimation(leftOutAnimation);                      viewFlipper.showNext();//向右滑动                     return true;                  }else if(e1.getX()-e2.getY()<-120){                          viewFlipper.setInAnimation(rightInAnimation);                          viewFlipper.setOutAnimation(rightOutAnimation);                          viewFlipper.showPrevious();//向左滑动                         return true;                  }                  return false;          }
@Override          public void onLongPress(MotionEvent e) {                  // TODO Auto-generated method stub                            }
@Override          public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX,                          float distanceY) {                  // TODO Auto-generated method stub                  return false;          }
@Override          public void onShowPress(MotionEvent e) {                  // TODO Auto-generated method stub                            }
@Override          public boolean onSingleTapUp(MotionEvent e) {                  // TODO Auto-generated method stub                  return false;          }              }


接下来我们编写动画效果的xml文件,你也可以通过代码实现,这里使用xml配置,个人感觉比较简单。
left_in.xml

复制内容到剪贴板
代码:

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


left_out.xml

复制内容到剪贴板
代码:

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


right_in.xml

复制内容到剪贴板
代码:

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


right_out.xml

复制内容到剪贴板
代码:

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


以上就是完整的代码,看起来很简单吧。 看下面的效果图吧,秋天到了,图片也选择的有秋意点儿哈。 附上源代码:http://down.51cto.com/data/579206
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: