利用viewPager实现的自动滑动的广告栏

    首先上一下效果图

我们将实现图片与文字的手动切换与自动切换，以及指示圆点的自动切换。
这里主要的工作在ViewPagerAdapter.

步骤：
1. 在activity的布局文件中使用viewpager,
2. viewPager的子布局
3. 用布局方式画圆点。
4. 初始化adapter， 在onPagerChangeListener中控制小点的切换。
5. 定时器控制自动滑动。

1. activity的布局文件

<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="com.jiang.wei.mypractice.BannersActivity">

    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="200dp"></android.support.v4.view.ViewPager>
    <LinearLayout
        android:id="@+id/llPots"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal"
        android:layout_marginTop="180dp"
        android:orientation="horizontal">
    </LinearLayout>
</RelativeLayout>

1. viewPager的子布局， 一个ImageView,和一个TextView用户放图片与标题

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

    <ImageView
        android:id="@+id/ivPicture"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="150dp"
        android:orientation="vertical">

        <TextView
            android:id="@+id/tvTitle"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center_horizontal"
            android:text="xxx" />
    </LinearLayout>
</FrameLayout>

1. 用布局方式画圆点，并做成选择器的形式，方便切换。

<?xml version="1.0" encoding="utf-8"?>
<shape
    android:shape="oval"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 填充颜色 -->
    <solid android:color="@android:color/darker_gray" ></solid>
    <size android:width="3dp" android:height="3dp"></size>
</shape>
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/select_spot" android:state_selected="true"></item>
    <item android:drawable="@drawable/unselect_spot"></item>
</selector>
selector
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/select_spot" android:state_selected="true"></item>
    <item android:drawable="@drawable/unselect_spot"></item>
</selector>

1. 下面是主代码。
   这里有两个计算的地方
   int initPosition = (Integer.MAX_VALUE / 2) / size * size; 这里初始化位置为size的整数倍，
   position %= pagerNames.length; 让position 一直保持在 [0-size]之间

public class BannersActivity extends AppCompatActivity {

    private ViewPager viewPager;
    private LinearLayout llPots;

    private static String[] pagerNames = {"美女一", "美女二", "美女三", "美女四", "美女五"};

    private static int[] pictrues = {R.drawable.girl1, R.drawable.girl2, R.drawable.girl3,
            R.drawable.girl4, R.drawable.girl5};
    private Timer timer;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_banners);

        viewPager = (ViewPager) findViewById(R.id.viewPager);
        viewPager.setAdapter(new MyPagerAdapter());

        int size = pagerNames.length;
        int initPosition = (Integer.MAX_VALUE / 2) / size * size; //设置其实位置为Interger.MAX_VALUE的中间位置
        viewPager.setCurrentItem(initPosition);
        llPots = (LinearLayout) findViewById(R.id.llPots);

        viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
            }
            @Override
            public void onPageSelected(int position) {
                //修改指示点
                setSelect(position);
            }
            @Override
            public void onPageScrollStateChanged(int state) {
            }
        });

        //设置手指触摸时停止自动滑动
        viewPager.setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View v, MotionEvent event) {
                if (event.getAction() == MotionEvent.ACTION_DOWN) {
                    stopLoopThread();
                }
                if (event.getAction() == MotionEvent.ACTION_UP) {
                    startLoopTherad();
                }
                return false;
            }
        });
        initSpot();
        startLoopTherad();
    }

    private void stopLoopThread() {
        timer.cancel();
        timer = null;
    }
    private void startLoopTherad() {
        //设置定时器控制自动滑动
        TimerTask task = new TimerTask() {
            @Override
            public void run() {
                runOnUiThread(new Runnable() {
                    @Override
                    public void run() {
                        viewPager.setCurrentItem(viewPager.getCurrentItem() + 1);
                    }
                });
            }
        };

         timer = new Timer();
        timer.schedule(task, 2000, 2000);
    }

    //初始化初示的小点
    private void initSpot() {
        for (int i = 0; i < pagerNames.length; i++) {
            ImageView iv = new ImageView(this);
            iv.setPadding(5, 0, 5, 0);
            iv.setImageResource(R.drawable.selector_spot);
            llPots.addView(iv);
        }
        setSelect(0);
    }

    //切换小点
    public void setSelect(int positoin) {
        for (int i = 0; i < pagerNames.length; i++) {
            ImageView iv = (ImageView) llPots.getChildAt(i);
            iv.setSelected(i == positoin % pagerNames.length);
        }
    }


    private class MyPagerAdapter extends PagerAdapter {
        @Override
        public int getCount() {
            return Integer.MAX_VALUE;
        }

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

        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            container.removeView((View) object);
        }

        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            position %= pagerNames.length; 

            View view = View.inflate(BannersActivity.this, R.layout.item_banners, null);
            ImageView ivPicture = (ImageView) view.findViewById(R.id.ivPicture);
            ivPicture.setBackgroundResource(pictrues[position]);
            TextView tvTitle = (TextView) view.findViewById(R.id.tvTitle);
            tvTitle.setText(pagerNames[position]);
            container.addView(view);
            return view;
        }
    }
}