android之ViewPager的使用详解

         ViewPager在如今的android开发中越来越火热，广泛用于各种各样的APP中进行类似于“广告”效果的展示。ViewPager据说是谷歌之外的一个程序员实现的，后来这个程序员把这个东东发给了谷歌的程序员，后来就以第三方jar的形式添加进来了。那么废话不多，下面就让我们看看如何一步步的去实现viewPager的效果。

        最后实现的Demo效果：

         首先先让我们看看这个ViewPager在什么地方（本人使用的IDE是android stdio，Eclipse的步骤类似）：让我们打开AS，在Project视图下，可以看到External  Libraries下的V4支持包，将路径一步一步的定位到v4--->classes.jar--->view--->ViewPager.java，这样我们就找到了ViewPager这个类，下一步就是把它引入我们的项目中了。选中该类右键选择""Copy  Reference"，将该类的路径复制到系统粘贴板。

        接下来就是在已经建成的项目中编辑自己的界面XML文件了，activity_main.xml文件代码如下所示：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <android.support.v4.view.ViewPager
        android:id="@+id/view_pager_view"
        android:layout_width="fill_parent"
        android:layout_height="150dp" />

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@id/view_pager_view"
        android:background="#33000000"
        android:gravity="center_horizontal"
        android:orientation="vertical">
        <!-- 用于描述图片的文字-->
        <TextView
            android:id="@+id/pager_test_tv"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:gravity="center_horizontal"
            android:textColor="#ffffff" />
        <!-- 动态生成圆点-->
        <LinearLayout
            android:id="@+id/point_layout"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

        </LinearLayout>
    </LinearLayout>
</RelativeLayout>

      下一步就是来编辑自己的Activity文件了，具体的代码如下：

/**
 * @des ViewPage
 */
public class MainActivity extends ActionBarActivity {

    private ViewPager viewPager;
    //用于显示图片描述
    private TextView pager_test_tv;
    //需要动态插入圆点的父控件LinearLayout
    private LinearLayout point_layout;
    //保存图片资源的数组
    private int[] imageIds;
    //保存图片对象的list
    private List<ImageView> imageList;
    //保存图片资源的图片描述
    private String[] imageDescptions;
    private int previous;
    //用于控制是否停止自动进行图片滑动
    private boolean isRuning = true;
    private int currentItem;
    private Handler handler;
    //设置动态生成的pointView的宽度
    private static final int SIZE_POINT_WIDTH = 10;
    //设置动态生成的pointView的高度
    private static final int SIZE_POINT_HEIGHT = 10;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
        initData();
        setOnListener();
    }

    private void initView() {
        pager_test_tv = (TextView) findViewById(R.id.pager_test_tv);
        viewPager = (ViewPager) findViewById(R.id.view_pager_view);
        point_layout = (LinearLayout) findViewById(R.id.point_layout);
    }

    private void initData() {
        imageIds = getImageIds();
        imageList = getImageLists();
        viewPager.setAdapter(new MyPageAdapter(imageList, viewPager));
        imageDescptions = getImageDescptions();
        //设置初始viewPager的位置
        currentItem = Integer.MAX_VALUE / 2;
        currentItem = currentItem - currentItem % imageList.size();
        viewPager.setCurrentItem(currentItem);
        //设置初始文字描述
        pager_test_tv.setText(imageDescptions[0]);
        point_layout.getChildAt(0).setEnabled(true);
        setTimeForMove();
        handler.sendEmptyMessageDelayed(0, 2000);
    }

    /**
     * @return
     * @des 初始化图片资源
     */
    private int[] getImageIds() {
        return new int[]{R.drawable.a, R.drawable.b, R.drawable.c, R.drawable.d, R.drawable.e,};
    }

    /**
     * @return
     * @des 将图片资源转为图片对象list
     */
    private List<ImageView> getImageLists() {
        View viewPoint;
        imageList = new ArrayList<ImageView>();
        for (int i = 0; i < imageIds.length; i++) {
            ImageView view = new ImageView(this);
            viewPoint = new View(this);
            view.setBackgroundResource(imageIds[i]);
            imageList.add(view);
            //动态加载“圆点”
            setViewPoint(viewPoint);
        }
        return imageList;
    }

    /**
     * @param viewPoint
     * @des 动态的在父控件LineraLayout加入“圆点”view
     */
    private void setViewPoint(View viewPoint) {
        LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(SIZE_POINT_WIDTH, SIZE_POINT_HEIGHT);
        layoutParams.leftMargin = 7;
        viewPoint.setLayoutParams(layoutParams);
        viewPoint.setBackgroundResource(R.drawable.selsct_the_image);
        viewPoint.setEnabled(false);
        point_layout.addView(viewPoint);
    }

    /**
     * @return
     * @des 初始化文本资源
     */
    private String[] getImageDescptions() {
        return new String[]{"这是第一个image", "这是第二个image", "这是第三个image", "这是第四个image", "这是第五个image"};
    }

    private void setOnListener() {
        viewPager.setOnPageChangeListener(new myListener());
    }

    @Override
    protected void onDestroy() {
        isRuning = false;
        super.onDestroy();
    }

    /**
     * @des 实现图片自动转换
     */
    private void setTimeForMove() {
        handler = new Handler() {
            @Override
            public void handleMessage(Message msg) {
                //设置为下一个图片
                viewPager.setCurrentItem(viewPager.getCurrentItem() + 1);
                if (isRuning) {
                    handler.sendEmptyMessageDelayed(0, 2000);
                }
            }
        };
    }

    private class myListener implements ViewPager.OnPageChangeListener {
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

        }

        @Override
        public void onPageSelected(int position) {
            int newPostion = position % imageList.size();
            pager_test_tv.setText(imageDescptions[newPostion]);
            point_layout.getChildAt(newPostion).setEnabled(true);
            point_layout.getChildAt(previous).setEnabled(false);
            previous = newPostion;
        }

        @Override
        public void onPageScrollStateChanged(int state) {

        }
    }
}

      最后的这个文件就是自己继承PagerAdapter的类了：

/**
 * @des 设置viewPagerAdapter
 * Created by Administrator on 2016/1/16.
 */
public class MyPageAdapter extends PagerAdapter {
    private List<ImageView> imageViews;
    private ViewPager viewpage;

    public MyPageAdapter(List<ImageView> list, ViewPager viewPager) {
        imageViews = list;
        viewpage = viewPager;
    }

    @Override
    public int getCount() {
        //获得图片总的个数
        return Integer.MAX_VALUE;
    }

    @Override
    public boolean isViewFromObject(View view, Object object) {
        //当前图片是否进行了变换
        return view == object;
    }

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        int newPostion = position % imageViews.size();
        //初始化viewPage（将图片放入）
        viewpage.addView(imageViews.get(newPostion));
        //return super.instantiateItem(container, position);---该句会返回异常
        return imageViews.get(newPostion);
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        int newPostion = position % imageViews.size();
        //移除viewPage的图片
        viewpage.removeView(imageViews.get(newPostion));
        //super.destroyItem(container, position, object);---该句会返回异常
    }
}

     以上的工作就完成了viewPager的功能实现，需要说明的是ViewPager具有预加载功能，但是该功能需要一个前提：当前显示的图片的前一个图片的序列必须要大于0并且当前图片的后一个图片的序列必须要小于加载的图片的总数量。只有在以上的这种前提下才能实现预加载的功能。为了实现ViewPager中的图片能随意前后滑动，我们的思想就是修改ViewPager的加载的图片数量，设置一个足以巨大的数值，并且把程序最开始要展示的位置设置为这个巨大数值的一半。这样的话，就实现了ViewPager的前后随意滑动的功能。

    另外需要注意的一些小细节：

   1. 通常来说，图片的资源以及图片的描述都应该是从后台服务器中获得的，所以在编写该ViewPager的时候，把这两种资源的获得封装成了具体的两个方法，只要修改这两个方法的具体实现就可以实现从网络上获得相关资源并进行展示的效果。

   2. 在实现自动切换图片的功能时，本Demo使用了Handler来进行图片的动态刷新，这样就会创建了一个新的线程去执行刷新的操作，因此在退出该应用的时候需要在OnDestory方法中关闭线程的继续执行。