ViewPager图片轮播

很久没有写博客了，感觉自己太low了，还是得多写写东西，虽然可能是比较简单的小Demo，但是还是不能偷懒！

好了，直接说说今天的demo吧，今天主要就是实现图片轮播。这个demo还是比较简单，所以就简单说下关键点吧！

1.使用ViewPager来显示图片

2.动态的添加底部的指示点

3.将指示点和ViewPager图片进行关联

4.无限循环

只要清楚以上4点，那么就很好写demo了，下面就直接上代码

XML文件是：

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
             android:layout_width="fill_parent"
             android:layout_height="fill_parent"
             android:orientation="vertical" >

   <android.support.v4.view.ViewPager
       android:id="@+id/viewPager"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"/>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <LinearLayout
            android:id="@+id/linearlayout"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_marginBottom="30dp"
            android:layout_centerHorizontal="true"
            android:orientation="horizontal">
        </LinearLayout>
    </RelativeLayout>
</FrameLayout>

MainActivity的代码是：

package com.feng.viewpagerdemo;

import android.app.Activity;
import android.os.Bundle;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;

public class MainActivity extends Activity implements ViewPager.OnPageChangeListener {

    private ViewPager mViewPager;
    private LinearLayout mLinearLayout;

    /**
     * 装圆点数组
     */
    private ImageView[] dots;

    /**
     * 装ImagView数组
     */
    private ImageView[] mImageViews;

    /**
     * 装图片ID的数组
     */
    private int[] photos;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mLinearLayout = (LinearLayout) this.findViewById(R.id.linearlayout);
        mViewPager = (ViewPager) this.findViewById(R.id.viewPager);
        photos = new int[]{R.mipmap.photo1, R.mipmap.photo2, R.mipmap.photo3, R.mipmap.photo4, R.mipmap.photo5};

        /**
         * 初始化底部的指示点，动态将指示点加入布局
         */
        dots = new ImageView[photos.length];
        for (int i = 0; i < dots.length; i++) {
            ImageView imageView = new ImageView(this);
            imageView.setLayoutParams(new LinearLayout.LayoutParams(10, 10));
            dots[i] = imageView;
            if (i == 0) {
                imageView.setBackgroundResource(R.mipmap.message_no_read);
            } else {
                imageView.setBackgroundResource(R.mipmap.message_read);
            }

            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT);

            params.leftMargin = 7;
            params.rightMargin = 7;
            mLinearLayout.addView(imageView,params);

        }

        //初始化图片
        mImageViews = new ImageView[photos.length];
        for (int i = 0; i < mImageViews.length; i++) {
            ImageView imageView = new ImageView(this);
            imageView.setBackgroundResource(photos[i]);
            mImageViews[i] = imageView;
        }

        //设置适配器
        mViewPager.setAdapter(new MyAdapter());
        //设置监听，使得底部的指示点和图片同步
        mViewPager.setOnPageChangeListener(this);
        //设置ViewPager的默认项, 这样子开始就能往左滑动
        mViewPager.setCurrentItem((mImageViews.length) * 100);


    }

    @Override
    public void onPageScrolled(int i, float v, int i1) {

    }

    @Override
    public void onPageSelected(int i) {
        setDotSelect(i  % mImageViews.length);//ViewPager滑动的时候指示点也变动
    }

    @Override
    public void onPageScrollStateChanged(int i) {

    }

    private class MyAdapter extends PagerAdapter {

        @Override
        public int getCount() {
            return Integer.MAX_VALUE;//为了无限轮播，让数据足够大
        }

        @Override
        public boolean isViewFromObject(View view, Object o) {
            return view == o;
        }

        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            container.addView(mImageViews[position % mImageViews.length]);
            return mImageViews[position % mImageViews.length];
        }


        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            container.removeView(mImageViews[position % mImageViews.length]);
        }
    }

    /**
     * 根据选中的Pager设置底部指示点
     * @param position
     */
    public void setDotSelect(int position){
        for(int i=0;i<dots.length;i++){
            if(i== position){
                dots[i].setBackgroundResource(R.mipmap.message_no_read);
            }else{
                dots[i].setBackgroundResource(R.mipmap.message_read);
            }
        }
    }

}

代码中已经注释很清楚了，还请各位看官多多指教！！

下面是效果图

枫