Android ViewFlipper的简单使用

 更新时间:2017年06月01日 10:33:54   作者:Lindroy  
这篇文章主要为大家详细介绍了Android ViewFlipper的简单使用,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

大家都使用过ViewPager,但是ViewPager还有一个兄弟,那就是ViewFlipper。两者的名字非常相似,我们可以将ViewPager理解成“一页一页的视图”,ViewFlipper则是“快速翻转的视图”,但后者的使用率却远不及前者,不过这并不意味着ViewFlipper就弱了。现在我们就来拜访一下经常被冷落的ViewFlipper。

1、创建工程及页面视图布局

在Android Studio中新建一个工程,实现这样一个效果:创建红、橙、绿、蓝四种颜色的页面,然后通过ViewFlipper让它们来回切换。四个页面布局文件的名称如下所示:

item_view1.xml的代码如下:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:orientation="vertical"
 android:background="@android:color/holo_red_light"
 android:layout_width="match_parent"
 android:layout_height="match_parent">
</LinearLayout>

另外三个布局的代码只要把背景色换掉就可以了。

2、添加布局至ViewFlipper

页面创建好了,那我们怎么把它放置到ViewFlipper中呢?很简单,ViewFlipper支持include标签添加页面,我们只需在activity_main.xml中将四个布局依次include进去即可。

直接运行就可以看到下面的效果了:

除了直接在布局文件中添加页面外,也可以在代码中添加,把activity_mai.xml中include标签注释掉,然后在MainActivity中初始化ViewFlipper之后再添加如下的代码:

 //要添加的页面布局ID
 private int viewIds[] = {R.layout.item_view1, R.layout.item_view2, R.layout.item_view3, R.layout.item_view4};
 /**
 * 将页面添加进ViewFlipper
 */
 private void addViews() {
 View itemView;
 for (int viewId : viewIds) {
  itemView = View.inflate(this,viewId,null);
  viewFlipper.addView(itemView);
 }
 }

然后在onCreate中调用addViews方法即可。

3、添加页面切换动画

页面切换的效果我们是实现了,但是没有变化过程,看起来太生硬了,累眼睛。如果能有动画效果的话就会舒服很多。这里,我们就要用到两个新属性了:
- inAnimation:视图进入时的动画效果
- outAnimation:视图退出时的动画效果
这两个属性也可以在代码中设置的,稍后我们会用到。现在,我们就创建所需要的动画文件。比如,我想要实现左右循环滑动的动画效果,那么就可以分成两种情况来讨论:一种是新的视图从左边进入,原有的视图从右边退出,即从左往右滑动;另一种是新视图从右边进入,原有的视图从左边退出,即从右往左滑动。弄清楚所有的动画效果之后,我们就在res文件夹下新建一个anim文件夹,创建如下如下四种动画效果:

left_in.xml

视图从左边进入界面的动画:

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

left_out.xml

视图从左边退出界面的动画:

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

right_in.xml

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

right_out.xml

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

现在我们先来试试从左往右转的动画效果。在布局中给ViewFlipper加上如下的属性:

android:inAnimation="@anim/left_in"
android:outAnimation="@anim/right_out"

运行一下,就可以实现从左往右滑动的动画效果了(GIF图有点失真,不过效果是没问题的)。

相信不用我说,你也知道怎么让它从右往左滑动了吧?

4、手指左右滑屏一(使用触摸监听事件实现)

看着画面自顾自地滑动,是不是心痒痒的?没关系,下面我们就来让它响应我们手指的滑动。在此之前,先做点准备工作:前往布局文件,去掉动画属性,并将autoStart属性设为false。

要让它听从“指挥”,我们可以先继承OnTouchListener接口,然后实现onTouch方法:

 private float startX; //手指按下时的x坐标
 private float endX; //手指抬起时的x坐标
 private float moveX = 100f; //判断是否切换页面的标准值
 /**
 * 触摸监听事件
 * @param v
 * @param event
 * @return
 */
 @Override
 public boolean onTouch(View v, MotionEvent event) {
 switch (event.getAction()) {
  case MotionEvent.ACTION_DOWN:
  //手指按下时获取起始点坐标
  startX = event.getX();
  break;
  case MotionEvent.ACTION_UP:
  //手指抬起时获取结束点坐标
  endX = event.getX();
  //比较startX和endX,判断手指的滑动方向
  if (endX - startX > moveX) { //手指从左向右滑动
   viewFlipper.setInAnimation(this, R.anim.left_in);
   viewFlipper.setOutAnimation(this, R.anim.right_out);
   viewFlipper.showPrevious();
  } else if (startX - endX > moveX) { //手指向右向左滑动
   viewFlipper.setInAnimation(this, R.anim.right_in);
   viewFlipper.setOutAnimation(this, R.anim.left_out);
   viewFlipper.showNext();
  }
  break;
 }
 return true;
 }

上面的代码不难,注释也写得比较清楚了。总体的思路就是获取手指按下和抬起时的坐标,然后判断是向左还是向右滑动。值得注意的是showPrevious和showNext方法,前者是显示上一个视图,后者则是显示后一个视图。最后还要记住,返回值要改为true,否则触摸事件是无法响应的。

效果图如下,可以向左,也可以向右。

5、手指左右滑屏二(使用手势监听事件实现)

除了触摸监听事件之外,我们也可以用手势监听事件OnGestureListener实现同样的效果,但继承了该接口之后要实现一连串的方法,代码一下子膨胀起来了,而我们需要的只是其中一个方法啊。好在Android还提供了一个类SimpleOnGestureListener,这样我们只要自定义一个类继承它,然后实现我们需要的方法就可以了:

 //创建手势监听器
 GestureDetector gestureDetector = new GestureDetector(this, new MyGestureListener());

 /**
 * 自定义手势监听类
 */
 class MyGestureListener extends GestureDetector.SimpleOnGestureListener{
 @Override
 public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {
  if (e2.getX() - e1.getX() > moveX){
  viewFlipper.setInAnimation(MainActivity.this, R.anim.left_in);
  viewFlipper.setOutAnimation(MainActivity.this, R.anim.right_out);
  viewFlipper.showPrevious();
  } else if (e2.getX() - e1.getX() < moveX){
  viewFlipper.setInAnimation(MainActivity.this, R.anim.right_in);
  viewFlipper.setOutAnimation(MainActivity.this, R.anim.left_out);
  viewFlipper.showNext();
  }
  return true;
 }
 }


这里的onFling方法得解释一下,它表示的是手指在屏幕上移动然后松开的手势,也就是滑动。前面两个参数分别表示手指按下和松开时的事件,通过它们的对象去调用getX()方法就可以获取滑动前后的坐标了。后面的步骤就跟我们在触摸事件里面的一样,相信你能理解的。

我一开始以为到这里就大功告成了,可运行之后却纹丝不动!仔细查看文档,发现还必须到触摸监听方法中调用onTouchEvent方法才行,否则触摸事件不会起作用的。

 @Override
 public boolean onTouch(View v, MotionEvent event) {
 gestureDetector.onTouchEvent(event);
 return true;
 }

6、后记

ViewFlipper的用法就告一段落了,写这篇文章的时候我还顺便复习了手势监听事件等知识,也希望你能有所收获。下面是源码:
ViewFlipperDemo

7、参考文章

谷歌官方文档之ViewFlipper
Android的手势操作识别

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • Android使用友盟集成QQ、微信、微博等第三方分享与登录方法详解

    Android使用友盟集成QQ、微信、微博等第三方分享与登录方法详解

    之前的项目第三方分享和登录一直都使用ShareSDK实现的。为了统一使用友盟的全家桶,所以三方分享和登录也就选择了友盟,这里为大家整理出详细方法
    2018-03-03
  • android开发框架afinal使用方法小结

    android开发框架afinal使用方法小结

    这篇文章主要为大家详细总结了android开发框架afinal使用方法,注解功能、文件上传下载功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-11-11
  • Android 美食大转盘详解流程

    Android 美食大转盘详解流程

    今天为大家带来一篇Android实例项目,美食大转盘,当你还在为明天吃什么而烦恼时,它将帮你做出最佳的选择,美食大转盘详细流程来咯
    2021-11-11
  • Android基于ViewPager实现类似微信页面切换效果

    Android基于ViewPager实现类似微信页面切换效果

    这篇文章主要介绍了Android基于ViewPager实现类似微信页面切换效果,通过Fragment适配器实现页面切换效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-05-05
  • 一文详解在Android中Service和AIDL的使用

    一文详解在Android中Service和AIDL的使用

    Service是Android四大组件之一,它是不依赖于用户界面的,就是因为Service不依赖与用户界面,本文将详细介绍在Android中Service和AIDL的使用,感兴趣的同学可以参考本文
    2023-04-04
  • Android与H5互调详细介绍

    Android与H5互调详细介绍

    这篇文章主要介绍了Android与H5互调详细介绍的相关资料,需要的朋友可以参考下
    2017-04-04
  • Android实现合并生成分享图片功能

    Android实现合并生成分享图片功能

    这篇文章主要为大家详细介绍了Android实现合并生成分享图片功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-03-03
  • Android使用HttpURLConnection实现网络访问流程

    Android使用HttpURLConnection实现网络访问流程

    早些时候其实我们都习惯性使用HttpClient,但是后来Android6.0之后不再支持HttpClient,需要添加Apache的jar才行,所以,就有很多开发者放弃使用HttpClient了,HttpURLConnection毕竟是标准Java接口(java.net) ,适配性还是很强的
    2022-12-12
  • Android开发 OpenGL ES绘制3D 图形实例详解

    Android开发 OpenGL ES绘制3D 图形实例详解

    这篇文章主要介绍了Android开发 OpenGL ES绘制3D 图形实例详解的相关资料,需要的朋友可以参考下
    2016-09-09
  • Android 实现的下拉刷新效果

    Android 实现的下拉刷新效果

    最近在使用赶集网的时候,发现他的下拉刷新十分有趣,是一头飞行的小毛驴,作为开发者自然心里痒痒打算把它做出来顺便锻炼下自己的动手能力。本文讲解如何仿照实现该效果
    2021-06-06

最新评论