利用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;
        }
    }
}