实现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

你可能感兴趣的:(实现Gallery效果的ViewPager技术细节)