ViewPager解析

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，下方是自定义的标题栏

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

---

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中，并获取当前位置的viewObject instantiateItem(ViewGroup container, int position)//从当前container中销毁对应位置的objectvoid 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()];    }}