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