android 照片左右滑动放大 安卓左右滑动切换图片

目标效果：

使用鼠标滑动屏幕或者点击下边的小图标，可以更改页面和图标，因为没有那么多素材所以只用了两张图片区分。

1.layout文件夹下新建top.xml页面，作为顶部标题。

top.xml页面：

[html] view plain copy

1. <?xml version="1.0" encoding="utf-8"?>
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
3. android:layout_width="match_parent"
4. android:layout_height="45dp"
5. android:gravity="center"
6. android:background="#000000"
7. android:orientation="vertical" >
8.   
9. <TextView
10. android:layout_width="wrap_content"
11. android:layout_height="wrap_content"
12. android:text="微信"
13. android:textColor="#ffffff"
14. android:textSize="20sp"
15. android:layout_gravity="center"
16. android:textStyle="bold" />
17.   
18. </LinearLayout>

2.新建bottom.xml页面，作为底部导航。

bottom.xml页面：

[html] view plain copy

1. <?xml version="1.0" encoding="utf-8"?>
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
3. android:layout_width="match_parent"
4. android:layout_height="55dp"
5. android:background="#000000"
6. android:orientation="horizontal" >
7.   
8. <!-- ImageButton没加android:clickable="false"时，点击下方的ImageBuutton不会改变页面，点击TextView才会改变页面，这是因为每个tab是一个LinearLayout，每个LinearLayout都有一个ImageButton，当点击ImageButton位置时，点击事件首先会到LinearLayout上，LinearLayout会去判断，发现内部有一个ImageButton可以解决点击事件，所以就把点击事件交给ImageButton，而ImageButton又没有写点击事件，所以点击事件就失效了。-->
9.   
10. <LinearLayout
11. android:id="@+id/tab_weixin"
12. android:layout_width="0dp"
13. android:layout_height="fill_parent"
14. android:layout_weight="1"
15. android:gravity="center"
16. android:orientation="vertical" >
17.   
18. <ImageButton
19. android:id="@+id/tab_weixin_img"
20. android:layout_width="wrap_content"
21. android:layout_height="wrap_content"
22. android:background="#000000"
23. android:clickable="false"
24. android:src="@drawable/search" />
25.   
26. <TextView
27. android:layout_width="wrap_content"
28. android:layout_height="wrap_content"
29. android:text="微信"
30. android:textColor="#ffffff" />
31. </LinearLayout>
32.   
33. <LinearLayout
34. android:id="@+id/tab_friend"
35. android:layout_width="0dp"
36. android:layout_height="fill_parent"
37. android:layout_weight="1"
38. android:gravity="center"
39. android:orientation="vertical" >
40.   
41. <ImageButton
42. android:id="@+id/tab_friend_img"
43. android:layout_width="wrap_content"
44. android:layout_height="wrap_content"
45. android:background="#000000"
46. android:clickable="false"
47. android:src="@drawable/study" />
48.   
49. <TextView
50. android:layout_width="wrap_content"
51. android:layout_height="wrap_content"
52. android:text="朋友"
53. android:textColor="#ffffff" />
54. </LinearLayout>
55.   
56. <LinearLayout
57. android:id="@+id/tab_tongxunlu"
58. android:layout_width="0dp"
59. android:layout_height="fill_parent"
60. android:layout_weight="1"
61. android:gravity="center"
62. android:orientation="vertical" >
63.   
64. <ImageButton
65. android:id="@+id/tab_tongxunlu_img"
66. android:layout_width="wrap_content"
67. android:layout_height="wrap_content"
68. android:background="#000000"
69. android:clickable="false"
70. android:src="@drawable/study" />
71.   
72. <TextView
73. android:layout_width="wrap_content"
74. android:layout_height="wrap_content"
75. android:text="通讯录"
76. android:textColor="#ffffff" />
77. </LinearLayout>
78.   
79. <LinearLayout
80. android:id="@+id/tab_set"
81. android:layout_width="0dp"
82. android:layout_height="fill_parent"
83. android:layout_weight="1"
84. android:gravity="center"
85. android:orientation="vertical" >
86.   
87. <ImageButton
88. android:id="@+id/tab_set_img"
89. android:layout_width="wrap_content"
90. android:layout_height="wrap_content"
91. android:background="#000000"
92. android:clickable="false"
93. android:src="@drawable/study" />
94.   
95. <TextView
96. android:layout_width="wrap_content"
97. android:layout_height="wrap_content"
98. android:text="设置"
99. android:textColor="#ffffff" />
100. </LinearLayout>
101.   
102. </LinearLayout>

这里注意ImageButton的clickable属性，如果不设置false，那么鼠标点击不起作用，只有点击下边的TextView才会跳转页面。

3.新建tab01.xml页面，复制三个，只更改显示文本，作为切换页面。

tab01.xml页面：

[html] view plain copy

1. <?xml version="1.0" encoding="utf-8"?>
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
3. android:layout_width="match_parent"
4. android:layout_height="match_parent"
5. android:orientation="vertical" >
6.       
7. <TextView
8. android:layout_width="fill_parent"
9. android:layout_height="fill_parent"
10. android:text="Weixin Tab"
11. android:textSize="30sp"
12. android:textStyle="bold"
13. android:gravity="center"/>
14. </LinearLayout>

4.activity_main.xml页面导入顶部和底部xml文件，并放置ViewPager。

activity_main.xml页面：

[html] view plain copy

1. <LinearLayout 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:orientation="vertical">
6.   
7. <include layout="@layout/top"/>
8.       
9. <android.support.v4.view.ViewPager
10. android:id="@+id/id_viewpager"
11. android:layout_weight="1"
12. android:layout_width="fill_parent"
13. android:layout_height="0dp">
14.           
15. </android.support.v4.view.ViewPager>
16. <include layout="@layout/bottom"/>
17. </LinearLayout>

5.因为ViewPager是在jar包里，添加该控件需要写出路径，当记不住的时候，按下Ctrl+Shift+t，弹出框里输入“ViewPager”并选择，显示的页面中就包含该控件的路径。

6.新建pageAdapter.java，继承PageAdapter，实现四个方法。

pageAdapter.java页面：

[java] view plain copy

1. package
2.   
3. import
4.   
5. import
6. import
7. import
8.   
9. public class pageAdapter extends
10. private
11.   
12. public
13. this.mViews = mViews;  
14.     }  
15.   
16. /**
17.      * 重写四个方法 boolean isViewFromObject(View arg0, Object arg1) int getCount()
18.      * void destroyItem(ViewGroup container, int position,Object object) Object
19.      * instantiateItem(ViewGroup container, int position)
20.      */
21.   
22. // 从当前container中删除指定位置的view
23. @Override
24. public void destroyItem(ViewGroup container, int
25.         container.removeView(mViews.get(position));  
26.     }  
27.   
28. // 初始化view
29. @Override
30. public Object instantiateItem(ViewGroup container, int
31.         View view = mViews.get(position);  
32.         container.addView(view);  
33. return
34.     }  
35.   
36. @Override
37. public boolean
38. return
39.     }  
40.   
41. // 返回要滑动的view个数
42. @Override
43. public int
44. return
45.     }  
46.   
47. }

7.MainActivity.java页面编写点击和滑动事件。

MainActivity.java页面：

[java] view plain copy

1. package
2.   
3. import
4. import
5.   
6. import
7.   
8. import
9. import
10. import
11. import
12. import
13. import
14. import
15. import
16. import
17. import
18. import
19. import
20. import
21.   
22. public class MainActivity extends Activity implements
23.   
24. private
25. private List<View> mViews = new
26. private pageAdapter mAdapter = new
27.   
28. // Tab
29. private
30. private
31.   
32. @Override
33. protected void
34. super.onCreate(savedInstanceState);  
35. // 去掉标题
36.         setContentView(R.layout.activity_main);  
37.   
38.         initView();  
39.   
40.         initEvents();  
41.     }  
42.   
43. //View的滑动事件
44. private void
45. this);  
46. this);  
47. this);  
48. this);  
49.   
50. //滑动切换页面
51. new
52.   
53. @Override
54. public void onPageSelected(int
55. //将图片全部默认为不选中
56. int
57. switch
58. case 0:  
59.                     mWeixinImg.setImageResource(R.drawable.search);  
60. break;  
61. case 1:  
62.                     mFriendImg.setImageResource(R.drawable.search);  
63. break;  
64. case 2:  
65.                     mTongxunluImg.setImageResource(R.drawable.search);  
66. break;  
67. case 3:  
68.                     mSetImg.setImageResource(R.drawable.search);  
69. break;  
70.   
71. default:  
72. break;  
73.                 }  
74.             }  
75.   
76. @Override
77. public void onPageScrolled(int arg0, float arg1, int
78.   
79.             }  
80.   
81. @Override
82. public void onPageScrollStateChanged(int
83.   
84.             }  
85.         });  
86.     }  
87.   
88. //实例化控件
89. private void
90.         mViewPager = (ViewPager) findViewById(R.id.id_viewpager);  
91. // Tab
92.         mTabWeixin = (LinearLayout) findViewById(R.id.tab_weixin);  
93.         mTabFriend = (LinearLayout) findViewById(R.id.tab_friend);  
94.         mTabTongxunlu = (LinearLayout) findViewById(R.id.tab_tongxunlu);  
95.         mTabSet = (LinearLayout) findViewById(R.id.tab_set);  
96. // img
97.         mWeixinImg = (ImageButton) findViewById(R.id.tab_weixin_img);  
98.         mFriendImg = (ImageButton) findViewById(R.id.tab_friend_img);  
99.         mTongxunluImg = (ImageButton) findViewById(R.id.tab_tongxunlu_img);  
100.         mSetImg = (ImageButton) findViewById(R.id.tab_set_img);  
101.   
102. this);  
103. null);  
104. null);  
105. null);  
106. null);  
107.   
108.         mViews.add(tab01);  
109.         mViews.add(tab02);  
110.         mViews.add(tab03);  
111.         mViews.add(tab04);  
112.   
113.         mViewPager.setAdapter(mAdapter);  
114.     }  
115.   
116. //ImageButton的点击事件
117. @Override
118. public void
119.         resetImg();  
120. switch
121. case
122. 0);// 跳到第一个页面
123. // 图片变为选中
124. break;  
125. case
126. 1);  
127.             mFriendImg.setImageResource(R.drawable.search);  
128. break;  
129. case
130. 2);  
131.             mTongxunluImg.setImageResource(R.drawable.search);  
132. break;  
133. case
134. 3);  
135.             mSetImg.setImageResource(R.drawable.search);  
136. break;  
137.   
138. default:  
139. break;  
140.         }  
141.     }  
142.   
143. // 将所有的图片切换为未选中
144. private void
145.         mWeixinImg.setImageResource(R.drawable.study);  
146.         mFriendImg.setImageResource(R.drawable.study);  
147.         mTongxunluImg.setImageResource(R.drawable.study);  
148.         mSetImg.setImageResource(R.drawable.study);  
149.     }  
150.   
151. }

8.运行就可以显示目标效果了。