通过ViewPager控件实现多张图片动态切换

本博客实现的功能

通过ViewPager动态显示多张图片，手指滑动可以切换到其他图片。

效果图：

这次用Android Studio 实现，首先在布局文件中声明iewPager

 <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="fill_parent"
        android:layout_height="200dip" >
    </android.support.v4.view.ViewPager>

然后在布局文件中定义iewPager的描述信息和将要呈现的灰白点的Linearlayout布局

<LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@id/viewpager"
        android:background="#77000000"
        android:gravity="center_horizontal"
        android:orientation="vertical"
        android:padding="5dip" >

        <TextView
            android:id="@+id/tv_image_description"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="我是默认的图片描述信息"
            android:textColor="#FFFFFF"
            android:textSize="16sp" />

        <!--此布局用来显示灰白点-->
        <LinearLayout
            android:id="@+id/ll_point_group"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="5dip"
            android:orientation="horizontal" >
        </LinearLayout>
    </LinearLayout>

因为考虑到要描述数据，所以要初始化数据：

private void initData() {
        /**
         * 初始化字符数组的数据
         */
        imageDescriptions = new String[] {
                "巩俐不低俗，我就不低俗",
                "扑树又回来啦！再唱经典老歌引万人大合唱",
                "揭秘北京电影如何升级",
                "乐视网TV版大派送",
                "热血屌丝的反杀"
        };
        /**
         * 初始化图片数组
         */
        int[]images={
            R.drawable.a,
            R.drawable.b,
            R.drawable.c,
            R.drawable.d,
            R.drawable.e
        };
        imageViewList=new ArrayList<ImageView>() ;
        //循环向linearLayout添加图片
        ImageView iv;
        View v;
        LinearLayout.LayoutParams params;
        for(int i=0;i<images.length;i++){
            iv=new ImageView(getApplicationContext());
            iv.setBackgroundResource(images[i]);
            imageViewList.add(iv);//将图片添加到集合中
            //每循环一次向linearlayout添加一个点的view对象
            v=new View(this);
            v.setBackgroundResource(R.drawable.point_bg);
            params=new LinearLayout.LayoutParams(15,15);
            if(i!=0){//如果当前不是第一个点
                params.leftMargin=5;
            }
            v.setLayoutParams(params);
            v.setEnabled(false);
            llPointGroup.addView(v);
        }
    }

然后定义pagerAdapter的适配器，用于存放初始图片的数据

class MyAdapter extends PagerAdapter{

        @Override
        public int getCount() {
            return Integer.MAX_VALUE;
        }

        /**
         * 判断是否使用缓存，如果为true则为使用缓存
         * @param view
         * @param object
         * @return
         */
        @Override
        public boolean isViewFromObject(View view, Object object) {
            return view==object;//equals return true;

        }

        /**
         * 初始化一个条目
         * @param container
         * @param position 当前需要加载条目的索引
         * @return
         */
        @Override
        public Object instantiateItem(ViewGroup container, int position) {

            ImageView iv=imageViewList.get(position%imageViewList.size());
            mViewPager.addView(iv);//将当前ImageView添加到ViewPager中

            return iv;

        }

        /**
         * 把当前view从ViewPager中移除掉
         * @param container
         * @param position
         * @param object
         */
        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {

            mViewPager.removeView(imageViewList.get(position%imageViewList.size()));
        }
    }

最后需要初始化view进行显示

public void intiView(){
        mViewPager= (ViewPager) findViewById(R.id.viewpager);
        tvImageDescription= (TextView) findViewById(R.id.tv_image_description);
        llPointGroup= (LinearLayout) findViewById(R.id.ll_point_group);

        initData();//进行初始化数据进行调用的方法
        tvImageDescription.setText(imageDescriptions[previousPosition]);//Set up default descriptions attached to image
        llPointGroup.getChildAt(previousPosition).setEnabled(true);
        //给ViewPager设置适配器数据
        MyAdapter adapter=new MyAdapter();
        mViewPager.setAdapter(adapter);
        //设置ViewPager状态的监听事件
        mViewPager.setOnPageChangeListener(this);
        int m = (Integer.MAX_VALUE / 2) % imageViewList.size();
        int currentPosition = Integer.MAX_VALUE / 2 - m;
        mViewPager.setCurrentItem(currentPosition);
    }

当然，当前activity还需要继承 ViewPager.OnPageChangeListener

根据状态的改变然后改变相应的描述信息。这样这个简单又实用的功能就成型了。