Android中ViewFlipper的使用及设置动画效果实例详解

时间:2021-08-12 08:59:49

本文实例讲述了android中viewflipper的使用及设置动画效果。分享给大家供大家参考,具体如下:

说到左右滑动,其实实现左右滑动的方式很多,有viewpaer,自定义实现viewgroup,gallery等都可以达到这种效果。这里做下viewfliper实现左右滑动的效果。
会用到以下的技术:

1、viewflipper
2、gesturedetector
3、animation

主要是这三个类在起作用。

viewflipper,不妨把它看做一个容器吧,你可以把许多的view放在这个容器中,让它展示给用户,虽然它每次只展示一个view,我感觉它的用途更好是作为广告展示,比如类似购物网站那样的广告滚动展示。比如可以设置自动播放功能,就可以滚动广告了!

原理:向左向右滑动主要是依赖手势来控制,手势向右滑动就调用 viewflipper.shownext()方法,同理,向左滑动就会去调用viewflipper.showprevious()方法。

效果图如下:

Android中ViewFlipper的使用及设置动画效果实例详解

接下来直接上代码:

首先在布局文件中添加viewflipper的标签:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<?xml version="1.0" encoding="utf-8"?>
<relativelayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  android:background="@drawable/pattern1" >
  <button
    android:id="@+id/treasure_chest_btn"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignparentright="true"
    android:background="@drawable/treasure" />
  <viewflipper
    android:id="@+id/viewflipper"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_below="@id/treasure_chest_btn" >
  </viewflipper>
  <button
    android:id="@+id/garbage_btn"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignparentleft="true"
    android:layout_below="@id/viewflipper"
    android:background="@drawable/garbage" />
</relativelayout>

其次是在anim中定义动画:

slide_left_in.xml:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
  <!--
   画面转换位置移动动画效果 
   开始向左动画
   fromxdelta : 动画开始时 x坐标位置
   toxdelta :动画结束时 x坐标位置
   duration :动画持续时间
  -->
  <translate
    android:duration="800"
    android:fromxdelta="100%p"
    android:toxdelta="0" />
</set>

slide_left_out.xml:

?
1
2
3
4
5
6
7
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
  <translate
    android:duration="800"
    android:fromxdelta="0"
    android:toxdelta="-100%p" />
</set>

slide_right_in.xml:

?
1
2
3
4
5
6
7
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
  <translate
    android:duration="800"
    android:fromxdelta="-100%p"
    android:toxdelta="0" />
</set>

slide_right_out.xml:

?
1
2
3
4
5
6
7
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
  <translate
    android:duration="800"
    android:fromxdelta="0"
    android:toxdelta="100%p" />
</set>

最后是activity中的实现:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
package net.loonggg.demo.slider;
import android.app.activity;
import android.os.bundle;
import android.view.gesturedetector;
import android.view.gesturedetector.ongesturelistener;
import android.view.layoutinflater;
import android.view.motionevent;
import android.view.view;
import android.view.view.ontouchlistener;
import android.view.window;
import android.view.animation.animation;
import android.view.animation.animation.animationlistener;
import android.view.animation.animationset;
import android.view.animation.animationutils;
import android.widget.button;
import android.widget.imageview;
import android.widget.textview;
import android.widget.viewflipper;
public class mainactivity extends activity implements ongesturelistener,
    ontouchlistener {
  private gesturedetector detector;
  private viewflipper myviewflipper;
  private int[] imgs = { r.drawable.img0, r.drawable.img1, r.drawable.img2,
      r.drawable.img3, r.drawable.img4, r.drawable.img5 };
  private int displayedchildindex = 0;
  private button treasure_btn;
  private button garbage_btn;
  @override
  public void oncreate(bundle savedinstancestate) {
    super.oncreate(savedinstancestate);
    requestwindowfeature(window.feature_no_title);
    setcontentview(r.layout.main);
    myviewflipper = (viewflipper) findviewbyid(r.id.viewflipper);
    treasure_btn = (button) findviewbyid(r.id.treasure_chest_btn);
    garbage_btn = (button) findviewbyid(r.id.garbage_btn);
    myviewflipper.setontouchlistener(this);
    myviewflipper.setlongclickable(true);// 设置长按事件
    // myviewflipper.setautostart(true);// 设置是否自动播放,默认不自动播放
    detector = new gesturedetector(this);
    addflipperview();
  }
  /**
   * 向flipperview中动态添加view
   */
  private void addflipperview() {
    for (int i = 0; i < imgs.length; i++) {
      view view = layoutinflater.from(this).inflate(
          r.layout.myviewflipper, null);
      textview title = (textview) view.findviewbyid(r.id.view_title);
      title.settext("头像");
      imageview iv = (imageview) view.findviewbyid(r.id.view_image);
      iv.setbackgroundresource(imgs[i]);
      myviewflipper.addview(view);
    }
  }
  @override
  public boolean ondown(motionevent e) {
    return false;
  }
  @override
  public void onshowpress(motionevent e) {
  }
  @override
  public boolean onsingletapup(motionevent e) {
    return false;
  }
  @override
  public boolean onscroll(motionevent e1, motionevent e2, float distancex,
      float distancey) {
    return false;
  }
  @override
  public void onlongpress(motionevent e) {
  }
  @override
  public boolean onfling(motionevent e1, motionevent e2, float velocityx,
      float velocityy) {
    // 返回当前正在显示的子视图的索引
    displayedchildindex = myviewflipper.getdisplayedchild();
    final imageview iv = (imageview) myviewflipper.getchildat(
        displayedchildindex).findviewbyid(r.id.view_image);
    if (e2.getx() - e1.getx() >= 100 && e1.gety() - e2.gety() >= 100) {
      animationset outanim = (animationset) animationutils.loadanimation(
          this, r.anim.collect_treasure);
      iv.startanimation(outanim);
      outanim.setanimationlistener(new animationlistener() {
        public void onanimationstart(animation animation) {
        }
        public void onanimationrepeat(animation animation) {
        }
        public void onanimationend(animation animation) {
          shownextview();
          animationset downanim = (animationset) animationutils
              .loadanimation(mainactivity.this, r.anim.up_or_down);
          treasure_btn.setanimation(downanim);
          iv.clearanimation();
        }
      });
    } else if (e1.getx() - e2.getx() >= 100 && e2.gety() - e1.gety() >= 100) {
      animationset outanim = (animationset) animationutils.loadanimation(
          this, r.anim.throw_garbage);
      iv.startanimation(outanim);
      outanim.setanimationlistener(new animationlistener() {
        public void onanimationstart(animation animation) {
        }
        public void onanimationrepeat(animation animation) {
        }
        public void onanimationend(animation animation) {
          shownextview();
          animationset leftanim = (animationset) animationutils
              .loadanimation(mainactivity.this,
                  r.anim.left_or_right);
          garbage_btn.setanimation(leftanim);
          iv.clearanimation();
        }
      });
    } else if (e1.getx() - e2.getx() >= 100) {
      shownextview();
    } else if (e2.getx() - e1.getx() >= 100) {
      showpreviousview();
    }
    return false;
  }
  private void showpreviousview() {
    myviewflipper.setinanimation(animationutils.loadanimation(this,
        r.anim.slide_right_in));
    myviewflipper.setoutanimation(animationutils.loadanimation(this,
        r.anim.slide_right_out));
    myviewflipper.showprevious();
  }
  private void shownextview() {
    myviewflipper.setinanimation(animationutils.loadanimation(this,
        r.anim.slide_left_in));
    myviewflipper.setoutanimation(animationutils.loadanimation(this,
        r.anim.slide_left_out));
    myviewflipper.shownext();
  }
  @override
  public boolean ontouch(view v, motionevent event) {
    return detector.ontouchevent(event);
  }
}

希望本文所述对大家android程序设计有所帮助。