Android开发(8) 使用ViewFlipper来用手势切换视图
Android开发(8) 使用ViewFlipper来用手势切换视图
张云飞Vir
发布于 2020-03-16 15:03:26
发布于 2020-03-16 15:03:26
文章被收录于专栏：写代码和思考
概述
使用android手机肯定很喜欢用手指把画面拖来拖去的感觉。这样的切换画面让人非常方便。在很多App的第一次启动时的引导页都有类似效果。
控件
- ViewFlipper 视图的切换容器视图，它有很多子视图，可以使用showPrevious，showNext来向前或者向后切换视图，不过是没有动画效果的
- Animation 为切换增加动画
- GestureDetector 手势侦查器，他提供了手势的一些事件，它封装了一些手指在屏幕的移动方向的处理，转换成相应的事件
实现步骤：
- 写一个窗体，放置一个ViewFlipper 在视图里。并为ViewFlipper 添加子视图。
<ViewFlipper android:layout_width="fill_parent"
android:id="@+id/viewFlipper2"
android:layout_height="fill_parent">
<LinearLayout android:id="@+id/linearLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView android:text="第一"
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</TextView>
</LinearLayout>
<LinearLayout android:id="@+id/linearLayout2"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView android:text="第二"
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"></TextView>
< /LinearLayout>
<LinearLayout android:id="@+id/linearLayout3"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView android:text="第三"
android:id="@+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</TextView>
</LinearLayout>
</ViewFlipper>- 注册窗体的 onTouchEvent事件，这个事件会在窗体被触摸时触发。在这个事件触发后，将事件触发后的参数扔给一个GestureDetector对象来处理。
- 准备一个GestureDetector对象，为第一步来使用。GestureDetector对象将用户的，时候触摸动作转换成相应的手势事件。这些事件有： onDown，onFling，onLongPress，onScroll，onShowPress，onSingleTapUp。本文我们只用到onFling手势
- 处理onFling手势的操作。onFling事件触发时，由操作系统传入的参数有MotionEvent e1, MotionEvent e2, float velocityX, float velocityY。 参数e1,和e2，是手势触发 的 开始位置和结束位置。就是你的手指第一次点击，和最后离开的屏幕坐标位置。我们用e1,和e2，来判断用户是从左到友移动了手指或者从友到左移动了手指。判断的方法为： float x1 = e1.getX(); float x2 = e2.getX(); if (x1 - x2 < -100) //从左往右拖动，100代表长度。 { .... } else if (x1 - x2 > 100) {//从右往左拖动，100代表长度 ... }
5.由于判断了手势，那么我们可以对ViewFlipper的子视图进行切换了，方法如下
//让flipper 前移
this.ViewFlipper1.showPrevious();- 如何处理动画呢？
为flipper(ViewFlipper )指定一个animation 对象就可以了。
Animation animation =
AnimationUtils.loadAnimation(getApplicationContext(), R.anim.filp_l2r);
//指定一个动画
this.flipper.setAnimation(animation);如上代码所示AnimationUtils.loadAnimation指定一个动画描述的资源文件。我们的动画效果是在这里的资源文件里描述的。
从左往右的动画
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate
android:fromXDelta="0%p"
android:toXDelta="100%p"
android:duration="1000" />
</set> 从右往左的效果
<?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%p"
android:duration="1000" />
</set> fromXDelta是开始的x坐标，是相对于屏幕窗体的坐标位置。toXDelta是结束位置。duration是延迟时间。
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
