android viewpager 图片翻页例子

浏览数：26 / 时间：2015年06月11日

使用ViewPager这个类可以轻松实现多个页面的滑动功能

viewpager默认在工具界面上是找不到的，需求添加android-support-v4.jar包；

如果没有找到，需要打开Android SDK Manager在Extras中进行下载，最后记得引入工程中并build path。

（不过，我把代码直接COPY到.XML好像就会自动添加了）

例子说明：item01..item08是要翻页的图片，page_indicator_focused，page_indicator_unfocused是显示在底部的点点图片，要自己添加到res\drawable-hdpi\中；

.XML

代码下载：http://pan.baidu.com/s/1mgA7MBY

 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 
 6     <android.support.v4.view.ViewPager
 7         android:id="@+id/viewPager"
 8         android:layout_width="fill_parent"
 9         android:layout_height="wrap_content" />
10 
11     <RelativeLayout
12         android:layout_width="fill_parent"
13         android:layout_height="wrap_content"
14         android:orientation="vertical" >
15 
16         <LinearLayout
17             android:id="@+id/viewGroup"
18             android:layout_width="fill_parent"
19             android:layout_height="wrap_content"
20             android:layout_alignParentBottom="true"
21             android:layout_marginBottom="30dp"
22             android:gravity="center_horizontal"
23             android:orientation="horizontal" >
24         </LinearLayout>
25     </RelativeLayout>
26 
27 </FrameLayout>

.JAVA

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