今天给大家介绍一下如何实现androd主页面的左右拖动效果。实现起来很简单,就是使用ViewFlipper来将您要来回拖动的View装在一起,然 后与GestureDetector手势识别类来联动,确定要显示哪个View,加上一点点动画效果即可。比如当手指向左快速滑动时跳转到上一个 View,手指向右快速滑动时跳转到下一个View,本例中使用图片作为各个View的页面,实现左右快速滑动显示不同的图片。
代码片段(3)
[代码]layout
1 | <linearlayoutandroid:layout_height="fill_parent"android:layout_width="fill_parent"android:orientation="vertical"xmlns:android="http://schemas.android.com/apk/res/android"> |
2 | <viewflipperandroid:id="@+id/flipper"android:layout_below="@+id/CockpitLayout"android:layout_height="fill_parent"android:layout_width="fill_parent"> |
3 | <includeandroid:id="@+id/firstlayout"layout="@layout/first"> |
4 | <includeandroid:id="@+id/secondlayout"layout="@layout/second"> |
5 | <includeandroid:id="@+id/thirdlayout"layout="@layout/third"> |
6 | <includeandroid:id="@+id/fourthlayout"layout="@layout/fourth"> |
7 | </include></include></include></include></viewflipper> |
8 | </linearlayout> |
[代码]ViewFlipper
1 | <linearlayoutandroid:gravity="center_vertical"android:layout_height="fill_parent"android:layout_width="fill_parent"xmlns:android="http://schemas.android.com/apk/res/android"> |
2 | <imageviewandroid:layout_height="wrap_content"android:layout_width="wrap_content"android:src="@drawable/v1"> |
3 | </imageview></linearlayout> |
[代码]我们的Activity需要实现两个接口OnGestureListener,OnTouchListener。
001 | packagecom.ideasandroid.demo; |
002 |
003 | importandroid.app.Activity; |
004 | importandroid.os.Bundle; |
005 | importandroid.view.GestureDetector; |
006 | importandroid.view.MotionEvent; |
007 | importandroid.view.View; |
008 | importandroid.view.GestureDetector.OnGestureListener; |
009 | importandroid.view.View.OnTouchListener; |
010 | importandroid.view.animation.AccelerateInterpolator; |
011 | importandroid.view.animation.Animation; |
012 | importandroid.view.animation.TranslateAnimation; |
013 | importandroid.widget.ViewFlipper; |
014 | publicclassViewFlipperDemoextendsActivityimplementsOnGestureListener,OnTouchListener{ |
015 | privateViewFlipper mFlipper; |
016 | GestureDetector mGestureDetector; |
017 | privateintmCurrentLayoutState; |
018 | privatestaticfinalintFLING_MIN_DISTANCE =100; |
019 | privatestaticfinalintFLING_MIN_VELOCITY =200; |
020 |
021 | @Override |
022 | publicvoidonCreate(Bundle savedInstanceState) { |
023 | super.onCreate(savedInstanceState); |
024 | setContentView(R.layout.main); |
025 | mFlipper = (ViewFlipper) findViewById(R.id.flipper); |
026 | //注册一个用于手势识别的类 |
027 | mGestureDetector =newGestureDetector(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 | publicvoidswitchLayoutStateTo(intswitchTo) { |
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 | protectedAnimation inFromRightAnimation() { |
062 | Animation inFromRight =newTranslateAnimation( |
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(newAccelerateInterpolator()); |
069 | returninFromRight; |
070 | } |
071 |
072 | /** |
073 | * 定义从左侧退出的动画效果 |
074 | * @return |
075 | */ |
076 | protectedAnimation outToLeftAnimation() { |
077 | Animation outtoLeft =newTranslateAnimation( |
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(newAccelerateInterpolator()); |
084 | returnouttoLeft; |
085 | } |
086 |
087 | /** |
088 | * 定义从左侧进入的动画效果 |
089 | * @return |
090 | */ |
091 | protectedAnimation inFromLeftAnimation() { |
092 | Animation inFromLeft =newTranslateAnimation( |
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(newAccelerateInterpolator()); |
099 | returninFromLeft; |
100 | } |
101 |
102 | /** |
103 | * 定义从右侧退出时的动画效果 |
104 | * @return |
105 | */ |
106 | protectedAnimation outToRightAnimation() { |
107 | Animation outtoRight =newTranslateAnimation( |
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(newAccelerateInterpolator()); |
114 | returnouttoRight; |
115 | } |
116 |
117 | publicbooleanonDown(MotionEvent e) { |
118 | // TODO Auto-generated method stub |
119 | returnfalse; |
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 | publicbooleanonFling(MotionEvent e1, MotionEvent e2,floatvelocityX, |
132 | floatvelocityY) { |
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 | }elseif(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 | returnfalse; |
149 | } |
150 |
151 | publicvoidonLongPress(MotionEvent e) { |
152 | // TODO Auto-generated method stub |
153 |
154 | } |
155 |
156 | publicbooleanonScroll(MotionEvent e1, MotionEvent e2,floatdistanceX, |
157 | floatdistanceY) { |
158 | returnfalse; |
159 | } |
160 |
161 | publicvoidonShowPress(MotionEvent e) { |
162 | // TODO Auto-generated method stub |
163 |
164 | } |
165 |
166 | publicbooleanonSingleTapUp(MotionEvent e) { |
167 | // TODO Auto-generated method stub |
168 | returnfalse; |
169 | } |
170 | publicbooleanonTouch(View v, MotionEvent event) { |
171 | // 一定要将触屏事件交给手势识别类去处理(自己处理会很麻烦的) |
172 | returnmGestureDetector.onTouchEvent(event); |
173 | } |
174 | } |
本文介绍如何在Android应用中实现主页面的左右滑动效果。通过使用ViewFlipper组件结合GestureDetector,可以轻松实现视图间的切换,并带有平滑过渡动画。
173

被折叠的 条评论
为什么被折叠?



