首页 > 代码库 > android手势识别ViewFlipper触摸动画

android手势识别ViewFlipper触摸动画

2024-10-19 02:46:02   208人阅读

今天给大家介绍一下如何实现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
<linearlayoutandroid:layout_height="fill_parent"android:layout_width="fill_parent"android:orientation="vertical"xmlns:android="http://schemas.android.com/apk/res/android">
    <viewflipperandroid:id="@+id/flipper"android:layout_below="@+id/CockpitLayout"android:layout_height="fill_parent"android:layout_width="fill_parent">
        <includeandroid:id="@+id/firstlayout"layout="@layout/first">
        <includeandroid:id="@+id/secondlayout"layout="@layout/second">
        <includeandroid:id="@+id/thirdlayout"layout="@layout/third">
        <includeandroid:id="@+id/fourthlayout"layout="@layout/fourth">
    </include></include></include></include></viewflipper>
</linearlayout>

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

?
1
2
3
<linearlayoutandroid:gravity="center_vertical"android:layout_height="fill_parent"android:layout_width="fill_parent"xmlns:android="http://schemas.android.com/apk/res/android">
  <imageviewandroid: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;
importandroid.app.Activity; importandroid.os.Bundle; importandroid.view.GestureDetector; importandroid.view.MotionEvent; importandroid.view.View; importandroid.view.GestureDetector.OnGestureListener; importandroid.view.View.OnTouchListener; importandroid.view.animation.AccelerateInterpolator; importandroid.view.animation.Animation; importandroid.view.animation.TranslateAnimation; importandroid.widget.ViewFlipper; publicclass ViewFlipperDemo extends Activity implements OnGestureListener,OnTouchListener{
    privateViewFlipper mFlipper;
    GestureDetector mGestureDetector;
    privateint mCurrentLayoutState;
    privatestatic final int FLING_MIN_DISTANCE = 100;
    privatestatic final int FLING_MIN_VELOCITY = 200;
    @Override
    publicvoid 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
     */
    publicvoid switchLayoutStateTo(intswitchTo) {
        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
     */
    protectedAnimation inFromRightAnimation() {
        Animation inFromRight = newTranslateAnimation(
               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(newAccelerateInterpolator());
        return inFromRight;
    }
    /**
     * 定义从左侧退出的动画效果
     * @return
     */
    protectedAnimation outToLeftAnimation() {
        Animation outtoLeft = newTranslateAnimation(
               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(newAccelerateInterpolator());
        return outtoLeft;
    }
    /**
     * 定义从左侧进入的动画效果
     * @return
     */
    protectedAnimation inFromLeftAnimation() {
        Animation inFromLeft = newTranslateAnimation(
               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(newAccelerateInterpolator());
        return inFromLeft;
    }
    /**
     * 定义从右侧退出时的动画效果
     * @return
     */
    protectedAnimation outToRightAnimation() {
        Animation outtoRight = newTranslateAnimation(
               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(newAccelerateInterpolator());
        return outtoRight;
    }
    publicboolean 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个像素/秒
     */
    publicboolean 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;
    }
    publicvoid onLongPress(MotionEvent e) {
        // TODO Auto-generated method stub
    }
    publicboolean onScroll(MotionEvent e1, MotionEvent e2,float distanceX,
            float distanceY) {
        return false;
    }
    publicvoid onShowPress(MotionEvent e) {
        // TODO Auto-generated method stub
    }
    publicboolean onSingleTapUp(MotionEvent e) {
        // TODO Auto-generated method stub         return false;
    }
    publicboolean onTouch(View v, MotionEvent event) {
        // 一定要将触屏事件交给手势识别类去处理（自己处理会很麻烦的）         return mGestureDetector.onTouchEvent(event);
    }
}

android手势识别ViewFlipper触摸动画


联系
我们