ViewFlipper基本是实现及上下左右滑动
最近遇到了一些奇葩需求需要轮播上下左右滑动，原来的viewpage就不好用了，所有我就用了viewfipper控件
一步一步来，先熟悉下这个控件
一、基本实现
先写个最简单的例子xml version="1.0" encoding="utf-8"?>
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="recycleapplication.yundong.com.viewflipper.MainActivity">
android:id="@+id/flipper"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_marginTop="10dp"
android:flipInterval="2000" >
android:layout_width="fill_parent"
android:layout_height="300dip"
android:scaleType="fitXY"
android:src="@drawable/img_control_normal"/>
android:layout_width="fill_parent"
android:layout_height="300dip"
android:scaleType="fitXY"
android:src="@drawable/img_play_lan"/>
android:layout_width="fill_parent"
android:layout_height="300dip"
android:scaleType="fitXY"
android:src="@drawable/img_dd"/>
android:layout_width="fill_parent"
android:layout_height="300dip"
android:scaleType="fitXY"
android:src="@drawable/ic_launcher"/>
然后是代码简单的几行
flipper = (ViewFlipper) findViewById(R.id.flipper); flipper.setFlipInterval(2000);//设置切换的间隔时间 flipper.startFlipping();
二、高级实现——实现手势滑动
然后是手动实现的代码核心方法
flipper.showNext();//显示下一个视图 flipper.showPrevious();//显示上一个视图
public class Main2Activity extends AppCompatActivity implements View.OnTouchListener { ViewFlipper flipper; private GestureDetector mDetector; //手势检测 @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main2); flipper = (ViewFlipper) findViewById(R.id.flipper); flipper.setFlipInterval(2000);//设置切换的间隔时间 flipper.startFlipping(); flipper.setOnTouchListener(this); } @Override public boolean onTouch(View view, MotionEvent motionEvent) { return mDetector.onTouchEvent(motionEvent); } private class simpleGestureListener extends GestureDetector.SimpleOnGestureListener{ final int FLING_MIN_DISTANCE = 100, FLING_MIN_VELOCITY = 200; //不知道为什么，不加上onDown函数的话，onFling就不会响应 @Override public boolean onDown(MotionEvent e) { // TODO Auto-generated method stub Toast.makeText(Main2Activity.this, "ondown", Toast.LENGTH_SHORT).show(); return true;//这里需要返回true才能监听手势 } @Override public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) { // Fling left if (e1.getX() - e2.getX() > FLING_MIN_DISTANCE && Math.abs(velocityX) > FLING_MIN_VELOCITY) { flipper.showNext();//显示下一个视图 Toast.makeText(Main2Activity.this, "Fling Left", Toast.LENGTH_SHORT).show(); } else if (e2.getX() - e1.getX() > FLING_MIN_DISTANCE && Math.abs(velocityX) > FLING_MIN_VELOCITY) { // Fling right flipper.showPrevious();//显示上一个视图 Toast.makeText(Main2Activity.this, "Fling Right", Toast.LENGTH_SHORT).show(); } return true; } } }
三、动态添加图片及设置其它的方向和动效
先贴出动效写在了anim文件中
push_down_in
xmlns:android="http://schemas.android.com/apk/res/android">
android:duration="1000"
android:fromYDelta="-100%p"
android:toYDelta="0" />
android:duration="1000"
android:fromAlpha="0.0"
android:toAlpha="1.0" />
xmlns:android="http://schemas.android.com/apk/res/android">
android:duration="1000"
android:fromYDelta="0"
android:toYDelta="100%p" />
android:duration="1000"
android:fromAlpha="1.0"
android:toAlpha="0.0" />
xmlns:android="http://schemas.android.com/apk/res/android">
android:fromYDelta="100%p"
android:toYDelta="0"
android:duration="1000"/>
android:fromAlpha="0.0"
android:toAlpha="1.0"
android:duration="1000" />
xmlns:android="http://schemas.android.com/apk/res/android">
android:fromYDelta="0"
android:toYDelta="-100%p"
android:duration="1000"/>
android:fromAlpha="1.0"
android:toAlpha="0.0"
android:duration="1000" />
public class Main4Activity extends AppCompatActivity implements View.OnTouchListener{ ViewFlipper flipper; private GestureDetector mDetector; //手势检测 @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main4); flipper = (ViewFlipper) findViewById(R.id.flipper); // flipper.setFlipInterval(2000);//设置切换的间隔时间 // flipper.startFlipping(); flipper.addView(getImageView(R.drawable.ic_launcher)); flipper.addView(getImageView(R.drawable.img_control_normal)); flipper.addView(getImageView(R.drawable.img_dd)); flipper.addView(getImageView(R.drawable.img_play_lan)); flipper.setOnTouchListener(this); mDetector = new GestureDetector(new Main4Activity.simpleGestureListener()); } //生成imageview private ImageView getImageView(int id){ ImageView imageView = new ImageView(this); imageView.setImageResource(id); return imageView; } @Override public boolean onTouch(View view, MotionEvent motionEvent) { return mDetector.onTouchEvent(motionEvent); } private class simpleGestureListener extends GestureDetector.SimpleOnGestureListener{ final int FLING_MIN_DISTANCE = 100, FLING_MIN_VELOCITY = 200; //不知道为什么，不加上onDown函数的话，onFling就不会响应 @Override public boolean onDown(MotionEvent e) { // TODO Auto-generated method stub Toast.makeText(Main4Activity.this, "ondown", Toast.LENGTH_SHORT).show(); return true;//这里需要返回true才能监听手势 } @Override public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) { // Fling left 从右向左划 if (e1.getX() - e2.getX() > FLING_MIN_DISTANCE && Math.abs(velocityX) > FLING_MIN_VELOCITY) { flipper.setOutAnimation(AnimationUtils.loadAnimation(Main4Activity.this, R.anim.push_left_out)); flipper.setInAnimation(AnimationUtils.loadAnimation(Main4Activity.this, R.anim.push_left_in)); flipper.showNext();//显示下一个视图 Toast.makeText(Main4Activity.this, "Fling Left", Toast.LENGTH_SHORT).show(); } else if (e2.getX() - e1.getX() > FLING_MIN_DISTANCE && Math.abs(velocityX) > FLING_MIN_VELOCITY) { // Fling right 从左向右划 flipper.setOutAnimation(AnimationUtils.loadAnimation(Main4Activity.this, R.anim.push_right_out)); flipper.setInAnimation(AnimationUtils.loadAnimation(Main4Activity.this, R.anim.push_right_in)); flipper.showPrevious();//显示上一个视图 Toast.makeText(Main4Activity.this, "Fling Right", Toast.LENGTH_SHORT).show(); }else if (e1.getY()-e2.getY()>FLING_MIN_DISTANCE&& Math.abs(velocityY) > FLING_MIN_VELOCITY){ //从下向上划 flipper.setOutAnimation(AnimationUtils.loadAnimation(Main4Activity.this, R.anim.push_up_out)); flipper.setInAnimation(AnimationUtils.loadAnimation(Main4Activity.this, R.anim.push_up_in)); flipper.showNext();//显示下一个视图 }else if (e2.getY()-e1.getY()>FLING_MIN_DISTANCE&& Math.abs(velocityY) > FLING_MIN_VELOCITY){ //从上向下划 flipper.setOutAnimation(AnimationUtils.loadAnimation(Main4Activity.this, R.anim.push_down_out)); flipper.setInAnimation(AnimationUtils.loadAnimation(Main4Activity.this, R.anim.push_down_in)); flipper.showPrevious();//显示上一个视图 } flipper.setEnabled(true); return true; } } }