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