ViewPager 循環滾動

這個功能其實很簡單,看代碼。
先定義一個View的集合和一個View裏面顯示圖片的id的數組,都用集合也可以。

private List<View> viewList = new ArrayList<View>();
private int[] ids = { R.drawable.pic_1, R.drawable.pic_2, R.drawable.pic_3 };

接着創建View。

private void createView() {
    // 創建一個跟最後一個一樣的放在前面
    viewList.add(createImageView(ids[ids.length - 1]));
    for (int i = 0; i < ids.length; i++) {
        viewList.add(createImageView(ids[i]));
    }
    // 創建一個跟第一個一樣的放在後面
    viewList.add(createImageView(ids[0]));
}

多生成兩個輔助的View,這樣的一個View 集合使用ViewPage顯示之後,圖片1往回滾動就會顯示圖片3,圖片3正常滾動就會顯示圖片1。
看起來是不是循環了呢?有人想說:你這不是瞎比比麼,這樣圖片3滾到圖片1再繼續滾不還是動不了了嗎?這樣的問題當然要解決了,不然就不叫循環了

OnPageChangeListener myOnPageChangeListener = new OnPageChangeListener() {

    @Override
    public void onPageSelected(int arg0) {
    }

    @Override
    public void onPageScrolled(int arg0, float arg1, int arg2) {
        // 無限循環滑動
        if (ids.length > 1) {// 多於一個view纔會循環跳轉
            if (arg0 == 0 && arg2 == 0) {
                // 切換循環更加流暢,不會出現生硬的切換感覺
                arg0 = ids.length;
                viewpager.setCurrentItem(arg0, false);
            } else if (arg0 > ids.length) {
                viewpager.setCurrentItem(1, false);
            }
        }
    }

    @Override
    public void onPageScrollStateChanged(int arg0) {
    }
};

把這個監聽實例設置給ViewPage實例就好啦。
setCurrentItem(arg0, false);false表示無動畫滾動,就是直接改變正在顯示的View。
所以…看出來吧,到了最後一個的時候立刻無動畫進入第一個,由於第一個和最後一個是一模一樣的,所以看起來就像直接從最後一個有動畫進入了第一個,就是循環啦。
下面貼出一份完整的代碼
佈局文件:

<LinearLayout 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:orientation="vertical" >

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

</LinearLayout>

Java代碼:

import java.util.ArrayList;
import java.util.List;

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

public class MainActivity extends Activity {

    private ViewPager viewpager = null;
    private List<View> viewList = new ArrayList<View>();
    private int[] ids = { R.drawable.pic_1, R.drawable.pic_2, R.drawable.pic_3 };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        init();
        initViewPagerData();
    }

    private void init() {
        // 初始化界面
        viewpager = (ViewPager) findViewById(R.id.view_pager);
        // 添加事件
        viewpager.setOnPageChangeListener(myOnPageChangeListener);
    }

    private void initViewPagerData() {

        createView();

        viewpager.setAdapter(pagerAdapter);
        viewpager.setCurrentItem(1, false);
    }

    private void createView() {
        // 創建一個跟最後一個一樣的放在前面
        viewList.add(createImageView(ids[ids.length - 1]));
        for (int i = 0; i < ids.length; i++) {
            viewList.add(createImageView(ids[i]));
        }
        // 創建一個跟第一個一樣的放在後面
        viewList.add(createImageView(ids[0]));
    }

    private ImageView createImageView(int id) {
        ImageView view = new ImageView(this);
        view.setBackgroundResource(id);
        return view;
    }

    OnPageChangeListener myOnPageChangeListener = new OnPageChangeListener() {

        @Override
        public void onPageSelected(int arg0) {
        }

        @Override
        public void onPageScrolled(int arg0, float arg1, int arg2) {
            // 無限循環滑動
            if (ids.length > 1) {// 多於一個view纔會循環跳轉
                if (arg0 == 0 && arg2 == 0) {
                    // 切換循環更加流暢,不會出現生硬的切換感覺
                    arg0 = ids.length;
                    viewpager.setCurrentItem(arg0, false);
                } else if (arg0 > ids.length) {
                    viewpager.setCurrentItem(1, false);
                }
            }
        }

        @Override
        public void onPageScrollStateChanged(int arg0) {
        }
    };

    PagerAdapter pagerAdapter = new PagerAdapter() {

        @Override
        public boolean isViewFromObject(View arg0, Object arg1) {
            return arg0 == arg1;
        }

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

        public Object instantiateItem(ViewGroup container, int position) {
            ((ViewPager) container).addView(viewList.get(position));
            return viewList.get(position);
        };

        public void destroyItem(ViewGroup container, int position, Object object) {
            ((ViewPager) container).removeView(viewList.get(position));
        };

    };

}
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章