Android中使用ViewPager實現圖片左右拖動

最近Android項目中做到一個幫助的功能，具體就是點擊幫助按鈕後，出現仿新浪客戶端的幫助功能的效果，是使用android的ViewPager來完成的，上網大概查了下相關的博客和資料，效果都不是太理想，估摸著這個又很常用，所以記錄下來，希望能幫助到正在學習它的同學，也以免自己今後忘記了，算是一舉兩得吧。具體效果圖如下：

圖一

圖二

圖三

圖四

首先我貼上這個項目的結構圖：

圖五

第一步，展示圖一布局，編輯activity_main.xml，代碼如下(jar包什麼的，我就不多說了，工程圖中libs有標出了，沒有自己去下載個，不然我下面也有附件提供下載)：

1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
2. xmlns:tools="http://schemas.android.com/tools"
3. android:layout_width="match_parent"
4. android:layout_height="match_parent"
5. android:background="@drawable/tip2_2"
6. >
7. <LinearLayout
8. android:layout_alignParentBottom="true"
9. android:layout_width="fill_parent"
10. android:layout_height="wrap_content"
11. android:layout_gravity="bottom"
12. android:clickable="false"
13. android:focusable="false"
14. >
15. <Button
16. android:id="@+id/btn_my_menu"
17. android:layout_width="fill_parent"
18. android:layout_height="wrap_content"
19. android:gravity="center"
20. android:layout_weight="1"
21. android:paddingTop="12dp"
22. android:paddingBottom="12dp"
23. android:textSize="15sp"
24. android:textColor="@android:color/white"
25. android:background="@drawable/my3_menu_button"
26. android:text
27. android:focusable="true"/>
30. <Button
31. android:id="@+id/btn_help"
32. android:layout_width="fill_parent"
33. android:layout_height="wrap_content"
34. android:layout_weight="1"
35. android:background="@drawable/help3_menu_button"
36. android:gravity="center"
37. android:paddingBottom="12dp"
38. android:paddingTop="12dp"
39. android:textColor="@android:color/white"
40. android:textSize="15sp"
41. android:text
42. android:focusable="true"/>
45. <Button
46. android:id="@+id/btn_share"
47. android:layout_width="fill_parent"
48. android:layout_height="wrap_content"
49. android:background="@drawable/share3_menu_button"
50. android:gravity="center"
51. android:paddingTop="12dp"
52. android:paddingBottom="12dp"
53. android:layout_weight="1"
54. android:textSize="15sp"
55. android:textColor="@android:color/white"
56. android:text
57. android:focusable="true"
58. />
59. </LinearLayout>
61. </RelativeLayout>