通过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

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