Android开发(8) 使用ViewFlipper来用手势切换视图

概述

使用android手机肯定很喜欢用手指把画面拖来拖去的感觉。这样的切换画面让人非常方便。在很多App的第一次启动时的引导页都有类似效果。

控件

  • ViewFlipper 视图的切换容器视图,它有很多子视图,可以使用showPrevious,showNext来向前或者向后切换视图,不过是没有动画效果的

  • Animation 为切换增加动画

  • GestureDetector 手势侦查器,他提供了手势的一些事件,它封装了一些手指在屏幕的移动方向的处理,转换成相应的事件

实现步骤:

  1. 写一个窗体,放置一个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>
  1. 注册窗体的 onTouchEvent事件,这个事件会在窗体被触摸时触发。在这个事件触发后,将事件触发后的参数扔给一个GestureDetector对象来处理。

  2. 准备一个GestureDetector对象,为第一步来使用。GestureDetector对象将用户的,时候触摸动作转换成相应的手势事件。这些事件有:

    onDown,onFling,onLongPress,onScroll,onShowPress,onSingleTapUp。本文我们只用到onFling手势

  3. 处理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();
  1. 如何处理动画呢?

为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是延迟时间。

完整的代码下载

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,547评论 6 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,399评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,428评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,599评论 1 274
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,612评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,577评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,941评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,603评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,852评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,605评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,693评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,375评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,955评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,936评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,172评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,970评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,414评论 2 342

推荐阅读更多精彩内容

  • 出处:炎之铠邮箱:yanzhikai_yjk@qq.com博客地址:http://blog.csdn.net/to...
    炎之铠阅读 9,624评论 1 42
  • 手势图片控件 PinchImageView 点击图片框架 photoView packagecom.example...
    Ztufu阅读 717评论 0 1
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,398评论 25 707
  • 以前看爱情保卫战,最喜欢的就是涂磊了,因为他总是可以一针见血的指出关键问题所在。 只是最新的一期却让我失望了(告诉...
    怕冷的喵喵喵阅读 380评论 2 1
  • 曾经我想杀过一只老鼠,但是后来我放过它了。我见它惊慌失措,无处可逃。突然的感到一种悲哀。为它,也为我自己。或许,就...
    YANandYAN阅读 232评论 0 0