登录 注册

Android-ViewPager

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

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 收购注资，并拉拢多家制造商组成开放手机联盟开发改良，逐渐扩展到到平板电脑及其他领域上。

    336 引用 • 324 回帖
  • ViewPager
    3 引用
800 3 122 166 38 94 38 331

相关帖子

回帖
Android-ViewPager

欢迎来到这里！

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

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

近期热议

推荐标签 标签

  • 微服务

    微服务架构是一种架构模式，它提倡将单一应用划分成一组小的服务。服务之间互相协调，互相配合，为用户提供最终价值。每个服务运行在独立的进程中。服务于服务之间才用轻量级的通信机制互相沟通。每个服务都围绕着具体业务构建，能够被独立的部署。

    96 引用 • 155 回帖
  • 反馈

    Communication channel for makers and users.

    120 引用 • 906 回帖 • 279 关注
  • LaTeX

    LaTeX（音译“拉泰赫”）是一种基于 ΤΕΧ 的排版系统，由美国计算机学家莱斯利·兰伯特（Leslie Lamport）在 20 世纪 80 年代初期开发，利用这种格式，即使使用者没有排版和程序设计的知识也可以充分发挥由 TeX 所提供的强大功能，能在几天，甚至几小时内生成很多具有书籍质量的印刷品。对于生成复杂表格和数学公式，这一点表现得尤为突出。因此它非常适用于生成高印刷质量的科技和数学类文档。

    12 引用 • 59 回帖 • 4 关注
  • 微软

    微软是一家美国跨国科技公司，也是世界 PC 软件开发的先导，由比尔·盖茨与保罗·艾伦创办于 1975 年，公司总部设立在华盛顿州的雷德蒙德（Redmond，邻近西雅图）。以研发、制造、授权和提供广泛的电脑软件服务业务为主。

    8 引用 • 44 回帖 • 1 关注
  • 深度学习

    深度学习（Deep Learning）是机器学习的分支，是一种试图使用包含复杂结构或由多重非线性变换构成的多个处理层对数据进行高层抽象的算法。

    43 引用 • 44 回帖
  • Ubuntu

    Ubuntu（友帮拓、优般图、乌班图）是一个以桌面应用为主的 Linux 操作系统，其名称来自非洲南部祖鲁语或豪萨语的“ubuntu”一词，意思是“人性”、“我的存在是因为大家的存在”，是非洲传统的一种价值观，类似华人社会的“仁爱”思想。Ubuntu 的目标在于为一般用户提供一个最新的、同时又相当稳定的主要由自由软件构建而成的操作系统。

    127 引用 • 169 回帖
  • 印象笔记
    3 引用 • 16 回帖
  • 单点登录

    单点登录（Single Sign On）是目前比较流行的企业业务整合的解决方案之一。SSO 的定义是在多个应用系统中，用户只需要登录一次就可以访问所有相互信任的应用系统。

    9 引用 • 25 回帖 • 3 关注
  • NetBeans

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

    78 引用 • 102 回帖 • 707 关注
  • 大疆创新

    深圳市大疆创新科技有限公司(DJI-Innovations，简称 DJI)，成立于 2006 年，是全球领先的无人飞行器控制系统及无人机解决方案的研发和生产商，客户遍布全球 100 多个国家。通过持续的创新，大疆致力于为无人机工业、行业用户以及专业航拍应用提供性能最强、体验最佳的革命性智能飞控产品和解决方案。

    2 引用 • 14 回帖 • 1 关注
  • SpaceVim

    SpaceVim 是一个社区驱动的模块化 vim/neovim 配置集合，以模块的方式组织管理插件以
    及相关配置，为不同的语言开发量身定制了相关的开发模块，该模块提供代码自动补全，
    语法检查、格式化、调试、REPL 等特性。用户仅需载入相关语言的模块即可得到一个开箱
    即用的 Vim-IDE。

    3 引用 • 31 回帖 • 109 关注
  • 智能合约

    智能合约（Smart contract）是一种旨在以信息化方式传播、验证或执行合同的计算机协议。智能合约允许在没有第三方的情况下进行可信交易，这些交易可追踪且不可逆转。智能合约概念于 1994 年由 Nick Szabo 首次提出。

    1 引用 • 11 回帖 • 2 关注
  • 旅游

    希望你我能在旅途中找到人生的下一站。

    98 引用 • 903 回帖
  • CloudFoundry

    Cloud Foundry 是 VMware 推出的业界第一个开源 PaaS 云平台，它支持多种框架、语言、运行时环境、云平台及应用服务，使开发人员能够在几秒钟内进行应用程序的部署和扩展，无需担心任何基础架构的问题。

    5 引用 • 18 回帖 • 190 关注
  • WordPress

    WordPress 是一个使用 PHP 语言开发的博客平台，用户可以在支持 PHP 和 MySQL 数据库的服务器上架设自己的博客。也可以把 WordPress 当作一个内容管理系统（CMS）来使用。WordPress 是一个免费的开源项目，在 GNU 通用公共许可证（GPLv2）下授权发布。

    45 引用 • 114 回帖 • 171 关注
  • 运维

    互联网运维工作，以服务为中心，以稳定、安全、高效为三个基本点，确保公司的互联网业务能够 7×24 小时为用户提供高质量的服务。

    151 引用 • 257 回帖
  • Elasticsearch

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

    117 引用 • 99 回帖 • 196 关注
  • Swift

    Swift 是苹果于 2014 年 WWDC（苹果开发者大会）发布的开发语言，可与 Objective-C 共同运行于 Mac OS 和 iOS 平台，用于搭建基于苹果平台的应用程序。

    34 引用 • 37 回帖 • 553 关注
  • SQLite

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

    4 引用 • 7 回帖 • 5 关注
  • 笔记

    好记性不如烂笔头。

    310 引用 • 794 回帖 • 1 关注
  • AWS
    11 引用 • 28 回帖 • 9 关注
  • 脑图

    脑图又叫思维导图，是表达发散性思维的有效图形思维工具 ，它简单却又很有效，是一种实用性的思维工具。

    32 引用 • 99 回帖 • 1 关注
  • QQ

    1999 年 2 月腾讯正式推出“腾讯 QQ”，在线用户由 1999 年的 2 人（马化腾和张志东）到现在已经发展到上亿用户了，在线人数超过一亿，是目前使用最广泛的聊天软件之一。

    45 引用 • 557 回帖 • 1 关注
  • Gzip

    gzip （GNU zip）是 GNU 自由软件的文件压缩程序。我们在 Linux 中经常会用到后缀为 .gz 的文件，它们就是 Gzip 格式的。现今已经成为互联网上使用非常普遍的一种数据压缩格式，或者说一种文件格式。

    9 引用 • 12 回帖 • 175 关注
  • uTools

    uTools 是一个极简、插件化、跨平台的现代桌面软件。通过自由选配丰富的插件，打造你得心应手的工具集合。

    7 引用 • 28 回帖 • 1 关注
  • PostgreSQL

    PostgreSQL 是一款功能强大的企业级数据库系统，在 BSD 开源许可证下发布。

    22 引用 • 22 回帖
  • 尊园地产

    昆明尊园房地产经纪有限公司，即：Kunming Zunyuan Property Agency Company Limited（简称“尊园地产”）于 2007 年 6 月开始筹备，2007 年 8 月 18 日正式成立，注册资本 200 万元，公司性质为股份经纪有限公司，主营业务为：代租、代售、代办产权过户、办理银行按揭、担保、抵押、评估等。

    1 引用 • 22 回帖 • 796 关注

最新标签