Android 使用ViewPager实现左右循环滑动图片

ViewPager这个小demo实现的是可以左右循环滑动图片，下面带索引，滑到最后一页在往右滑动就要第一页，第一页往左滑动就到最后一页，先上效果图，用美女图片是我一贯的作风，呵呵

1.    首先看一些layout下的xml

[html] view plain copy

 

1. <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
2. android:layout_width="fill_parent"
3. android:layout_height="fill_parent"
4. android:orientation="vertical" >
5. <android.support.v4.view.ViewPager
6. android:id="@+id/viewPager"
7. android:layout_width="fill_parent"
8. android:layout_height="wrap_content" />
9. <RelativeLayout
10. android:layout_width="fill_parent"
11. android:layout_height="wrap_content"
12. android:orientation="vertical" >
13. <LinearLayout
14. android:id="@+id/viewGroup"
15. android:layout_width="fill_parent"
16. android:layout_height="wrap_content"
17. android:layout_alignParentBottom="true"
18. android:layout_marginBottom="30dp"
19. android:gravity="center_horizontal"
20. android:orientation="horizontal" >
21. </LinearLayout>
22. </RelativeLayout>
23. </FrameLayout>

使用ViewPager首先需要引入android-support-v4.jar这个jar包。自己不要忘记加

[java] view plain copy

 

1. package com.example.viewpagerdemo;
2. import android.app.Activity;
3. import android.os.Bundle;
4. import android.support.v4.view.PagerAdapter;
5. import android.support.v4.view.ViewPager;
6. import android.support.v4.view.ViewPager.OnPageChangeListener;
7. import android.view.View;
8. import android.view.ViewGroup;
9. import android.view.ViewGroup.LayoutParams;
10. import android.widget.ImageView;
11. import android.widget.LinearLayout;
12. public class TwoActivity extends Activity implements OnPageChangeListener{
13. /**
14. * ViewPager
15. */
16. private ViewPager viewPager;
17. /**
18. * 装点点的ImageView数组
19. */
20. private ImageView[] tips;
21. /**
22. * 装ImageView数组
23. */
24. private ImageView[] mImageViews;
25. /**
26. * 图片资源id
27. */
28. private int[] imgIdArray ;
29. @Override
30. protected void onCreate(Bundle savedInstanceState) {
31. super.onCreate(savedInstanceState);
32. setContentView(R.layout.activity_main);
33. ViewGroup group = (ViewGroup)findViewById(R.id.viewGroup);
34. viewPager = (ViewPager) findViewById(R.id.viewPager);
35. //载入图片资源ID
36. imgIdArray = new int[]{R.drawable.item01, R.drawable.item02, R.drawable.item03, R.drawable.item04,
37. R.drawable.item05,R.drawable.item06, R.drawable.item07, R.drawable.item08};
38. //将点点加入到ViewGroup中
39. tips = new ImageView[imgIdArray.length];
40. for(int i=0; i<tips.length; i++){
41. ImageView imageView = new ImageView(this);
42. imageView.setLayoutParams(new LayoutParams(10,10));
43. tips[i] = imageView;
44. if(i == 0){
45. tips[i].setBackgroundResource(R.drawable.page_indicator_focused);
46. }else{
47. tips[i].setBackgroundResource(R.drawable.page_indicator_unfocused);
48. }
49. LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(new ViewGroup.LayoutParams(LayoutParams.WRAP_CONTENT,
50. LayoutParams.WRAP_CONTENT));
51. layoutParams.leftMargin = 5;
52. layoutParams.rightMargin = 5;
53. group.addView(imageView, layoutParams);
54. }
55. //将图片装载到数组中
56. mImageViews = new ImageView[imgIdArray.length];
57. for(int i=0; i<mImageViews.length; i++){
58. ImageView imageView = new ImageView(this);
59. mImageViews[i] = imageView;
60. imageView.setBackgroundResource(imgIdArray[i]);
61. }
62. //设置Adapter
63. viewPager.setAdapter(new MyAdapter());
64. //设置监听，主要是设置点点的背景
65. viewPager.setOnPageChangeListener(this);
66. //设置ViewPager的默认项, 设置为长度的100倍，这样子开始就能往左滑动
67. viewPager.setCurrentItem((mImageViews.length) * 100);
68. }
69. /**
70. *
71. * @author xiaanming
72. *
73. */
74. public class MyAdapter extends PagerAdapter{
75. @Override
76. public int getCount() {
77. return Integer.MAX_VALUE;
78. }
79. @Override
80. public boolean isViewFromObject(View arg0, Object arg1) {
81. return arg0 == arg1;
82. }
83. @Override
84. public void destroyItem(View container, int position, Object object) {
85. ((ViewPager)container).removeView(mImageViews[position % mImageViews.length]);
86. }
87. /**
88. * 载入图片进去，用当前的position 除以 图片数组长度取余数是关键
89. */
90. @Override
91. public Object instantiateItem(View container, int position) {
92. ((ViewPager)container).addView(mImageViews[position % mImageViews.length], 0);
93. return mImageViews[position % mImageViews.length];
94. }
95. }
96. @Override
97. public void onPageScrollStateChanged(int arg0) {
98. }
99. @Override
100. public void onPageScrolled(int arg0, float arg1, int arg2) {
101. }
102. @Override
103. public void onPageSelected(int arg0) {
104. setImageBackground(arg0 % mImageViews.length);
105. }
106. /**
107. * 设置选中的tip的背景
108. * @param selectItems
109. */
110. private void setImageBackground(int selectItems){
111. for(int i=0; i<tips.length; i++){
112. if(i == selectItems){
113. tips[i].setBackgroundResource(R.drawable.page_indicator_focused);
114. }else{
115. tips[i].setBackgroundResource(R.drawable.page_indicator_unfocused);
116. }
117. }
118. }
119. }

代码下载

上面的代码中，当只有3张图片或者2张图片的时候，滑动存在BUG问题的修改如下

• destroyItem(View container, int position, Object object)方法中不removeView

[java] view plain copy

 

1. @Override
2. public void destroyItem(View container, int position, Object object) {
3. //          ((ViewPager)container).removeView(mImageViews[position % mImageViews.length]);
4. }

• instantiateItem(View container, int position)增加异常扑捉

[java] view plain copy

 

1. @Override
2. public Object instantiateItem(View container, int position) {
3. try {
4. ((ViewPager)container).addView(mImageViews[position % mImageViews.length], 0);
5. }catch(Exception e){
6. //handler something
7. }
8. return mImageViews[position % mImageViews.length];
9. }

Android 使用ViewPager实现左右循环滑动图片