今天给大家介绍一下如何实现androd主页面的左右拖动效果。实现起来很简单,就是使用ViewFlipper来将您要来回拖动的View装在一起,然 后与GestureDetector手势识别类来联动,确定要显示哪个View,加上一点点动画效果即可。比如当手指向左快速滑动时跳转到上一个 View,手指向右快速滑动时跳转到下一个View,本例中使用图片作为各个View的页面,实现左右快速滑动显示不同的图片。
代码片段(3)
[代码]layout
1 | < linearlayout android:layout_height = "fill_parent" android:layout_width = "fill_parent" android:orientation = "vertical" xmlns:android = "http://schemas.android.com/apk/res/android" > |
2 |
< viewflipper android:id = "@+id/flipper" android:layout_below = "@+id/CockpitLayout" android:layout_height = "fill_parent" android:layout_width = "fill_parent" > |
3 |
< include android:id = "@+id/firstlayout" layout = "@layout/first" > |
4 |
< include android:id = "@+id/secondlayout" layout = "@layout/second" > |
5 |
< include android:id = "@+id/thirdlayout" layout = "@layout/third" > |
6 |
< include android:id = "@+id/fourthlayout" layout = "@layout/fourth" > |
7 |
</ include ></ include ></ include ></ include ></ viewflipper > |
8 | </ linearlayout > |
[代码]ViewFlipper
1 | < linearlayout android:gravity = "center_vertical" android:layout_height = "fill_parent" android:layout_width = "fill_parent" xmlns:android = "http://schemas.android.com/apk/res/android" > |
2 |
< imageview android:layout_height = "wrap_content" android:layout_width = "wrap_content" android:src = "@drawable/v1" > |
3 | </ imageview ></ linearlayout > |
[代码]我们的Activity需要实现两个接口OnGestureListener,OnTouchListener。
001 | package com.ideasandroid.demo; |
002 |
003 | import android.app.Activity; |
004 | import android.os.Bundle; |
005 | import android.view.GestureDetector; |
006 | import android.view.MotionEvent; |
007 | import android.view.View; |
008 | import android.view.GestureDetector.OnGestureListener; |
009 | import android.view.View.OnTouchListener; |
010 | import android.view.animation.AccelerateInterpolator; |
011 | import android.view.animation.Animation; |
012 | import android.view.animation.TranslateAnimation; |
013 | import android.widget.ViewFlipper; |
014 | public class ViewFlipperDemo extends Activity implements OnGestureListener,OnTouchListener{ |
015 |
private ViewFlipper mFlipper; |
016 |
GestureDetector mGestureDetector; |
017 |
private int mCurrentLayoutState; |
018 |
private static final int FLING_MIN_DISTANCE = 100 ; |
019 |
private static final int FLING_MIN_VELOCITY = 200 ; |
020 |
021 |
@Override |
022 |
public void onCreate(Bundle savedInstanceState) { |
023 |
super .onCreate(savedInstanceState); |
024 |
setContentView(R.layout.main); |
025 |
mFlipper = (ViewFlipper) findViewById(R.id.flipper); |
026 |
//注册一个用于手势识别的类 |
027 |
mGestureDetector = new GestureDetector( this ); |
028 |
//给mFlipper设置一个listener |
029 |
mFlipper.setOnTouchListener( this ); |
030 |
mCurrentLayoutState = 0 ; |
031 |
//允许长按住ViewFlipper,这样才能识别拖动等手势 |
032 |
mFlipper.setLongClickable( true ); |
033 |
} |
034 |
035 |
/** |
036 |
* 此方法在本例中未用到,可以指定跳转到某个页面 |
037 |
* @param switchTo |
038 |
*/ |
039 |
public void switchLayoutStateTo( int switchTo) { |
040 |
while (mCurrentLayoutState != switchTo) { |
041 |
if (mCurrentLayoutState > switchTo) { |
042 |
mCurrentLayoutState--; |
043 |
mFlipper.setInAnimation(inFromLeftAnimation()); |
044 |
mFlipper.setOutAnimation(outToRightAnimation()); |
045 |
mFlipper.showPrevious(); |
046 |
} else { |
047 |
mCurrentLayoutState++; |
048 |
mFlipper.setInAnimation(inFromRightAnimation()); |
049 |
mFlipper.setOutAnimation(outToLeftAnimation()); |
050 |
mFlipper.showNext(); |
051 |
} |
052 |
053 |
} |
054 |
; |
055 |
} |
056 |
057 |
/** |
058 |
* 定义从右侧进入的动画效果 |
059 |
* @return |
060 |
*/ |
061 |
protected Animation inFromRightAnimation() { |
062 |
Animation inFromRight = new TranslateAnimation( |
063 |
Animation.RELATIVE_TO_PARENT, + 1 .0f, |
064 |
Animation.RELATIVE_TO_PARENT, 0 .0f, |
065 |
Animation.RELATIVE_TO_PARENT, 0 .0f, |
066 |
Animation.RELATIVE_TO_PARENT, 0 .0f); |
067 |
inFromRight.setDuration( 500 ); |
068 |
inFromRight.setInterpolator( new AccelerateInterpolator()); |
069 |
return inFromRight; |
070 |
} |
071 |
072 |
/** |
073 |
* 定义从左侧退出的动画效果 |
074 |
* @return |
075 |
*/ |
076 |
protected Animation outToLeftAnimation() { |
077 |
Animation outtoLeft = new TranslateAnimation( |
078 |
Animation.RELATIVE_TO_PARENT, 0 .0f, |
079 |
Animation.RELATIVE_TO_PARENT, - 1 .0f, |
080 |
Animation.RELATIVE_TO_PARENT, 0 .0f, |
081 |
Animation.RELATIVE_TO_PARENT, 0 .0f); |
082 |
outtoLeft.setDuration( 500 ); |
083 |
outtoLeft.setInterpolator( new AccelerateInterpolator()); |
084 |
return outtoLeft; |
085 |
} |
086 |
087 |
/** |
088 |
* 定义从左侧进入的动画效果 |
089 |
* @return |
090 |
*/ |
091 |
protected Animation inFromLeftAnimation() { |
092 |
Animation inFromLeft = new TranslateAnimation( |
093 |
Animation.RELATIVE_TO_PARENT, - 1 .0f, |
094 |
Animation.RELATIVE_TO_PARENT, 0 .0f, |
095 |
Animation.RELATIVE_TO_PARENT, 0 .0f, |
096 |
Animation.RELATIVE_TO_PARENT, 0 .0f); |
097 |
inFromLeft.setDuration( 500 ); |
098 |
inFromLeft.setInterpolator( new AccelerateInterpolator()); |
099 |
return inFromLeft; |
100 |
} |
101 |
102 |
/** |
103 |
* 定义从右侧退出时的动画效果 |
104 |
* @return |
105 |
*/ |
106 |
protected Animation outToRightAnimation() { |
107 |
Animation outtoRight = new TranslateAnimation( |
108 |
Animation.RELATIVE_TO_PARENT, 0 .0f, |
109 |
Animation.RELATIVE_TO_PARENT, + 1 .0f, |
110 |
Animation.RELATIVE_TO_PARENT, 0 .0f, |
111 |
Animation.RELATIVE_TO_PARENT, 0 .0f); |
112 |
outtoRight.setDuration( 500 ); |
113 |
outtoRight.setInterpolator( new AccelerateInterpolator()); |
114 |
return outtoRight; |
115 |
} |
116 |
117 |
public boolean onDown(MotionEvent e) { |
118 |
// TODO Auto-generated method stub |
119 |
return false ; |
120 |
} |
121 |
122 |
/* |
123 |
* 用户按下触摸屏、快速移动后松开即触发这个事件 |
124 |
* e1:第1个ACTION_DOWN MotionEvent |
125 |
* e2:最后一个ACTION_MOVE MotionEvent |
126 |
* velocityX:X轴上的移动速度,像素/秒 |
127 |
* velocityY:Y轴上的移动速度,像素/秒 |
128 |
* 触发条件 : |
129 |
* X轴的坐标位移大于FLING_MIN_DISTANCE,且移动速度大于FLING_MIN_VELOCITY个像素/秒 |
130 |
*/ |
131 |
public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, |
132 |
float velocityY) { |
133 |
if (e1.getX() - e2.getX() > FLING_MIN_DISTANCE |
134 |
&& Math.abs(velocityX) > FLING_MIN_VELOCITY) { |
135 |
// 当像左侧滑动的时候 |
136 |
//设置View进入屏幕时候使用的动画 |
137 |
mFlipper.setInAnimation(inFromRightAnimation()); |
138 |
//设置View退出屏幕时候使用的动画 |
139 |
mFlipper.setOutAnimation(outToLeftAnimation()); |
140 |
mFlipper.showNext(); |
141 |
} else if (e2.getX() - e1.getX() > FLING_MIN_DISTANCE |
142 |
&& Math.abs(velocityX) > FLING_MIN_VELOCITY) { |
143 |
// 当像右侧滑动的时候 |
144 |
mFlipper.setInAnimation(inFromLeftAnimation()); |
145 |
mFlipper.setOutAnimation(outToRightAnimation()); |
146 |
mFlipper.showPrevious(); |
147 |
} |
148 |
return false ; |
149 |
} |
150 |
151 |
public void onLongPress(MotionEvent e) { |
152 |
// TODO Auto-generated method stub |
153 |
154 |
} |
155 |
156 |
public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, |
157 |
float distanceY) { |
158 |
return false ; |
159 |
} |
160 |
161 |
public void onShowPress(MotionEvent e) { |
162 |
// TODO Auto-generated method stub |
163 |
164 |
} |
165 |
166 |
public boolean onSingleTapUp(MotionEvent e) { |
167 |
// TODO Auto-generated method stub |
168 |
return false ; |
169 |
} |
170 |
public boolean onTouch(View v, MotionEvent event) { |
171 |
// 一定要将触屏事件交给手势识别类去处理(自己处理会很麻烦的) |
172 |
return mGestureDetector.onTouchEvent(event); |
173 |
} |
174 | } |