简单布局:
<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" android:paddingLeft="16dp" android:paddingRight="16dp" android:paddingTop="16dp" android:paddingBottom="16dp" tools:context=".MainActivity"> <ViewFlipper android:id="@+id/flipper" android:layout_width="match_parent" android:layout_height="match_parent"> </ViewFlipper> </RelativeLayout>
实现步骤:
第一步:让MainActivity实现GestureDetector.OnGestureListener接口,并实现其所有方法
public class MainActivity extends AppCompatActivity implements GestureDetector.OnGestureListener
@Override public boolean onDown(MotionEvent e) { return false; } @Override public void onShowPress(MotionEvent e) { } @Override public boolean onSingleTapUp(MotionEvent e) { return false; } @Override public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) { return false; } @Override public void onLongPress(MotionEvent e) { } @Override public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) { return false; }
第二步:定义一个全局的手势检测器
GestureDetector detector;
在类里面定义全局参数
Animation[] animation = new Animation[4]; final int distance = 50; //记录手势动作两点之间的最小距离 private int[] images = new int[]{R.drawable.img01,R.drawable.img02,R.drawable.img03,R.drawable.img04}; ViewFlipper flipper;
第三步:将要显示的图片加载到ViewFlipper中,并初始化动画数组
flipper = findViewById(R.id.flipper); for(int i = 0;i < images.length;i++){ ImageView imageView = new ImageView(this); imageView.setImageResource(images[i]); flipper.addView(imageView); }
完整的onCreate()方法为
protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); //第一个参数:上下文对象;第二个参数:手势监听器对象 detector = new GestureDetector(MainActivity.this,this); //第三步:将要显示的图片加载到ViewFlipper中,并初始化动画数组 flipper = findViewById(R.id.flipper); for(int i = 0;i < images.length;i++){ ImageView imageView = new ImageView(this); imageView.setImageResource(images[i]); flipper.addView(imageView); } animation[0] = AnimationUtils.loadAnimation(this,R.anim.slide_in_left); animation[1] = AnimationUtils.loadAnimation(this,R.anim.slide_out_left); animation[2] = AnimationUtils.loadAnimation(this,R.anim.slide_in_right); animation[3] = AnimationUtils.loadAnimation(this,R.anim.slide_out_right); }
第四步:在onFling()方法中通过触摸事件的X坐标判断是向左滑动还是向右滑动,并且为其设置动画
public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) { //第四步:在onFling()方法中通过触摸事件的X坐标判断是向左滑动还是向右滑动,并且为其设置动画 //从右向左滑 if(e1.getX()-e2.getX()>distance ){ flipper.setInAnimation(animation[2]); flipper.setOutAnimation(animation[1]); flipper.showPrevious(); return true; } //从左向右滑 else if(e2.getX()-e1.getX()>distance ){ flipper.setInAnimation(animation[0]); flipper.setOutAnimation(animation[3]); flipper.showNext(); return true; } return false; }
第五步:将Activity上的触摸事件交给GesrureDetector处理
@Override public boolean onTouchEvent(MotionEvent event) { return detector.onTouchEvent(event); }
注意:需要导入动画文件
slide_in_left.xml
<?xml version="1.0" encoding="utf-8"?> <translate xmlns:android="http://schemas.android.com/apk/res/android" android:duration="500" android:fromXDelta="-100%p" android:interpolator="@android:anim/accelerate_interpolator" android:toXDelta="0%p" > </translate>
slide_out_left.xml
<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="500"
android:fromXDelta="0%p"
android:interpolator="@android:anim/accelerate_interpolator"
android:toXDelta="-100%p" >
</translate>
slide_in_right.xml
<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="500"
android:fromXDelta="100%p"
android:interpolator="@android:anim/accelerate_interpolator"
android:toXDelta="0%p" >
</translate>
slide_out_right.xml
<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="500"
android:fromXDelta="0%p"
android:interpolator="@android:anim/accelerate_interpolator"
android:toXDelta="100%p" >
</translate>
至此,一个简单的可以左右翻动的相册就可以展现了