Android UI之ViewPager

1 ViewPager实现滑动页面效果(有限循环或无限循环)

1.1 activity_viewpager.xml

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/flyt_main" 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="fill_parent" android:layout_height="wrap_content" />

     <RelativeLayout  android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical">

<!-- <Button android:id="@+id/btn_im_exp" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_centerHorizontal="true" android:layout_marginBottom="@dimen/activity_btn_bottom" android:background="@mipmap/bg_im_exp" /> </RelativeLayout> -->

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

        <LinearLayout  android:id="@+id/llyt_dots" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_marginBottom="@dimen/activity_linear_bottom" android:gravity="center" android:orientation="horizontal"></LinearLayout>
    </RelativeLayout>
</FrameLayout>

1.2 ViewPagerActivity.java

/** * ViewPagerActivity * * @author Guan * @file com.guan.o2o.ViewPagerActivity * @date 2015/8/10 * @Version 1.0 */
public class ViewPagerActivity extends Activity implements ViewPager.OnPageChangeListener {

    /** * ViewPager */
    @InjectView(R.id.viewPager)
    ViewPager viewPager;

    /** * 小点图片位置 */
    @InjectView(R.id.llyt_dots)
    LinearLayout layoutDots;

    /** * 装ImageView数组List */
    private ArrayList<View> mList;

    /** * 图片资源数组 */
    private ImageView[] mImageViews;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_viewpager);
        ButterKnife.inject(this);

        // 初始化ViewPager
        initViewPager();
    }

    /** * 初始化ViewPager */
    private void initViewPager() {
        LayoutInflater inflater = getLayoutInflater();
        mList = new ArrayList<View>();
        mList.add(inflater.inflate(R.layout.item_four, null));
        mList.add(inflater.inflate(R.layout.item_first, null));
        mList.add(inflater.inflate(R.layout.item_second, null));
        mList.add(inflater.inflate(R.layout.item_third, null));

        mImageViews = new ImageView[mList.size()];

        for (int i = 0; i < mList.size(); i++) {
            mImageViews[i] = new ImageView(ViewPagerActivity.this);
            if (0 == i) {
                mImageViews[i].setBackgroundResource(R.mipmap.ic_indicator_c);
            } else {
                mImageViews[i].setBackgroundResource(R.mipmap.ic_indicator);
            }
            mImageViews[i].setPadding(0, 0, 20, 0);
            layoutDots.addView(mImageViews[i]);
        }

        viewPager.setAdapter(new ViewPagerAdapter(mList, ViewPagerActivity.this));
        // 绑定回调
        viewPager.setOnPageChangeListener(this);
    }

    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

    }

    /** * 返回页面数目实现有限滑动效果 */
// @Override
// public void onPageSelected(int position) {
// // 更新小圆点图标
// for (int i = 0; i < mList.size(); i++) {
// if (position == i) {
// mImageViews[i].setBackgroundResource(R.mipmap.ic_indicator_c);
// } else {
// mImageViews[i].setBackgroundResource(R.mipmap.ic_indicator);
// }
// }
// }

    /** * 无限循环 * @param position */
    @Override
    public void onPageSelected(int position) {
        setImageBackground(position % mImageViews.length);
    }

    /** * 设置选中的tip的背景 * @param selectItems */
    private void setImageBackground(int selectItems){
        // 更新小圆点图标
        for (int i = 0; i < mList.size(); i++) {
            if (selectItems == i) {
                mImageViews[i].setBackgroundResource(R.mipmap.ic_indicator_c);
            } else {
                mImageViews[i].setBackgroundResource(R.mipmap.ic_indicator);
            }
        }
    }

    @Override
    public void onPageScrollStateChanged(int state) {

    }
}

1.3 ViewPagerAdapter.java

/** * 适配器 * * @author Guan * @file com.guan.o2o.adapter * @date 2015/8/10 * @Version 1.0 */
public class ViewPagerAdapter extends PagerAdapter {

    private ArrayList<View> mList;
    private Activity mActivity;

    public ViewPagerAdapter(ArrayList<View> list, Activity activity) {
        this.mList = list;
        this.mActivity = activity;
    }

    @Override
    public int getCount() {

// // 返回页面数目实现有限滑动效果
// if (mList != null) {
// return mList.size();
// }
// return 0;

        // 返回最大值，实现无限循环
        return Integer.MAX_VALUE;
    }

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

    @Override
    public int getItemPosition(Object object) {
        return super.getItemPosition(object);
    }

    @Override
    public Object instantiateItem(View container, int position) {
        // 返回页面数目实现有限滑动效果
// ((ViewPager) container).addView(mList.get(position), 0);
// return mList.get(position);

        // 无限循环
        ((ViewPager) container).addView(mList.get(position % mList.size()), 0);
        return mList.get(position % mList.size());
    }


    @Override
    public void restoreState(Parcelable arg0, ClassLoader arg1) {

    }

    @Override
    public Parcelable saveState() {
        return null;
    }

    @Override
    public void startUpdate(View arg0) {
    }

    @Override
    public void finishUpdate(View arg0) {
    }

    @Override
    public void destroyItem(View container, int position, Object object) {
        // 返回页面数目实现有限滑动效果
// ((ViewPager) container).removeView(mList.get(position));

        // 无限循环
        ((ViewPager) container).removeView(mList.get(position % mList.size()));
    }
}

1.4 item_first.xml、item_second.xml、item_third.xml、item_four.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" >

    <ImageView  android:id="@+id/imageView4" android:layout_width="fill_parent" android:layout_height="fill_parent" android:scaleType="centerCrop" android:src="@mipmap/bg_four" />

</LinearLayout>

1.5 资源图片

ic_indicator.png

ic_indicator_c.png

bg_four.jpg

1.6 效果图

补充：需要在布局activity_viewpager.xml中添加按钮，效果如下

2 ViewPager滑动事件讲解

2.1 ViewPager在处理滑动事件的时候要用到OnPageChangeListener

2.2 OnPageChangeListener这个接口需要实现三个方法：

①onPageScrollStateChanged
②onPageScrolled
③onPageSelected

2.3 onPageScrollStateChanged(int arg0)

此方法是在状态改变的时候调用，其中arg0这个参数,有三种状态（0，1，2）。
①arg0 ==1的时候默示正在滑动。
②arg0==2的时候默示滑动完毕了。
③arg0==0的时候默示什么都没做。

当页面开始滑动的时候，三种状态的变化顺序为（1，2，0），演示如下：

2.4 onPageScrolled(int arg0,float arg1,int arg2)

当页面在滑动的时候会调用此方法，在滑动被停止之前，此方法回一直得到

调用。其中三个参数的含义分别为
①arg0 :当前页面，及你点击滑动的页面。
②arg1:当前页面偏移的百分比。
③arg2:当前页面偏移的像素位置

2.5 onPageSelected(int arg0)

此方法是页面跳转完后得到调用，arg0是你当前选中的页面的Position（位置编号）。