登录 注册

Android-ViewPager

本贴最后更新于 3164 天前，其中的信息可能已经时移世异

1. ViewPager 使用示例

2. 源码解析



示例

ViewPager 可以说是 IM 中必用的一个控件了，举例比如 WeChat，Weibo，其用法也非常之简单。

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

xml文件中定义完之后，再看java文件中代码


public class MainActivity extends AppCompatActivity {

private ViewPager viewpager=null;


@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    viewpager=(ViewPager)findViewById(R.id.viewpager);
    MyAdapter adapter=new MyAdapter();
    LayoutInflater lf=getLayoutInflater();
    adapter.addviews(lf.inflate(R.layout.page1,null));
    adapter.addviews(lf.inflate(R.layout.page2,null));
    adapter.addviews(lf.inflate(R.layout.page3,null));
    viewpager.setAdapter(adapter);
}



}



可以看到 ViewPager 的用法和 ListView 的用法是类似的，都需要一个 Adapter 来加载数据，下面看这个自定义的 MyAdapter。


public class MyAdapter extends PagerAdapter {

private ArrayList&lt;View&gt; views;

public void addviews(View v){
    views.add(v);
}
@Override
public int getCount() {
    return views.size();
}


@Override
public boolean isViewFromObject(View view, Object object) {
    return view==object;
}


@Override
public void destroyItem(ViewGroup container, int position, Object object)   {
    container.removeView(views.get(position));
}


@Override
public Object instantiateItem(ViewGroup container,int position){
    container.addView(views.get(position));
    return views.get(position);
}



}


这个MyAdapter继承PagerAdapter，可以看到，需要Override四个方法，方法作用可以从函数名得知。
很简单吧？跟ListView的用法真是太相似了，ViewPager的内部还有一个接口
public interface OnPageChangeListener {
   public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels);
   public void onPageSelected(int position);
   public void onPageScrollStateChanged(int state);
}

接口的作用也很明显，最常用的就是用来加载各个tab的内容。


网上的用法有很多，这里就不细讲了，重点是下一部分。


源码
开始看到ViewPager的滑动效果时，马上联想到了ListView的下拉刷新，想到ViewPager也是采用这种原理来实现的，后来一看源码，果然，其原理就是相当于将多个View平行的摆放在一起，滑动即时调整横向的offset，来实现滑屏效果。
初始化的代码跳过，直接看onTouchEvent函数的代码，
首先介绍一下ViewPager中比较重要的一些变量和类。
private final ArrayList<ItemInfo> mItems = new ArrayList<ItemInfo>();
static class ItemInfo {
        Object object;   //View或者Image 
        int position;    //在mItems中的position，一般等同于offset
        boolean scrolling;
        float widthFactor;
        float offset;
    }

mItems是一个ItemInfo的ArrayList，很重要，是前一个Page，当前Page，后一个Page的集合。
ACTION_DOWN
case MotionEvent.ACTION_DOWN: {
                mScroller.abortAnimation();
                mPopulatePending = false;
                populate();

            // Remember where the motion event started
            mLastMotionX = mInitialMotionX = ev.getX();
            mLastMotionY = mInitialMotionY = ev.getY();
            mActivePointerId = MotionEventCompat.getPointerId(ev, 0);
            break;
        }</pre>




重点是记录X，Y，PointerId，和populate()函数，前面的变量都好理解，这个populate函数还是比较复杂的，我们看看。

       

 final int pageLimit = mOffscreenPageLimit;//偏离屏幕page限制，一般左右各一个
        final int startPos = Math.max(0, mCurItem - pageLimit);左边的page
        final int N = mAdapter.getCount();
        final int endPos = Math.min(N-1, mCurItem + pageLimit);右边的page
        ............
        int curIndex = -1;
        ItemInfo curItem = null;
        for (curIndex = 0; curIndex < mItems.size(); curIndex++) {
            final ItemInfo ii = mItems.get(curIndex);
            if (ii.position >= mCurItem) {
                if (ii.position == mCurItem) curItem = ii;
                break;
            }
        }      //找到curItem
        .............
        if (curItem != null) {
            float extraWidthLeft = 0.f;
            int itemIndex = curIndex - 1;
            ItemInfo ii = itemIndex >= 0 ? mItems.get(itemIndex) : null;
            final int clientWidth = getClientWidth();
            final float leftWidthNeeded = clientWidth <= 0 ? 0 :
                    2.f - curItem.widthFactor + (float) getPaddingLeft() / (float) clientWidth;
            for (int pos = mCurItem - 1; pos >= 0; pos--) {
                if (extraWidthLeft >= leftWidthNeeded && pos < startPos) {
                    if (ii == null) {
                        break;
                    }
                    if (pos == ii.position && !ii.scrolling) {
                        mItems.remove(itemIndex);
                        mAdapter.destroyItem(this, pos, ii.object);
                        if (DEBUG) {
                            Log.i(TAG, "populate() - destroyItem() with pos: " + pos +
                                    " view: " + ((View) ii.object));
                        }
                        itemIndex--;
                        curIndex--;
                        ii = itemIndex >= 0 ? mItems.get(itemIndex) : null;
                    }
                } else if (ii != null && pos == ii.position) {
                    extraWidthLeft += ii.widthFactor;
                    itemIndex--;
                    ii = itemIndex >= 0 ? mItems.get(itemIndex) : null;
                } else {
                    ii = addNewItem(pos, itemIndex + 1);
                    extraWidthLeft += ii.widthFactor;
                    curIndex++;
                    ii = itemIndex >= 0 ? mItems.get(itemIndex) : null;
                }
            }

        float extraWidthRight = curItem.widthFactor;
        itemIndex = curIndex + 1;
        if (extraWidthRight &lt; 2.f) {
            ii = itemIndex &lt; mItems.size() ? mItems.get(itemIndex) : null;
            final float rightWidthNeeded = clientWidth &lt;= 0 ? 0 :
                    (float) getPaddingRight() / (float) clientWidth + 2.f;
            for (int pos = mCurItem + 1; pos &lt; N; pos++) {
                if (extraWidthRight &gt;= rightWidthNeeded &amp;&amp; pos &gt; endPos) {
                    if (ii == null) {
                        break;
                    }
                    if (pos == ii.position &amp;&amp; !ii.scrolling) {
                        mItems.remove(itemIndex);
                        mAdapter.destroyItem(this, pos, ii.object);
                        if (DEBUG) {
                            Log.i(TAG, "populate() - destroyItem() with pos: " + pos +
                                    " view: " + ((View) ii.object));
                        }
                        ii = itemIndex &lt; mItems.size() ? mItems.get(itemIndex) : null;
                    }
                } else if (ii != null &amp;&amp; pos == ii.position) {
                    extraWidthRight += ii.widthFactor;
                    itemIndex++;
                    ii = itemIndex &lt; mItems.size() ? mItems.get(itemIndex) : null;
                } else {
                    ii = addNewItem(pos, itemIndex);
                    itemIndex++;
                    extraWidthRight += ii.widthFactor;
                    ii = itemIndex &lt; mItems.size() ? mItems.get(itemIndex) : null;
                }
            }
        }</pre>






这是核心代码，代码有点长，主要作用就是产生一个mItems，使得mItems中含有左右以及当前的Page，产生的依据是extraWidth和WidthNeeded的关系，这里注意，mItems有多个地方会产生调用，比如onMeasure中，所以一次touch滑屏，会分别调用多次populate()，一般调用两次吧。

extraWidth和WidthNeeded分Left和Right，现只拿Right来做讲解。

首先float extraWidthRight=curItem.widthFactor;

widthFactor宽度因子，一般为1，代表一个page的宽度。

final float rightWidthNeeded=(float)getPaddingRight()/(float)clientWidth+2.f;

rightWidthNeeded=2,很明显，不用计算。

进入for循环，先假设总共有3个Page，现在从2滑到1

先看第2次调用吧，即屏幕已经从2变成了1，但是mItems里的值还没有发生改变，但是curItem是1了。

pos=mCurItem+1=1，此时pos=1,endPos=1，ii代表的是itemIndex所对应的mItem，现在是page2，进入else if语句，extraWidthRight+=ii.widthFactor，此时extraWidthRight=2，即curItem和右边Page的宽度总和。



	itemIndex++;得到page3所对应的mItem，pos=2>endPos，直接进入if语句，我们可以看到




	




 mItems.remove(itemIndex);
 mAdapter.destroyItem(this, pos, ii.object);





	



成功删除了page3这个对象，mItems的大小变为了2。

以上就是ViewPager的核心--mItems，基本由populate掌控。

后面的就比较简单了，上面的代码看了比较久，主要是在观察各种width和mItems之间的关系，还有千万不要忽略了滑屏过后onMeasure方法会重新调用populate()。



	ACTION_MOVE 




	

 


           

 if (mIsBeingDragged) {
                final int activePointerIndex = MotionEventCompat.findPointerIndex(
                        ev, mActivePointerId);
                final float x = MotionEventCompat.getX(ev, activePointerIndex);
                needsInvalidate |= performDrag(x);
            }





	核心函数是performDrag(x)，作用顾名思义，就是产生drag的效果。




	



   

 private boolean performDrag(float x) {
        boolean needsInvalidate = false;

    final float deltaX = mLastMotionX - x;
    mLastMotionX = x;


    float oldScrollX = getScrollX();
    float scrollX = oldScrollX + deltaX;
    final int width = getClientWidth();


    float leftBound = width * mFirstOffset;
    float rightBound = width * mLastOffset;
    boolean leftAbsolute = true;
    boolean rightAbsolute = true;


    final ItemInfo firstItem = mItems.get(0);
    final ItemInfo lastItem = mItems.get(mItems.size() - 1);
    if (firstItem.position != 0) {
        leftAbsolute = false;
        leftBound = firstItem.offset * width;
    }
    if (lastItem.position != mAdapter.getCount() - 1) {
        rightAbsolute = false;
        rightBound = lastItem.offset * width;
    }


    if (scrollX &lt; leftBound) {
        if (leftAbsolute) {
            float over = leftBound - scrollX;
            needsInvalidate = mLeftEdge.onPull(Math.abs(over) / width);
        }
        scrollX = leftBound;
    } else if (scrollX &gt; rightBound) {
        if (rightAbsolute) {
            float over = scrollX - rightBound;
            needsInvalidate = mRightEdge.onPull(Math.abs(over) / width);
        }
        scrollX = rightBound;
    }
    // Don't lose the rounded component
    mLastMotionX += scrollX - (int) scrollX;
    scrollTo((int) scrollX, getScrollY());
    pageScrolled((int) scrollX);


    return needsInvalidate;
}






别看代码很乱，主要就是leftBound，RightBound，leftAbsolute，rightAbsolute的关系，这里还要注意First和Last，千万不要以为是第一个Page和最后一个Page，这个是相对于mItems来说的，所以前面的mItems概念理解错了，这里也会理解错。

leftAbsolute=true表示，左边没有Page了，RightAbsolute也一样。

从上到下的这些if分别是判断，firstItem和lastItem是否在边缘，socrllX的判断，则是在leftAbsolute或者RightAbsolute为true时起作用，即是超过边缘，无效的滑动。最后scrollTo实现drag效果。

ACTION_UP

其实弹起后的代码就很好想了，无非是根据fling这类的手势或者offset来判断是否要跳到下一个page，代码也很简单了，大家自己看看吧。





其实我们也可以看到，android系统自带的ViewPager中mItems的使用是非常节约内存的。为了锻炼自己对View和ViewGroup的理解，决定下星期自己写一个ScrollLayou试试。
  • Android

    Android 是一种以 Linux 为基础的开放源码操作系统，主要使用于便携设备。2005 年由 Google 收购注资，并拉拢多家制造商组成开放手机联盟开发改良，逐渐扩展到到平板电脑及其他领域上。

    333 引用 • 323 回帖 • 65 关注
  • ViewPager
    3 引用
780 3 122 163 35 94 38 317

相关帖子

回帖
Android-ViewPager

欢迎来到这里！

我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。

注册 关于
请输入回帖内容 ...
wind
From Bupt
回帖
1
 帖子
22
 积分
2008

近期热议

推荐标签 标签

  • OpenStack

    OpenStack 是一个云操作系统，通过数据中心可控制大型的计算、存储、网络等资源池。所有的管理通过前端界面管理员就可以完成，同样也可以通过 Web 接口让最终用户部署资源。

    10 引用 • 8 关注
  • 生活

    生活是指人类生存过程中的各项活动的总和，范畴较广，一般指为幸福的意义而存在。生活实际上是对人生的一种诠释。生活包括人类在社会中与自己息息相关的日常活动和心理影射。

    228 引用 • 1450 回帖 • 2 关注
  • Hprose

    Hprose 是一款先进的轻量级、跨语言、跨平台、无侵入式、高性能动态远程对象调用引擎库。它不仅简单易用，而且功能强大。你无需专门学习，只需看上几眼，就能用它轻松构建分布式应用系统。

    9 引用 • 17 回帖 • 595 关注
  • SQLite

    SQLite 是一个进程内的库，实现了自给自足的、无服务器的、零配置的、事务性的 SQL 数据库引擎。SQLite 是全世界使用最为广泛的数据库引擎。

    4 引用 • 7 回帖
  • 机器学习

    机器学习（Machine Learning）是一门多领域交叉学科，涉及概率论、统计学、逼近论、凸分析、算法复杂度理论等多门学科。专门研究计算机怎样模拟或实现人类的学习行为，以获取新的知识或技能，重新组织已有的知识结构使之不断改善自身的性能。

    76 引用 • 37 回帖
  • 996

    “工作 996， 生病 ICU”

    13 引用 • 200 回帖 • 2 关注
  • 负能量

    上帝为你关上了一扇门，然后就去睡觉了....努力不一定能成功，但不努力一定很轻松 (° ー °〃)

    85 引用 • 1201 回帖 • 449 关注
  • NetBeans

    NetBeans 是一个始于 1997 年的 Xelfi 计划，本身是捷克布拉格查理大学的数学及物理学院的学生计划。此计划延伸而成立了一家公司进而发展这个商用版本的 NetBeans IDE，直到 1999 年 Sun 买下此公司。Sun 于次年（2000 年）六月将 NetBeans IDE 开源，直到现在 NetBeans 的社群依然持续增长。

    78 引用 • 102 回帖 • 641 关注
  • FFmpeg

    FFmpeg 是一套可以用来记录、转换数字音频、视频，并能将其转化为流的开源计算机程序。

    22 引用 • 31 回帖 • 3 关注
  • Elasticsearch

    Elasticsearch 是一个基于 Lucene 的搜索服务器。它提供了一个分布式多用户能力的全文搜索引擎，基于 RESTful 接口。Elasticsearch 是用 Java 开发的，并作为 Apache 许可条款下的开放源码发布，是当前流行的企业级搜索引擎。设计用于云计算中，能够达到实时搜索，稳定，可靠，快速，安装使用方便。

    116 引用 • 99 回帖 • 266 关注
  • 创业

    你比 99% 的人都优秀么？

    82 引用 • 1398 回帖 • 1 关注
  • 导航

    各种网址链接、内容导航。

    37 引用 • 168 回帖 • 1 关注
  • 创造

    你创造的作品可能会帮助到很多人，如果是开源项目的话就更赞了！

    172 引用 • 990 回帖
  • Sym

    Sym 是一款用 Java 实现的现代化社区（论坛/BBS/社交网络/博客）系统平台。

    下一代的社区系统，为未来而构建

    523 引用 • 4581 回帖 • 694 关注
  • Log4j

    Log4j 是 Apache 开源的一款使用广泛的 Java 日志组件。

    20 引用 • 18 回帖 • 43 关注
  • Bootstrap

    Bootstrap 是 Twitter 推出的一个用于前端开发的开源工具包。它由 Twitter 的设计师 Mark Otto 和 Jacob Thornton 合作开发，是一个 CSS / HTML 框架。

    18 引用 • 33 回帖 • 685 关注
  • 域名

    域名（Domain Name），简称域名、网域，是由一串用点分隔的名字组成的 Internet 上某一台计算机或计算机组的名称，用于在数据传输时标识计算机的电子方位（有时也指地理位置）。

    43 引用 • 208 回帖 • 1 关注
  • BAE

    百度应用引擎（Baidu App Engine）提供了 PHP、Java、Python 的执行环境，以及云存储、消息服务、云数据库等全面的云服务。它可以让开发者实现自动地部署和管理应用，并且提供动态扩容和负载均衡的运行环境，让开发者不用考虑高成本的运维工作，只需专注于业务逻辑，大大降低了开发者学习和迁移的成本。

    19 引用 • 75 回帖 • 619 关注
  • WebComponents

    Web Components 是 W3C 定义的标准，它给了前端开发者扩展浏览器标签的能力，可以方便地定制可复用组件，更好的进行模块化开发，解放了前端开发者的生产力。

    1 引用 • 24 关注
  • Java

    Java 是一种可以撰写跨平台应用软件的面向对象的程序设计语言，是由 Sun Microsystems 公司于 1995 年 5 月推出的。Java 技术具有卓越的通用性、高效性、平台移植性和安全性。

    3169 引用 • 8207 回帖 • 1 关注
  • 爬虫

    网络爬虫（Spider、Crawler），是一种按照一定的规则，自动地抓取万维网信息的程序。

    106 引用 • 275 回帖
  • MongoDB

    MongoDB（来自于英文单词“Humongous”，中文含义为“庞大”）是一个基于分布式文件存储的数据库，由 C++ 语言编写。旨在为应用提供可扩展的高性能数据存储解决方案。MongoDB 是一个介于关系数据库和非关系数据库之间的产品，是非关系数据库当中功能最丰富，最像关系数据库的。它支持的数据结构非常松散，是类似 JSON 的 BSON 格式，因此可以存储比较复杂的数据类型。

    90 引用 • 59 回帖 • 1 关注
  • JavaScript

    JavaScript 一种动态类型、弱类型、基于原型的直译式脚本语言，内置支持类型。它的解释器被称为 JavaScript 引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在 HTML 网页上使用，用来给 HTML 网页增加动态功能。

    710 引用 • 1173 回帖 • 163 关注
  • RESTful

    一种软件架构设计风格而不是标准，提供了一组设计原则和约束条件，主要用于客户端和服务器交互类的软件。基于这个风格设计的软件可以更简洁，更有层次，更易于实现缓存等机制。

    30 引用 • 114 回帖
  • Sublime

    Sublime Text 是一款可以用来写代码、写文章的文本编辑器。支持代码高亮、自动完成，还支持通过插件进行扩展。

    10 引用 • 5 回帖 • 1 关注
  • Flume

    Flume 是一套分布式的、可靠的，可用于有效地收集、聚合和搬运大量日志数据的服务架构。

    9 引用 • 6 回帖 • 596 关注
  • GitHub

    GitHub 于 2008 年上线，目前，除了 Git 代码仓库托管及基本的 Web 管理界面以外，还提供了订阅、讨论组、文本渲染、在线文件编辑器、协作图谱（报表）、代码片段分享（Gist）等功能。正因为这些功能所提供的便利，又经过长期的积累，GitHub 的用户活跃度很高，在开源世界里享有深远的声望，并形成了社交化编程文化（Social Coding）。

    207 引用 • 2031 回帖

最新标签