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
Android UI之ViewPager_第1张图片

1.6 效果图

Android UI之ViewPager_第2张图片

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

Android UI之ViewPager_第3张图片

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），演示如下：
Android UI之ViewPager_第4张图片

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

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

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

2.5 onPageSelected(int arg0)

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