寫在前面

之前寫過ViewPager簡單的使用，做android時(shí)間久了蒿褂，做什么都想著引包，但是實(shí)現(xiàn)的基本的原理還是應(yīng)該學(xué)習(xí)一下的卒暂，今天寫一下ViewPager 無限循環(huán)啄栓、輪播實(shí)現(xiàn)的基本實(shí)現(xiàn)方式。

實(shí)現(xiàn)的基本原理

其實(shí)這東西實(shí)現(xiàn)的基本原理也很好理解也祠，例如我們需要展示出來的三張照片的話昙楚，那么我們在建 ViewPager頁面的時(shí)候，多建兩張诈嘿，分別放在頭和尾堪旧，頭和倒數(shù)第二張圖片一樣，尾和正數(shù)第二張照片一樣奖亚。如下圖

基本原理圖1.png

頁面滑動是從第二張圖片開始淳梦，當(dāng)頁面滑動到最后一張圖片的時(shí)候，自動跳轉(zhuǎn)到第二張圖片并且取消切換動畫昔字。這樣就可以基本上實(shí)現(xiàn)無限滑動爆袍。

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"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    tools:context=".MainActivity">

    <android.support.v4.view.ViewPager
        android:id="@+id/vp"
        android:layout_width="match_parent"
        android:layout_height="300dp" />

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_marginTop="250dp"
        android:layout_marginRight="10dp"
        android:orientation="horizontal">

        <ImageView
            android:id="@+id/iv_1"
            android:layout_width="20dp"
            android:layout_height="20dp"
            android:background="@drawable/point_selector" />

        <ImageView
            android:id="@+id/iv_2"
            android:layout_width="20dp"
            android:layout_height="20dp"
            android:background="@drawable/point_selector" />

        <ImageView
            android:id="@+id/iv_3"
            android:layout_width="20dp"
            android:layout_height="20dp"
            android:background="@drawable/point_selector" />
    </LinearLayout>
</RelativeLayout>

代碼中包含輪播圖中的選擇的小點(diǎn)，不需要的可以取消掉作郭。

java 代碼

初始化 陨囊， Activity需要 “implements ViewPager.OnPageChangeListener”

vp = (ViewPager) findViewById(R.id.vp);
        ivs = new ImageView[3];
        ivs[0] = (ImageView) findViewById(R.id.iv_1);//小點(diǎn)
        ivs[1] = (ImageView) findViewById(R.id.iv_2);
        ivs[2] = (ImageView) findViewById(R.id.iv_3);
        ivs[0].setSelected(true);
        list = new ArrayList<View>();
        list.add(View.inflate(this, R.layout.view_3, null));
        list.add(View.inflate(this, R.layout.view_1, null));
        list.add(View.inflate(this, R.layout.view_2, null));
        list.add(View.inflate(this, R.layout.view_3, null));
        list.add(View.inflate(this, R.layout.view_1, null));
        MyPageAdapter adapter = new MyPageAdapter();
        vp.setAdapter(adapter);
        vp.setCurrentItem(1, false);
        vp.addOnPageChangeListener(this);//添加頁面改變事件

ViewPager 適配器需要繼承PagerAdapter

 private List<View> mFragmentList;

    public MypagerAdapter(List<View> mFragmentList) {
        this.mFragmentList = mFragmentList;
    }

    @Override
    public int getCount() {
        return mFragmentList.size();
    }

    @Override
    public boolean isViewFromObject(@NonNull View view, @NonNull Object object) {
        return view == object;
    }
    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        // TODO Auto-generated method stub
        container.addView(mFragmentList.get(position));
        return mFragmentList.get(position);
    }
    @Override
    public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
        container.removeView(mFragmentList.get(position));
    }

頁面滑動監(jiān)聽onPageScrollStateChanged

 @Override
    public void onPageScrollStateChanged(int state) {
        //驗(yàn)證當(dāng)前的滑動是否結(jié)束
        if (state == ViewPager.SCROLL_STATE_IDLE) {
              if (curponsition == 0){
                vp.setCurrentItem(3, false);//切換，不要動畫效果
            } else if (curponsition == 4) {
                vp.setCurrentItem(1, false);//切換夹攒，不要動畫效果
            }
        }
    }

小點(diǎn)切換蜘醋，頁面切換監(jiān)聽，上面滑動監(jiān)聽切換頁面需要用到下面的索引

  @Override
    public void onPageSelected(int position) {
        curponsition = position;//記錄當(dāng)前顯示的索引 
        switch (position) {
            case 0:
            case 3:
                setSelect(2);
                break;
            case 1:
            case 4:
                setSelect(0);
                break;
            case 2:
                setSelect(1);
                break;
        }
    }

    private void setSelect(int index) {
        for (int i = 0; i < ivs.length; i++) {
            ivs[i].setSelected(i == index);
        }
    }

如果定時(shí)輪播還需要加一個(gè)定時(shí)器以及handler咏尝，index初始值為-1

 handler = new Handler() {
            @Override
            public void handleMessage(Message msg) {
                vp.setCurrentItem(msg.arg1, true);//設(shè)置頁面
            }
        };
        //實(shí)例化定時(shí)器
        timer = new Timer();
        //指定定時(shí)器計(jì)劃
        timer.schedule(new TimerTask() {

            @Override
            public void run() {
              // TODO Auto-generated method stub
                Message msg = Message.obtain();
                index++;
                msg.arg1 = index % 3 + 2;
                msg.what = 10086;
                handler.sendMessage(msg);
            }
        }, 3000, 3000);//第二個(gè)參數(shù)：延時(shí)压语，第三個(gè)間隔

總結(jié)

以上代碼基本上就可以實(shí)現(xiàn)一個(gè)簡單的輪播圖（無限循環(huán)）啸罢。如果有什么問題，可以在下面評論留言无蜂，不足之處多多指教伺糠。