高仿优酷Android客户端图片左右滑动（自动切换）

本例是用ViewPager去做的实现，支持自动滑动和手动滑动，不仅优酷网，实际上有很多商城和门户网站都有类似的实现:

具体思路：

1. 工程中需要添加android-support-v4.jar,才能使用ViewPager控件.

2. 图片的自动切换: 可使用Timer或者ScheduledExecutorService,这个有多重方式可以实现.

同时要切换底部的dots（园点）

3.Handler+Message机制更新UI,这个相信大家都很熟练，不再描述

4. 实现的一些细节:注意本例中的优化：图片的自动切换启动了其他的线程，要在Activity在可见到不可见的状态,也就是在onStop()方法中将线程停止，在onStart()方法中开启线程。否则，Timer没有停止，或者反复开启，会引起较大的内存消耗，时间一长就程序就会崩掉。 还有，就是在跳转到其他Activity的过程中会出现画面的卡顿

下面看一下效果图和具体代码:

            

 

工程结构如下图所示：

main.xml:

然后是具体的布局文件及代码实现:

1. <?xml version="1.0" encoding="utf-8"?>
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
3. android:layout_width="fill_parent"
4. android:layout_height="fill_parent"
5. android:background="#FFFFFF"
6. android:orientation="vertical" >
7. <RelativeLayout
8. android:layout_width="fill_parent"
9. android:layout_height="40dip"
10. android:background="@drawable/title_bk" >
11. <ImageButton
12. android:id="@+id/btn_back"
13. android:layout_width="wrap_content"
14. android:layout_height="wrap_content"
15. android:background="@drawable/btn_back_selector"
16. android:src="@drawable/btn_back" />
17. <View
18. android:id="@+id/line0"
19. android:layout_width="1px"
20. android:layout_height="fill_parent"
21. android:layout_toRightOf="@id/btn_back"
22. android:background="#aa11264f" />
23. <View
24. android:layout_width="1px"
25. android:layout_height="fill_parent"
26. android:layout_toRightOf="@id/line0"
27. android:background="#009ad6" />
28. <TextView
29. android:layout_width="wrap_content"
30. android:layout_height="wrap_content"
31. android:layout_centerInParent="true"
32. android:text="优酷客户端"
33. android:textColor="#FFFFFF"
34. android:textSize="20sp" />
35. </RelativeLayout>
36. <FrameLayout
37. android:layout_width="fill_parent"
38. android:layout_height="140dip" >
39. <android.support.v4.view.ViewPager
40. android:id="@+id/vp"
41. android:layout_width="fill_parent"
42. android:layout_height="fill_parent" />
43. <LinearLayout
44. android:layout_width="fill_parent"
45. android:layout_height="35dip"
46. android:layout_gravity="bottom"
47. android:background="#33000000"
48. android:gravity="center"
49. android:orientation="vertical" >
50. <TextView
51. android:id="@+id/tv_title"
52. android:layout_width="wrap_content"
53. android:layout_height="wrap_content"
54. android:text="中国家庭院校园区域名字体现"
55. android:textColor="#ffffff" />
56. <LinearLayout
57. android:layout_width="wrap_content"
58. android:layout_height="wrap_content"
59. android:layout_marginTop="3dip"
60. android:gravity="center" >
61. <View
62. android:id="@+id/v_dot0"
63. style="@style/dot_style"
64. android:background="@drawable/dot_focused" />
65. <View
66. android:id="@+id/v_dot1"
67. style="@style/dot_style" />
68. <View
69. android:id="@+id/v_dot2"
70. style="@style/dot_style" />
71. <View
72. android:id="@+id/v_dot3"
73. style="@style/dot_style" />
74. <View
75. android:id="@+id/v_dot4"
76. style="@style/dot_style" />
77. </LinearLayout>
78. </LinearLayout>
79. </FrameLayout>
80. </LinearLayout>

MyViewPagerActivity:

1. package com.tony.viewpager;
2. import java.util.ArrayList;
3. import java.util.List;
4. import java.util.concurrent.Executors;
5. import java.util.concurrent.ScheduledExecutorService;
6. import java.util.concurrent.TimeUnit;
7. import android.app.Activity;
8. import android.os.Bundle;
9. import android.os.Handler;
10. import android.os.Parcelable;
11. import android.support.v4.view.PagerAdapter;
12. import android.support.v4.view.ViewPager;
13. import android.support.v4.view.ViewPager.OnPageChangeListener;
14. import android.view.View;
15. import android.widget.ImageView;
16. import android.widget.ImageView.ScaleType;
17. import android.widget.TextView;
18. /**
19. * 仿优酷Android客户端图片左右滑动
20. *
21. */
22. public class MyViewPagerActivity extends Activity {
23. private ViewPager viewPager; // android-support-v4中的滑动组件
24. private List<ImageView> imageViews; // 滑动的图片集合
25. private String[] titles; // 图片标题
26. private int[] imageResId; // 图片ID
27. private List<View> dots; // 图片标题正文的那些点
28. private TextView tv_title;
29. private int currentItem = 0; // 当前图片的索引号
30. // An ExecutorService that can schedule commands to run after a given delay,
31. // or to execute periodically.
32. private ScheduledExecutorService scheduledExecutorService;
33. // 切换当前显示的图片
34. private Handler handler = new Handler() {
35. public void handleMessage(android.os.Message msg) {
36. viewPager.setCurrentItem(currentItem);// 切换当前显示的图片
37. };
38. };
39. @Override
40. public void onCreate(Bundle savedInstanceState) {
41. super.onCreate(savedInstanceState);
42. setContentView(R.layout.main);
43. imageResId = new int[] { R.drawable.a, R.drawable.b, R.drawable.c, R.drawable.d, R.drawable.e };
44. titles = new String[imageResId.length];
45. titles[0] = "巩俐不低俗，我就不能低俗";
46. titles[1] = "扑树又回来啦！再唱经典老歌引万人大合唱";
47. titles[2] = "揭秘北京电影如何升级";
48. titles[3] = "乐视网TV版大派送";
49. titles[4] = "热血屌丝的反杀";
50. imageViews = new ArrayList<ImageView>();
51. // 初始化图片资源
52. for (int i = 0; i < imageResId.length; i++) {
53. ImageView imageView = new ImageView(this);
54. imageView.setImageResource(imageResId[i]);
55. imageView.setScaleType(ScaleType.CENTER_CROP);
56. imageViews.add(imageView);
57. }
58. dots = new ArrayList<View>();
59. dots.add(findViewById(R.id.v_dot0));
60. dots.add(findViewById(R.id.v_dot1));
61. dots.add(findViewById(R.id.v_dot2));
62. dots.add(findViewById(R.id.v_dot3));
63. dots.add(findViewById(R.id.v_dot4));
64. tv_title = (TextView) findViewById(R.id.tv_title);
65. tv_title.setText(titles[0]);//
66. viewPager = (ViewPager) findViewById(R.id.vp);
67. viewPager.setAdapter(new MyAdapter());// 设置填充ViewPager页面的适配器
68. // 设置一个监听器，当ViewPager中的页面改变时调用
69. viewPager.setOnPageChangeListener(new MyPageChangeListener());
70. }
71. @Override
72. protected void onStart() {
73. scheduledExecutorService = Executors.newSingleThreadScheduledExecutor();
74. // 当Activity显示出来后，每两秒钟切换一次图片显示
75. scheduledExecutorService.scheduleAtFixedRate(new ScrollTask(), 1, 2, TimeUnit.SECONDS);
76. super.onStart();
77. }
78. @Override
79. protected void onStop() {
80. // 当Activity不可见的时候停止切换
81. scheduledExecutorService.shutdown();
82. super.onStop();
83. }
84. /**
85. * 换行切换任务
86. *
87. * @author Administrator
88. *
89. */
90. private class ScrollTask implements Runnable {
91. public void run() {
92. synchronized (viewPager) {
93. System.out.println("currentItem: " + currentItem);
94. currentItem = (currentItem + 1) % imageViews.size();
95. handler.obtainMessage().sendToTarget(); // 通过Handler切换图片
96. }
97. }
98. }
99. /**
100. * 当ViewPager中页面的状态发生改变时调用
101. *
102. * @author Administrator
103. *
104. */
105. private class MyPageChangeListener implements OnPageChangeListener {
106. private int oldPosition = 0;
107. /**
108. * This method will be invoked when a new page becomes selected.
109. * position: Position index of the new selected page.
110. */
111. public void onPageSelected(int position) {
112. currentItem = position;
113. tv_title.setText(titles[position]);
114. dots.get(oldPosition).setBackgroundResource(R.drawable.dot_normal);
115. dots.get(position).setBackgroundResource(R.drawable.dot_focused);
116. oldPosition = position;
117. }
118. public void onPageScrollStateChanged(int arg0) {
119. }
120. public void onPageScrolled(int arg0, float arg1, int arg2) {
121. }
122. }
123. /**
124. * 填充ViewPager页面的适配器
125. *
126. * @author Administrator
127. *
128. */
129. private class MyAdapter extends PagerAdapter {
130. @Override
131. public int getCount() {
132. return imageResId.length;
133. }
134. @Override
135. public Object instantiateItem(View arg0, int arg1) {
136. ((ViewPager) arg0).addView(imageViews.get(arg1));
137. return imageViews.get(arg1);
138. }
139. @Override
140. public void destroyItem(View arg0, int arg1, Object arg2) {
141. ((ViewPager) arg0).removeView((View) arg2);
142. }
143. @Override
144. public boolean isViewFromObject(View arg0, Object arg1) {
145. return arg0 == arg1;
146. }
147. @Override
148. public void restoreState(Parcelable arg0, ClassLoader arg1) {
149. }
150. @Override
151. public Parcelable saveState() {
152. return null;
153. }
154. @Override
155. public void startUpdate(View arg0) {
156. }
157. @Override
158. public void finishUpdate(View arg0) {
159. }
160. }
161. }

Drawable目录下 btn_back_selector.xml:

1. <?xml version="1.0" encoding="utf-8"?>
2. <selector xmlns:android="http://schemas.android.com/apk/res/android">
3. <item android:drawable="@drawable/btn_top_pressed" android:state_focused="true"></item>
4. <item android:drawable="@drawable/btn_top_pressed" android:state_pressed="true"></item>
5. <item android:drawable="@drawable/btn_top_pressed" android:state_selected="true"></item>
6. <item android:drawable="@drawable/title_bk"></item>
7. </selector>

btn_top_pressed.xml:

1. <?xml version="1.0" encoding="utf-8"?>
2. <shape xmlns:android="http://schemas.android.com/apk/res/android"
3. android:shape="rectangle" >
4. <gradient
5. android:angle="270"
6. android:endColor="#009ad6"
7. android:startColor="#11264f" />
8. </shape>

dot_focused.xml:

1. <?xml version="1.0" encoding="utf-8"?>
2. <shape xmlns:android="http://schemas.android.com/apk/res/android"
3. android:shape="oval" >
4. <solid android:color="#aaFFFFFF" />
5. <corners android:radius="5dip" />
6. </shape>

dot_normal.xml:

1. <?xml version="1.0" encoding="utf-8"?>
2. <shape xmlns:android="http://schemas.android.com/apk/res/android"
3. android:shape="oval" >
4. <solid android:color="#33000000" />
5. <corners android:radius="5dip" />
6. </shape>

title_bk.xml:

1. <?xml version="1.0" encoding="utf-8"?>
2. <shape xmlns:android="http://schemas.android.com/apk/res/android"
3. android:shape="rectangle" >
4. <gradient
5. android:angle="270"
6. android:endColor="#11264f"
7. android:startColor="#009ad6" />
8. </shape>