android手势识别ViewFlipper触摸动画

浏览数：25 / 时间：2015年06月11日
今天给大家介绍一下如何实现androd主页面的左右拖动效果。实现起来很简单，就是使用ViewFlipper来将您要来回拖动的View装在一起，然 后与GestureDetector手势识别类来联动，确定要显示哪个View，加上一点点动画效果即可。比如当手指向左快速滑动时跳转到上一个 View，手指向右快速滑动时跳转到下一个View，本例中使用图片作为各个View的页面，实现左右快速滑动显示不同的图片。
转自 http://www.ideasandroid.com/archives/414

标签：Android 手势

[1].[代码] layout 跳至 [1] [2] [3]

?
1
2
3
4
5
6
7
8
<linearlayout android:layout_height="fill_parent" android:layout_width="fill_parent" android:orientation="vertical" xmlns:android="http://schemas.android.com/apk/res/android">
    <viewflipper android:id="@+id/flipper" android:layout_below="@+id/CockpitLayout" android:layout_height="fill_parent" android:layout_width="fill_parent">
        <include android:id="@+id/firstlayout" layout="@layout/first">
        <include android:id="@+id/secondlayout" layout="@layout/second">
        <include android:id="@+id/thirdlayout" layout="@layout/third">
        <include android:id="@+id/fourthlayout" layout="@layout/fourth">
    </include></include></include></include></viewflipper>
</linearlayout>

[2].[代码] ViewFlipper 跳至 [1] [2] [3]

?
1
2
3
<linearlayout android:gravity="center_vertical" android:layout_height="fill_parent" android:layout_width="fill_parent" xmlns:android="http://schemas.android.com/apk/res/android">
  <imageview android:layout_height="wrap_content" android:layout_width="wrap_content" android:src="@drawable/v1">
</imageview></linearlayout>

[3].[代码] 我们的Activity需要实现两个接口OnGestureListener,OnTouchListener。 跳至 [1] [2] [3]

?
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
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
package com.ideasandroid.demo;
import android.app.Activity; import android.os.Bundle; import android.view.GestureDetector; import android.view.MotionEvent; import android.view.View; import android.view.GestureDetector.OnGestureListener; import android.view.View.OnTouchListener; import android.view.animation.AccelerateInterpolator; import android.view.animation.Animation; import android.view.animation.TranslateAnimation; import android.widget.ViewFlipper; public class ViewFlipperDemo extends Activity implements OnGestureListener,OnTouchListener{
    private ViewFlipper mFlipper;
    GestureDetector mGestureDetector;
    private int mCurrentLayoutState;
    private static final int FLING_MIN_DISTANCE = 100;
    private static final int FLING_MIN_VELOCITY = 200;
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        mFlipper = (ViewFlipper) findViewById(R.id.flipper);
        //注册一个用于手势识别的类         mGestureDetector = new GestureDetector(this);
        //给mFlipper设置一个listener         mFlipper.setOnTouchListener(this);
        mCurrentLayoutState = 0;
        //允许长按住ViewFlipper,这样才能识别拖动等手势         mFlipper.setLongClickable(true);
    }
    /**
     * 此方法在本例中未用到，可以指定跳转到某个页面
     * @param switchTo
     */
    public void switchLayoutStateTo(int switchTo) {
        while (mCurrentLayoutState != switchTo) {
            if (mCurrentLayoutState > switchTo) {
                mCurrentLayoutState--;
                mFlipper.setInAnimation(inFromLeftAnimation());
                mFlipper.setOutAnimation(outToRightAnimation());
                mFlipper.showPrevious();
            } else {
                mCurrentLayoutState++;
                mFlipper.setInAnimation(inFromRightAnimation());
                mFlipper.setOutAnimation(outToLeftAnimation());
                mFlipper.showNext();
            }
        }
        ;
    }
    /**
     * 定义从右侧进入的动画效果
     * @return
     */
    protected Animation inFromRightAnimation() {
        Animation inFromRight = new TranslateAnimation(
                Animation.RELATIVE_TO_PARENT, +1.0f,
                Animation.RELATIVE_TO_PARENT, 0.0f,
                Animation.RELATIVE_TO_PARENT, 0.0f,
                Animation.RELATIVE_TO_PARENT, 0.0f);
        inFromRight.setDuration(500);
        inFromRight.setInterpolator(new AccelerateInterpolator());
        return inFromRight;
    }
    /**
     * 定义从左侧退出的动画效果
     * @return
     */
    protected Animation outToLeftAnimation() {
        Animation outtoLeft = new TranslateAnimation(
                Animation.RELATIVE_TO_PARENT, 0.0f,
                Animation.RELATIVE_TO_PARENT, -1.0f,
                Animation.RELATIVE_TO_PARENT, 0.0f,
                Animation.RELATIVE_TO_PARENT, 0.0f);
        outtoLeft.setDuration(500);
        outtoLeft.setInterpolator(new AccelerateInterpolator());
        return outtoLeft;
    }
    /**
     * 定义从左侧进入的动画效果
     * @return
     */
    protected Animation inFromLeftAnimation() {
        Animation inFromLeft = new TranslateAnimation(
                Animation.RELATIVE_TO_PARENT, -1.0f,
                Animation.RELATIVE_TO_PARENT, 0.0f,
                Animation.RELATIVE_TO_PARENT, 0.0f,
                Animation.RELATIVE_TO_PARENT, 0.0f);
        inFromLeft.setDuration(500);
        inFromLeft.setInterpolator(new AccelerateInterpolator());
        return inFromLeft;
    }
    /**
     * 定义从右侧退出时的动画效果
     * @return
     */
    protected Animation outToRightAnimation() {
        Animation outtoRight = new TranslateAnimation(
                Animation.RELATIVE_TO_PARENT, 0.0f,
                Animation.RELATIVE_TO_PARENT, +1.0f,
                Animation.RELATIVE_TO_PARENT, 0.0f,
                Animation.RELATIVE_TO_PARENT, 0.0f);
        outtoRight.setDuration(500);
        outtoRight.setInterpolator(new AccelerateInterpolator());
        return outtoRight;
    }
    public boolean onDown(MotionEvent e) {
        // TODO Auto-generated method stub         return false;
    }
    /*
     * 用户按下触摸屏、快速移动后松开即触发这个事件
     * e1：第1个ACTION_DOWN MotionEvent
     * e2：最后一个ACTION_MOVE MotionEvent
     * velocityX：X轴上的移动速度，像素/秒
     * velocityY：Y轴上的移动速度，像素/秒
     * 触发条件 ：
     * X轴的坐标位移大于FLING_MIN_DISTANCE，且移动速度大于FLING_MIN_VELOCITY个像素/秒
     */
    public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,
            float velocityY) {
        if (e1.getX() - e2.getX() > FLING_MIN_DISTANCE
                && Math.abs(velocityX) > FLING_MIN_VELOCITY) {
            // 当像左侧滑动的时候             //设置View进入屏幕时候使用的动画             mFlipper.setInAnimation(inFromRightAnimation());
            //设置View退出屏幕时候使用的动画             mFlipper.setOutAnimation(outToLeftAnimation());
            mFlipper.showNext();
        } else if (e2.getX() - e1.getX() > FLING_MIN_DISTANCE
                && Math.abs(velocityX) > FLING_MIN_VELOCITY) {
            // 当像右侧滑动的时候             mFlipper.setInAnimation(inFromLeftAnimation());
            mFlipper.setOutAnimation(outToRightAnimation());
            mFlipper.showPrevious();
        }
        return false;
    }
    public void onLongPress(MotionEvent e) {
        // TODO Auto-generated method stub
    }
    public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX,
            float distanceY) {
        return false;
    }
    public void onShowPress(MotionEvent e) {
        // TODO Auto-generated method stub
    }
    public boolean onSingleTapUp(MotionEvent e) {
        // TODO Auto-generated method stub         return false;
    }
    public boolean onTouch(View v, MotionEvent event) {
        // 一定要将触屏事件交给手势识别类去处理（自己处理会很麻烦的）         return mGestureDetector.onTouchEvent(event);
    }
}

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： Android iOS 移动互联 终端开发

相关文章

随机文章

您可能还喜欢

您可能还喜欢