Android_ViewPager_实现多个图片水平滚动

1.示意图

          

          

2.实现分析

(1).xml配置

1. <!-- 配置container和pager的clipChildren=false， 并且指定marginLeft 和 marginRight 的值-->
2. <LinearLayout
3. android:id="@+id/container"
4. android:layout_width="match_parent"
5. android:layout_height="100dp"
6. android:clipChildren="false"
7. android:gravity="center_horizontal"
8. android:layerType="software"
9. android:orientation="horizontal" >
10. <android.support.v4.view.ViewPager
11. android:id="@+id/viewpager"
12. android:layout_width="match_parent"
13. android:layout_height="match_parent"
14. android:layout_marginLeft="110dp"
15. android:layout_marginRight="110dp"
16. android:clipChildren="false" >
17. </android.support.v4.view.ViewPager>
18. </LinearLayout>

(2).java代码

1. // 1.设置幕后item的缓存数目
2. viewPager.setOffscreenPageLimit(3);
3. // 2.设置页与页之间的间距
4. viewPager.setPageMargin(10);
5. // 3.将父类的touch事件分发至viewPgaer，否则只能滑动中间的一个view对象
6. container.setOnTouchListener(new View.OnTouchListener() {
7. @Override
8. public boolean onTouch(View v, MotionEvent event) {
9. return viewPager.dispatchTouchEvent(event);
10. }
11. });

3.代码实现

1. /**
2. * MainActivity.java
3. *
4. * @author http://blog.csdn.net/zimo2013
5. *
6. */
7. public class MainActivity extends Activity implements OnPageChangeListener {
8. private ViewPager viewPager;
9. private List<View> views = new ArrayList<View>();
10. private LinearLayout container;
11. private TextView tvTitle;
12. private LayoutInflater inflater;
13. private String dir;
14. @Override
15. protected void onCreate(Bundle savedInstanceState) {
16. super.onCreate(savedInstanceState);
17. setContentView(R.layout.activity_main);
18. inflater = getLayoutInflater();
19. container = (LinearLayout) findViewById(R.id.container);
20. viewPager = (ViewPager) findViewById(R.id.viewpager);
21. tvTitle = (TextView) findViewById(R.id.title);
22. //这里预先在sdcard准备一些轮播图片资源
23. dir = Environment.getExternalStorageDirectory().getAbsolutePath();
24. // 得到views集合
25. views = new ArrayList<View>();
26. //此处可以根据需要自由设定，这里只是简单的测试
27. for (int i = 1; i <= 12; i++) {
28. View view = inflater.inflate(R.layout.guide_item, null);
29. views.add(view);
30. }
31. /////////////////////主要配置//////////////////////////////////////
32. // 1.设置幕后item的缓存数目
33. viewPager.setOffscreenPageLimit(3);
34. // 2.设置页与页之间的间距
35. viewPager.setPageMargin(10);
36. // 3.将父类的touch事件分发至viewPgaer，否则只能滑动中间的一个view对象
37. container.setOnTouchListener(new View.OnTouchListener() {
38. @Override
39. public boolean onTouch(View v, MotionEvent event) {
40. return viewPager.dispatchTouchEvent(event);
41. }
42. });
43. ////////////////////////////////////////////////////////////////
44. viewPager.setAdapter(new MyAdapter()); // 为viewpager设置adapter
45. viewPager.setOnPageChangeListener(this);// 设置监听器
46. }
47. // PagerAdapter是object的子类
48. class MyAdapter extends PagerAdapter {
49. /**
50. * PagerAdapter管理数据大小
51. */
52. @Override
53. public int getCount() {
54. return views.size();
55. }
56. /**
57. * 关联key 与 obj是否相等，即是否为同一个对象
58. */
59. @Override
60. public boolean isViewFromObject(View view, Object obj) {
61. return view == obj; // key
62. }
63. /**
64. * 销毁当前page的相隔2个及2个以上的item时调用
65. */
66. @Override
67. public void destroyItem(ViewGroup container, int position, Object object) {
68. container.removeView((View) object); // 将view 类型 的object熊容器中移除,根据key
69. }
70. /**
71. * 当前的page的前一页和后一页也会被调用，如果还没有调用或者已经调用了destroyItem
72. */
73. @Override
74. public Object instantiateItem(ViewGroup container, int position) {
75. System.out.println("pos:" + position);
76. View view = views.get(position);
77. // 如果访问网络下载图片，此处可以进行异步加载
78. ImageView img = (ImageView) view.findViewById(R.id.icon);
79. img.setImageBitmap(BitmapFactory.decodeFile(dir + getFile(position)));
80. container.addView(view);
81. return views.get(position); // 返回该view对象，作为key
82. }
83. }
84. public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
85. if (viewPager != null) {
86. viewPager.invalidate();
87. }
88. }
89. // 一个新页被调用时执行,仍为原来的page时，该方法不被调用
90. public void onPageSelected(int position) {
91. tvTitle.setText(getFile(position));
92. }
93. /*
94. * SCROLL_STATE_IDLE: pager处于空闲状态 SCROLL_STATE_DRAGGING： pager处于正在拖拽中
95. * SCROLL_STATE_SETTLING： pager正在自动沉降，相当于松手后，pager恢复到一个完整pager的过程
96. */
97. public void onPageScrollStateChanged(int state) {
98. }
99. public String getFile(int position) {
100. return "/img" + ((position + 1) >= 10 ? (position + 1) : "0" + (position + 1)) + ".png";
101. }
102. }

1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
2. android:layout_width="match_parent"
3. android:layout_height="match_parent"
4. android:layout_marginLeft="15dp"
5. android:layout_marginRight="15dp"
6. android:layout_marginTop="50dp"
7. android:orientation="vertical" >
8. <View
9. android:layout_width="match_parent"
10. android:layout_height="2dp"
11. android:background="#ffbd2021" />
12. <!-- 配置container和pager的clipChildren=false， 并且指定marginLeft 和 marginRight 的值 -->
13. <LinearLayout
14. android:id="@+id/container"
15. android:layout_width="match_parent"
16. android:layout_height="100dp"
17. android:clipChildren="false"
18. android:gravity="center_horizontal"
19. android:layerType="software"
20. android:orientation="horizontal" >
21. <android.support.v4.view.ViewPager
22. android:id="@+id/viewpager"
23. android:layout_width="match_parent"
24. android:layout_height="match_parent"
25. android:layout_marginLeft="110dp"
26. android:layout_marginRight="110dp"
27. android:clipChildren="false" >
28. </android.support.v4.view.ViewPager>
29. </LinearLayout>
30. <View
31. android:layout_width="match_parent"
32. android:layout_height="2dp"
33. android:background="#ffbd2021" />
34. <ImageView
35. android:layout_width="match_parent"
36. android:layout_height="wrap_content"
37. android:background="@drawable/line" />
38. <TextView
39. android:id="@+id/title"
40. android:layout_width="match_parent"
41. android:layout_height="wrap_content"
42. android:layout_gravity="center"
43. android:gravity="center_horizontal"
44. android:scaleType="fitXY"
45. android:src="@drawable/ic_launcher"
46. android:text="baidu"
47. android:textSize="18sp" />
48. </LinearLayout>