ViewFlipper使用详解-白红宇

ViewFlipper使用详解

阅读量：2021 次

发布时间：2019-04-28

本文共 7578 字，大约阅读时间需要 25 分钟。

前言：今天，试用期绩效考核通过了，从C++转到android还是很有难度的，这几个月来虽然一直在学习，但相比他们还是差很多，没关系，没有人是一下生就会的，知识总是慢慢积累出来的，只是不停下来，总有一天会到达彼岸，我相信，我能行！

梦想还是要有的，万一实现了呢——阿里IPO

一、基本实现

ViewFlipper是一个切换控件，一般用于图片的切换，当然它是可以添加View的，而不限定只用于ImageView，当然我们也可以自定义View，只是我们经常利用ViewFlipper来实现的是ImageView的切换，如果切换自定义的View，倒还不如使用ViewPager来做。

下面先看一下实现的效果：（实现四张图片的自动切换）

1、在XML中的布局：

在ViewFlipper中，加入四个ImageView控件，其中flipInterval属性是用来设置多少毫秒自动显示下一个示图;

2、JAVA代码：

public class MainActivity extends Activity {	ViewFlipper flipper;    @Override    public void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        flipper = (ViewFlipper) findViewById(R.id.flipper);		flipper.startFlipping();    }    }

这部分代码非常简单，直接调用ViewFlipper的startFlipping（）函数，开始滑动。

可见，ViewFlipper使用起来非常简单，直接在xml中布好以后，直接就能用了。

源码在文章底部提供下载；

二、高级实现——实现手势滑动

这部分根据用户向左，向右滑的手拔势来判断当前是显示前一张图片，还是后一张图片，效果图如下：

找到了一个Gif录像工具：挺好，还不需要安装。

首先，这里涉及到两个方面的内容：

（1）显示ViewFlipper中，当前图片的上一张，和下一张图片的接口：

ViewFlipper::showNext();  //显示下一个视图ViewFlipper::showPrevious(); //显示上一个视图

（2）用户手势检测

这里要用到GestureDetector,我这里也会简单提一下GestureDetector的使用方法,更详细的请参看

1、XML中布局不变：

2、JAVA代码

同样，先给出完整代码，然后逐步讲解：

public class MainActivity extends Activity implements OnTouchListener {	private ViewFlipper mFlipper;	private GestureDetector mDetector; //手势检测	@Override	protected void onCreate(Bundle savedInstanceState) {		super.onCreate(savedInstanceState);		setContentView(R.layout.activity_main);				mFlipper = (ViewFlipper) findViewById(R.id.flipper);			mFlipper.setOnTouchListener(this);				mDetector = new GestureDetector(new simpleGestureListener());	}		public boolean onTouch(View v, MotionEvent event) {		return mDetector.onTouchEvent(event);	}		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(MainActivity.this, "ondown", Toast.LENGTH_SHORT).show();   			return 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) {    				mFlipper.showNext();                Toast.makeText(MainActivity.this, "Fling Left", Toast.LENGTH_SHORT).show();                } else if (e2.getX() - e1.getX() > FLING_MIN_DISTANCE                        && Math.abs(velocityX) > FLING_MIN_VELOCITY) {                    // Fling right                  	mFlipper.showPrevious();            	                Toast.makeText(MainActivity.this, "Fling Right", Toast.LENGTH_SHORT).show();                }                  return true;  		}	}}

根据中GestureDector的四步走策略来看这段代码：

（1）创建OnGestureListener监听函数：

我们这里使用SimpleOnGestureListener类来实现监听函数，因为这里不需要必须写出接口中的所有没必要的函数，（不知道为什么，我这里必须要实现OnDown函数，如果没有这个函数的重写，OnFling就不会响应，真是奇怪），然后在OnFling中根据X轴方向移动的距离和速度来判断当前用户是向左滑还是向右滑，从而利用showPrevious()或者showNext()来显示上一张或者下一张图片。关于这一部分代码，如果有不理解的同学，还是乖乖看这篇文章吧，这段代码在这篇文章的第五部分（五、OnFling应用——识别向左滑还是向右滑）

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(MainActivity.this, "ondown", Toast.LENGTH_SHORT).show();   			return 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) {    				mFlipper.showNext();                Toast.makeText(MainActivity.this, "Fling Left", Toast.LENGTH_SHORT).show();                } else if (e2.getX() - e1.getX() > FLING_MIN_DISTANCE                        && Math.abs(velocityX) > FLING_MIN_VELOCITY) {                    // Fling right                  	mFlipper.showPrevious();            	                Toast.makeText(MainActivity.this, "Fling Right", Toast.LENGTH_SHORT).show();                }                  return true;  		}	}

2、创建GestureDetector实例mGestureDetector：

private GestureDetector mDetector;

3、onTouch(View v, MotionEvent event)中拦截：

public boolean onTouch(View v, MotionEvent event) {		return mDetector.onTouchEvent(event);	}

4、控件绑定

mFlipper = (ViewFlipper) findViewById(R.id.flipper);	mFlipper.setOnTouchListener(this);

根据这四步，代码也就结束了。

源码在文章底部提供下载；

但我们这里有个问题在于，我们这里的ImageView是写死的，但我们在使用中一般是要动态加入ImageView的，这就是下面的内容喽。

三、动态添加图片

上面，我们都是在ViewFlipper里直接加入ImageView来实现本地加载的VIew序列，但在程序中，我们一般是要动态加载View的，动态加载View，用到了ViewFlipper::addView函数。下面在上面的例子基础上更改一下，实现同样的功能：

1、XML代码：

2、JAVA代码：

public class MainActivity extends Activity implements OnTouchListener {	private ViewFlipper mFlipper;	private GestureDetector mDetector; //手势检测	@Override	protected void onCreate(Bundle savedInstanceState) {		super.onCreate(savedInstanceState);		setContentView(R.layout.activity_main);				mFlipper = (ViewFlipper) findViewById(R.id.flipper);			mFlipper.addView(getImageView(R.drawable.img_1));		mFlipper.addView(getImageView(R.drawable.img_2));		mFlipper.addView(getImageView(R.drawable.img_3));		mFlipper.addView(getImageView(R.drawable.img_4));		mFlipper.setOnTouchListener(this);				mDetector = new GestureDetector(new simpleGestureListener());	}		private ImageView getImageView(int id){	  ImageView imageView = new ImageView(this);	  imageView.setImageResource(id);	  return imageView;	}		public boolean onTouch(View v, MotionEvent event) {		return mDetector.onTouchEvent(event);	}		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(MainActivity.this, "ondown", Toast.LENGTH_SHORT).show();   			return 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) {    				mFlipper.showNext();                Toast.makeText(MainActivity.this, "Fling Left", Toast.LENGTH_SHORT).show();                } else if (e2.getX() - e1.getX() > FLING_MIN_DISTANCE                        && Math.abs(velocityX) > FLING_MIN_VELOCITY) {                    // Fling right                  	mFlipper.showPrevious();            	                Toast.makeText(MainActivity.this, "Fling Right", Toast.LENGTH_SHORT).show();                }                  return true;  		}	}}

在上面这段代码中，一切都没变，只是多了一个函数和几个addView()

private ImageView getImageView(int id){	  ImageView imageView = new ImageView(this);	  imageView.setImageResource(id);	  return imageView;	}

这段代码是自己写的，通过传进去图片的resourceID，来构造对应的ImageView，然后利用addView（）添加到ViewFlipper中：

mFlipper = (ViewFlipper) findViewById(R.id.flipper);			mFlipper.addView(getImageView(R.drawable.img_1));		mFlipper.addView(getImageView(R.drawable.img_2));		mFlipper.addView(getImageView(R.drawable.img_3));		mFlipper.addView(getImageView(R.drawable.img_4));

OK啦，到这就讲完了。

源码在文章底部提供下载；

三个源码，放在一起了，下载地址：

请大家尊重原创者版权，转载请标明出处：，谢谢！