这次我来使用ViewFlipper实现这种效果，好了，先看看效果吧：
效果看完了就来实现这个效果。
1.布局文件
主界面使用下面的布局：
1. <?xml version="1.0" encoding="utf-8"?>
2. <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
3. android:layout_width="fill_parent"
4. android:layout_height="fill_parent"
5. android:orientation="vertical" >
6.
7. <ViewFlipper android:id="@+id/ViewFlipper1"
8. android:layout_width="fill_parent"
9. android:layout_height="fill_parent">
10. </ViewFlipper>
11.
12.
13.
14. <LinearLayout
15. android:orientation="horizontal"
16. android:layout_width="wrap_content"
17.
18. android:layout_gravity="bottom|center_horizontal"
19. android:layout_height="wrap_content"
20.
21. >
22. <ImageView
23. android:layout_width="wrap_content"
24. android:layout_height="wrap_content"
25. android:src="@drawable/da"
26.
27. android:id="@+id/imageview1"
28. />
29. <ImageView
30. android:layout_width="wrap_content"
31. android:layout_height="wrap_content"
32. android:src="@drawable/xiao"
33. android:id="@+id/imageview2"
34. />
35. <ImageView
36. android:layout_width="wrap_content"
37. android:layout_height="wrap_content"
38. android:src="@drawable/xiao"
39. android:id="@+id/imageview3"
40. />
41. <ImageView
42. android:layout_width="wrap_content"
43. android:layout_height="wrap_content"
44. android:src="@drawable/xiao"
45. android:id="@+id/imageview4"
46. />
47.
48. </LinearLayout>
49.
50.
51. </FrameLayout>
简单的介绍一下布局文件：最外层是一个FrameLayout，使用FrameLayout就是为了是的下面的四个点在ViewFlipper上面。LayoutLayout在FrameLayout的下面和水平居中。
2.ViewFlipper的使用
1. flipper = (ViewFlipper) this.findViewById(R.id.ViewFlipper1);
2. flipper.addView(addImageView(R.drawable.png1o));
3. flipper.addView(addImageView(R.drawable.png2o));
4. flipper.addView(addImageView(R.drawable.png3o));
5.
6. flipper.addView(addView());
在Activity中声明一个ViewFlipper的对象，在布局中找到。将三张图片加到ViewFlipper中，另外再加一个View，这个View是从XML布局文件中得到的。布局文件如下：
1. <?xml version="1.0" encoding="utf-8"?>
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
3. android:orientation="vertical"
4. android:layout_width="fill_parent"
5. android:layout_height="fill_parent"
6.
7. >
8. <Button
9. android:id="@+id/button"
10. android:layout_width="wrap_content"
11. android:layout_height="wrap_content"
12. android:layout_marginBottom="45dp"
13. android:text="进入程序"
14. android:textColor="#3E3E3E"
15. android:layout_gravity="center_horizontal"
16. />
17. </LinearLayout>
在这个布局文件中有一个Button，用于跳转Activity用。
在Activity中声明一个GestureDetector对象，在onCreate方法中分配内存。
detector = new GestureDetector(this);
使用this为参数，那么就要使得activity类impllements OnGestureListener接口。重写几个方法。覆盖父类的onTouchEvent方法，在这个方法中如下写：
1. @Override
2. public boolean onTouchEvent(MotionEvent event) {
3. // TODO Auto-generated method stub
4. return this.detector.onTouchEvent(event);
5. }
这样就使得detector能接受消息响应了。
在实现OnGestureListener的方法中判断用户的滑动来切换界面：
1. @Override
2. public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,
3. float velocityY) {
4. "in------------>>>>>>>");
5. if (e1.getX() - e2.getX() > 120) {
6. if (i < 3) {
7. i++;
8. setImage(i);
9. this.flipper.setInAnimation(AnimationUtils.loadAnimation(this,
10. R.anim.animation_right_in));
11. this.flipper.setOutAnimation(AnimationUtils.loadAnimation(this,
12. R.anim.animation_left_out));
13. this.flipper.showNext();
14. }
15. return true;
16. }
17. else if (e1.getX() - e2.getX() < -120) {
18. if (i > 0) {
19. i--;
20. setImage(i);
21. this.flipper.setInAnimation(AnimationUtils.loadAnimation(this,
22. R.anim.animation_left_in));
23. this.flipper.setOutAnimation(AnimationUtils.loadAnimation(this,
24. R.anim.animation_right_out));
25. this.flipper.showPrevious();
26. }
27. return true;
28. }
29. return false;
30.
31. }
32.
33. void setImage(int i)
34. {
35. for(int j=0;j<4;j++)
36. {
37. if(j!=i)
38. iamges[j].setImageResource(R.drawable.xiao);
39. else
40. iamges[j].setImageResource(R.drawable.da);
41. }
42. }
界面切换的时候改变下面的四个小ImageView的图片。切换的动画在res/anim文件夹中，这里就不多说了。
-------------------------------------------------------------------------------------------------------------------------------
在android的图片的浏览时候经常使用。最近在网上查找资料自己也做一个如下：
1. package com.easyway.buttonpageflipper;
2.
3. import com.easyway.buttonpageflipper.R;
4.
5. import android.app.Activity;
6. import android.graphics.PixelFormat;
7. import android.os.Bundle;
8. import android.os.Handler;
9. import android.os.Message;
10. import android.view.GestureDetector;
11. import android.view.GestureDetector.OnGestureListener;
12. import android.view.Gravity;
13. import android.view.MotionEvent;
14. import android.view.View;
15. import android.view.WindowManager;
16. import android.view.WindowManager.LayoutParams;
17. import android.view.animation.AnimationUtils;
18. import android.widget.ImageView;
19. import android.widget.ViewFlipper;
20.
21. /**
22. * Android实现带渐显按钮的左右滑动效果 自然状态下按钮不可见,触摸屏幕时显示按钮
23. *
24. * @author longgangbai
25. *
26. */
27. public class ButtonpageflipperActivity extends Activity implements OnGestureListener{
28. // 声明两个按钮,分别代表向左和向右滑动
29. private ImageView btnLeft = null;
30. private ImageView btnRight = null;
31. // 设置WindowManager
32. private WindowManager wm = null;
33. private WindowManager.LayoutParams wmParams = null;
34. // ImageView的alpha值
35. private int mAlpha = 0;
36. private boolean isHide;
37. private ViewFlipper viewFlipper = null;
38. private GestureDetector detector;
39. /** Called when the activity is first created. */
40. @Override
41. public void onCreate(Bundle savedInstanceState) {
42. super.onCreate(savedInstanceState);
43. setContentView(R.layout.main);
44. "Android实现渐显按钮的左右滑动效果");
45. this.findViewById(R.id.myViewFlipper);
46. new GestureDetector(this);
47. // 初始化左右按钮
48. initImageButtonView();
49. viewFlipper.addView(addImageView(R.drawable.photo1));
50. viewFlipper.addView(addImageView(R.drawable.photo2));
51. viewFlipper.addView(addImageView(R.drawable.photo3));
52. viewFlipper.addView(addImageView(R.drawable.photo4));
53. viewFlipper.addView(addImageView(R.drawable.photo5));
54. }
55. private View addImageView(int id) {
56. new ImageView(this);
57. iv.setImageResource(id);
58. return iv;
59. }
60.
61. /**
62. * 初始化悬浮按钮
63. */
64. private void initImageButtonView() {
65. // 获取WindowManager
66. "window");
67. // 设置LayoutParams相关参数
68. new WindowManager.LayoutParams();
69. // 设置window type
70. wmParams.type = LayoutParams.TYPE_PHONE;
71. // 设置图片格式,效果为背景透明
72. wmParams.format = PixelFormat.RGBA_8888;
73. // 设置Window flag参数
74. wmParams.flags = LayoutParams.FLAG_NOT_TOUCH_MODAL
75. | LayoutParams.FLAG_NOT_FOCUSABLE;
76. // 设置x、y初始值
77. 0;
78. 0;
79. // 设置窗口长宽数据
80. 50;
81. 50;
82. // 创建左右按钮
83. createLeftButtonView();
84. createRightButtonView();
85. }
86.
87. /**
88. * 设置左边按钮
89. */
90. private void createLeftButtonView() {
91. new ImageView(this);
92. btnLeft.setImageResource(R.drawable.left);
93. 0);
94. new View.OnClickListener() {
95. public void onClick(View arg0) {
96. // 上一个图像
97. this,
98. R.anim.push_left_in);
99. this,
100. R.anim.push_left_out);
101. viewFlipper.showPrevious();
102. }
103. });
104. // 调整窗口
105. wmParams.gravity = Gravity.LEFT | Gravity.CENTER_VERTICAL;
106. // 显示图像
107. wm.addView(btnLeft, wmParams);
108. }
109.
110. /**
111. * 设置右边按钮
112. */
113. private void createRightButtonView() {
114. new ImageView(this);
115. btnRight.setImageResource(R.drawable.right);
116. 0);
117. new View.OnClickListener() {
118. public void onClick(View arg0) {
119. // 下一个图像
120. this,
121. R.anim.push_right_in);
122. this,
123. R.anim.push_right_out);
124. viewFlipper.showNext();
125.
126. }
127. });
128. // 调整窗口
129. wmParams.gravity = Gravity.RIGHT | Gravity.CENTER_VERTICAL;
130. // 显示图像
131. wm.addView(btnRight, wmParams);
132. }
133.
134. /**
135. * 设置按钮渐显效果
136. */
137. private Handler mHandler = new Handler() {
138. public void handleMessage(Message msg) {
139. if (msg.what == 1 && mAlpha < 255) {
140. // 通过设置不透明度设置按钮的渐显效果
141. 50;
142. if (mAlpha > 255)
143. 255;
144. btnLeft.setAlpha(mAlpha);
145. btnLeft.invalidate();
146. btnRight.setAlpha(mAlpha);
147. btnRight.invalidate();
148. if (!isHide && mAlpha < 255)
149. 1, 100);
150.
151. else if (msg.what == 0 && mAlpha > 0) {
152. 10;
153. if (mAlpha < 0)
154. 0;
155. btnLeft.setAlpha(mAlpha);
156. btnLeft.invalidate();
157. btnRight.setAlpha(mAlpha);
158. btnRight.invalidate();
159. if (isHide && mAlpha > 0)
160. 0, 800);
161. }
162. }
163. };
164.
165. private void showImageButtonView() {
166. false;
167. 1);
168. }
169.
170. private void hideImageButtonView() {
171. new Thread() {
172. public void run() {
173. try {
174. 1500);
175. true;
176. 0);
177. catch (Exception e) {
178. ;
179. }
180. }
181. }.start();
182. }
183.
184. @Override
185. public boolean onTouchEvent(MotionEvent event) {
186. this.detector.onTouchEvent(event);
187. switch (event.getAction()) {
188. case MotionEvent.ACTION_MOVE:
189. case MotionEvent.ACTION_DOWN:
190. showImageButtonView();
191. break;
192. case MotionEvent.ACTION_UP:
193. hideImageButtonView();
194. break;
195. }
196. return true;
197. }
198.
199. @Override
200. public void onDestroy() {
201. super.onDestroy();
202. // 在程序退出(Activity销毁)时销毁窗口
203. wm.removeView(btnLeft);
204. wm.removeView(btnRight);
205. }
206.
207. @Override
208. public boolean onDown(MotionEvent e) {
209. // TODO Auto-generated method stub
210. return false;
211. }
212.
213. @Override
214. public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,
215. float velocityY) {
216. if (e1.getX() - e2.getX() > 120) {
217. this.viewFlipper.setInAnimation(AnimationUtils.loadAnimation(this, R.anim.push_left_in));
218. this.viewFlipper.setOutAnimation(AnimationUtils.loadAnimation(this, R.anim.push_left_out));
219. this.viewFlipper.showNext();
220. return true;
221. else if (e1.getX() - e2.getX() < -120) {
222. this.viewFlipper.setInAnimation(AnimationUtils.loadAnimation(this, R.anim.push_right_in));
223. this.viewFlipper.setOutAnimation(AnimationUtils.loadAnimation(this, R.anim.push_right_out));
224. this.viewFlipper.showPrevious();
225. return true;
226. }
227.
228. return false;
229. }
230.
231. @Override
232. public void onLongPress(MotionEvent e) {
233. // TODO Auto-generated method stub
234.
235. }
236.
237. @Override
238. public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX,
239. float distanceY) {
240. // TODO Auto-generated method stub
241. return false;
242. }
243.
244. @Override
245. public void onShowPress(MotionEvent e) {
246. // TODO Auto-generated method stub
247.
248. }
249.
250. @Override
251. public boolean onSingleTapUp(MotionEvent e) {
252. // TODO Auto-generated method stub
253. return false;
254. }
255. }
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
