实现Gallery效果的ViewPager技术细节

最近家里添娃啦,比较忙,好不容易工作上的需要自己写一个类似Gallery的效果,既然官方已经弃用Gallery了,所以也不想用它,自己对ViewPager比较熟了,项目又需要ViewPager的停靠效果,就直接在ViewPager基础上改写吧。
先上效果图(我是Dota2爱好者,也是一段青春啊)
http://v.youku.com/v_show/id_XMTY5Nzc2NzY0MA==.html

ScreenRecord_2016-08-24-19-43-34.gif

1 页面宽度的改变

图片没有占满全屏,ViewPager在PagerAdapter中提供了设置页面宽度的参数,我们直接拿来用就好了。

viewPager.setAdapter(new PagerAdapter() {
     .....
      @Override public float getPageWidth(int position) {
        return 0.8f;//建议值为0.6~1.0之间
      }
}

2 把页面展示在屏幕正中间

ViewPager默认的页面展示是从屏幕的左侧开始的,想要页面展示在屏幕中间,这样首先想到有两种方法:
1 将页面摆放的位置统一右移一个偏移量。就是改变每个页面ItemInfo中的offset的值。但是细想这样是没有用的,ViewPager在滑动停靠的时候,还是会根据页面的offset,将页面停在屏幕左侧。
2 直接改变页面停靠的位置
计算页面停靠位置时,在结果上减去一个稳定的偏移量getItemOffset()。将中心页面从停靠在屏幕左侧,挪到屏幕中心。

  private void scrollToItem(int item, boolean smoothScroll, int velocity,
      boolean dispatchSelected) {
      ......
      页面将要停靠的位置
      destX = (int) (width * Math.max(mFirstOffset,
          Math.min(curInfo.offset - getItemOffset(), mLastOffset)));
      ......
  }

curInfo.offset是页面左边界的位置,滑动到这个位置,页面的左边界会对齐屏幕的左边,再减去一个偏移量,就能让页面处于屏幕中心。
mFirstOffset是Scroller滚动范围的左边界。首页的curInfo.offset一定是为0的,为了让首页就能够出现在屏幕中间,此时的mScrollX为0 - getItemOffset()(偏移量)。mFirstOffset的值即为-getItemOffset()
mLastOffset是页面滑动的右边界,在计算时也要加上getItemOffset(),来保证将ViewPager滑动到最右侧时,能多滑动一个偏移量,将最后一页显示在中间。
mFirstOffset ``mLastOffset在ViewPager中会在多处进行赋值,每个赋值的地方需要注意添加这个偏移量。

3 偏移量的计算

偏移量为页面左右两侧剩余的距离。这种超常用函数,最好把结果用成员变量保存。

  private float mItemOffset = -1;
  private float getItemOffset() {
    if (mItemOffset > 0) {
      return mItemOffset;
    }
    float widthFactor = mAdapter.getPageWidth(0);
    if (widthFactor > 1) {
      throw new IllegalStateException("gallery viewpager require widthFactor <= 1");
    }
    mItemOffset = (1 - widthFactor) / 2;
    return mItemOffset;
  }

4 判断当前页面infoForCurrentScrollPosition()

由于页面不显示在屏幕左侧了,每一个停靠状态下,中心页面的offset都比mScrollX要大一个偏移量。所以在和页面的offset进行比较来判断当前mScrollX位置的中心页时,需要在原有mScrollX 加上一个偏移量。

加上偏移量进行位置的比较

//每个页面的左边界
final float leftBound = offset;
//每个页面的右边界
final float rightBound = offset + ii.widthFactor + marginOffset;

//添加偏移量
final float scrollOffsetAdjust = scrollOffset + getItemOffset();

if (first || scrollOffsetAdjust >= leftBound) {
   if (scrollOffsetAdjust < rightBound || i == mItems.size() - 1) {
       return ii;
  }
}

5 Gallery动画的添加

为了突出中心页,将两侧的页面进行等比例缩小,并且缩小的比例严格正比于距离中心位置的距离。滑动过程中,页面的大小随着离中心距离变化做动画,这个动画选择在onPageScrolled中处理比较合适。

protected void onPageScrolled(int position, float offset, int offsetPixels) {
   //动画相关核心代码
    int centerDistance = Math.abs(child.getLeft() - currentItemLeft);
    float scaleValue =  1 - centerDistance * distanceNarrowFactor;
    child.setScaleX(scaleValue);
    child.setScaleY(scaleValue);
}

child要计算变化的页面根View
currentItemLeft是当前中心位置的左边界
centerDistance即为当前child距离中心位置的距离
distanceNarrowFactor是事先算好的固定缩放系数
可见最终缩放值scaleValue随着离中心位置距离的增大而线性减小。最终达到中间页面大,两边页面小的效果。

Tips:安卓中,比较适合做动画的函数有:setAlpha, setScale(X or Y), setTranslation(X or Y),setRotation.这些都是属性动画的建议改变值,原因应该是改变这些属性并不会导致View的重绘,能直接在原有绘图cache的基础上进行处理。即使上面这个Gallery没有用Animator去做,而是直接在一个普通的回调函数中setScale,没有动画的内置优化,依旧不感觉到卡顿。

6 可循环滑动的CycleGalleryViewPager

产品经理的需求都是无止尽的呀,要求能够第一页和最后一页循环滑动无缝连接。还好之前有所防备,相关技术细节参考:http://www.jianshu.com/p/9bf38f6e0541

本文GalleryViewPager,CycleGalleryViewPager
Demon代码及使用方法 github地址:
https://github.com/RainbleNi/GalleryViewPager

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,271评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,275评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,151评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,550评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,553评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,559评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,924评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,580评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,826评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,578评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,661评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,363评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,940评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,926评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,156评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,872评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,391评论 2 342

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,388评论 25 707
  • 内容抽屉菜单ListViewWebViewSwitchButton按钮点赞按钮进度条TabLayout图标下拉刷新...
    皇小弟阅读 46,699评论 22 664
  • 前言 最近在做项目的时候,有个需求就是实现自动轮播式的ViewPager,最直观的例子就是知乎日报顶部的ViewP...
    丶蓝天白云梦阅读 8,163评论 13 77
  • 海潮寺的天王殿背后的墙上 刻着单位或个人的功德碑 我仔细看了一下 政府部门的在最前面 其次是企业单位的 后面是个人...
    吻章阅读 469评论 0 0
  • 明亮的月光照亮回家的路。 心里有个声音,仿佛在告诉我,我在走他过去的路。 我为你做的事,都是他曾经为我做过的。 这...
    Ttong向暖而生阅读 134评论 0 0