ViewPager的使用

一、ViewPager简介：

android.support.v4.view.ViewPager中的一个常用的控件。允许数据页从左到右或者从右到左翻页，因此这种交互也备受设计师的青睐。在APP中的很多场景都用得到，比如第一次安装APP时的用户引导页、图片浏览时左右翻页、广告Banner页等等都会用到ViewPager。

二、ViewPager显示的对象

ViewPager显示的对象是View及其子类，自然包括各种布局及ImageView对象等。

LayoutInflater inflater=getLayoutInflater();  
view = inflater.inflate(R.layout.pager1, null);

ImageView image=new ImageView(this);
image.setImageResource(imageIds[i]);

ViewPager可以显示Activity，首先将Activity转换成View对象：

LocalActivityManager lam = new LocalActivityManager(this, true);
lam.dispatchCreate(savedInstanceState);//必须被调用
Intent intent = new Intent(this, MainActivity.class);
    View mainView = lam.startActivity("MainActivity", intent).getDecorView();

ViewPager可以显示Fragment，会用到FragmentPagerAdapter，其实FragmentPagerAdapter就是PagerAdapter的子类。

    List<Fragment> fragments=new ArrayList<>();
    fragments.add(new BlankFragment());
    fragments.add(new PlusOneFragment());
    fragments.add(new ItemFragment());

    FragAdapter adapter=new FragAdapter(getSupportFragmentManager(),fragments);

    ViewPager viewPager= (ViewPager) findViewById(R.id.viewpager);
    viewPager.setAdapter(adapter);

三、XML布局中添加

1.使用系统自带的标题栏的ViewPager

下面先介绍一下系统自带的两种标题栏：

ViewPager用来实现标题栏的两个子控件

android.support.v4.view.PagerTitleStrip
android.support.v4.view.PagerTabStrip

注：PagerTabStrip是继承PagerTitleStrip实现的

共同点：

都实现了标题栏的效果
通过android:layout_gravity 属性设置为TOP或BOTTOM来将它显示在ViewPager的顶部或底部
标题的获取，是重写适配器的getPageTitle(int)函数来获取的

不同点：

PagerTitleStrip无下划线，PagerTabStrip有下划线
PagerTitleStrip无交互，PagerTabStrip有交互，点击标题可实现页面跳转

添加使用：

<android.support.v4.view.ViewPager
    android:id="@+id/vp_main"
    android:layout_width="match_parent"
    android:layout_height="200dp"
    android:layout_gravity="center">

    <!--PagerTitleStrip和PagerTabStrip只能存在一个，否则会影响效果-->
    <!--<android.support.v4.view.PagerTitleStrip-->
        <!--android:layout_width="match_parent"-->
        <!--android:layout_height="wrap_content"-->
        <!--android:layout_gravity="top"/>-->

    <android.support.v4.view.PagerTabStrip
        android:id="@+id/pager_tab_strip"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="top"/>

</android.support.v4.view.ViewPager>

PagerTabStrip的相关属性设置

PagerTabStrip tabStrip = (PagerTabStrip) findViewById(R.id.pager_tab_strip);
tabStrip.setTabIndicatorColorResource(R.color.colorAccent);//设置PagerTabStrip下标颜色
tabStrip.setBackgroundResource(android.R.color.darker_gray);//设置PagerTabStrip背景色
...

效果：

ViewPager的最上方是PagerTabStrip，下方是自定义的标题栏

PagerTabStrip

建议：则两种标题栏实现的效果不是很好，一般不推荐使用。主流是使用自定义的标题栏，下面会见到。

2.带有自定义的标题栏的ViewPager

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

<--下面是一个自定义的标题栏-->
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#33000000"
    android:layout_alignBottom="@id/view_pager"
    android:orientation="vertical">
    <TextView
        android:id="@+id/tv_main"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:textSize="18sp"
        android:maxLines="1"
        android:layout_marginTop="2dp"
        android:textColor="@color/write"/>
    <LinearLayout
        android:id="@+id/ll_point_group"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_margin="5dp"
        android:layout_marginLeft="2dp"
        android:layout_marginRight="2dp"
        android:layout_gravity="center_horizontal">

    </LinearLayout>
</LinearLayout>

效果：

自定义标题栏

四、在Activity或Fragment中

ViewPager viewPager = (ViewPager) findViewById(R.id.view_pager);

MyPagerAdapter adapter = new MyPagerAdapter(this, imageList);

viewPager.setAdapter(adapter);

//使当前显示的object位于中间，无论前后滑动都会“无尽”
viewPager.setCurrentItem(Integer.MAX_VALUE / 2 - (Integer.MAX_VALUE / 2 % imageList.size()));

//viewPager.setOnPageChangeListener方法已过时
viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
    /**
     * 页面正在滑动时调用
     * @param position
     * @param positionOffset
     * @param positionOffsetPixels
     */
    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

    }

    /**
     * 页面切换后调用
     * @param position 新页面位置
     */
    @Override
    public void onPageSelected(int position) {
        position = position % imageList.size();

        //设置文字描述
        tvImgDesc.setText(imageDescriptions[position]);
        //设置指示点改变当前点enable设为true,上一个设为false
        pointGroup.getChildAt(position).setEnabled(true);
        pointGroup.getChildAt(lastPointPosition).setEnabled(false);
        lastPointPosition = position;

    }

    /**
     * 当页面状态发生变化时调用
     * @param state
     */
    @Override
    public void onPageScrollStateChanged(int state) {

    }
});

五、ViewPager的适配器PagerAdapter

PageAdapter必须重写的四个函数：

//ViewPager要显示的view数目
int getCount() 

//判断view和object的对应关系
boolean isViewFromObject(View arg0, Object arg1)

//将当前视图添加到container中，并获取当前位置的view
Object instantiateItem(ViewGroup container, int position)

//从当前container中销毁对应位置的object
void destroyItem(ViewGroup container, int position,Object object)

自定义的实现无限循环的PagerAdapter

public class MyPagerAdapter extends PagerAdapter {
    private Context mContent;
    private List<ImageView> mViewData;

    public MyPagerAdapter(Context content, List<ImageView> views) {
        mContent = content;
        mViewData=views;
    }

    @Override
    public int getCount() {
        return Integer.MAX_VALUE;
    }

    /**
     * 判断view和object的对应关系
     * @param view
     * @param object
     * @return
     */
    @Override
    public boolean isViewFromObject(View view, Object object) {
        return view==object;
    }

    /**
     * 获取相应位置的view
     * @param container view的容器,viewPager本身
     * @param position 相应位置
     * @return
     */
    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        //循环播放图片
        container.addView(mViewData.get(position%mViewData.size()));
        return mViewData.get(position%mViewData.size());
    }

    /**
     * 销毁对应位置的object
     * @param container view的容器,viewPager本身
     * @param position 在container中的位置
     * @param object 
     */
    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        container.removeView((View) object);
        object=null;
    }

    /**
     * PagerTabStrip,PagerTitleStrip获取内容的方法
     * @param position
     * @return
     */
    @Override
    public CharSequence getPageTitle(int position) {
        return mTitles[position%mView.size()];
    }

}

ViewPager解析