本文出自:【张鸿洋的博客】的实践。https://github.com/hongyangAndroid/MagicViewPager.
具体讲解可看上面文章,此文只说需要特别注意的地方
因为近期项目需要,先参照博客撸了一下代码,使用了此种方法实现轮滑效果。以下是遇到的问题:
1.博客并没有实现边缘滑动,即只有中间的item可以滑动,不符合项目需求,体验太差。
然后查找资料,发现github代码库已经合并别人的pull request 解决了上面的问题,并找到具体说明资料
https://blog.csdn.net/asia_deng/article/details/70176393,遂参照代码改变。发现大小改变需要重新计算,
一下是具体实现:
1.效果图
2.xml代码(80dp这些数字计算有用)
<FrameLayout
android:layout_width="match_parent"
android:layout_height="160dp"
android:layout_centerInParent="true"
android:background="#aadc71ff">
<android.support.v4.view.ViewPager
android:id="@+id/id_viewpager"
android:layout_width="match_parent"
android:layout_height="120dp"
android:layout_gravity="center"
android:foregroundGravity="center"
android:clipToPadding="false"
android:paddingLeft="80dp"
android:paddingRight="80dp"/>
</FrameLayout>
3.ScaleInTransformer代码
public class ScaleInTransformer extends BasePageTransformer
{
private static final float DEFAULT_MIN_SCALE = 0.65f;
private float mMinScale = DEFAULT_MIN_SCALE;
private int mScreenW;
public ScaleInTransformer()
{
}
public ScaleInTransformer(float minScale)
{
this(minScale, NonPageTransformer.INSTANCE);
}
public ScaleInTransformer(ViewPager.PageTransformer pageTransformer)
{
this(DEFAULT_MIN_SCALE, pageTransformer);
}
public ScaleInTransformer(float minScale, ViewPager.PageTransformer pageTransformer)
{
mMinScale = minScale;
mPageTransformer = pageTransformer;
}
@TargetApi(Build.VERSION_CODES.HONEYCOMB)
public void pageTransform(View view, float position)
{
int pageWidth = view.getWidth();
int pageHeight = view.getHeight();
view.setPivotY(pageHeight / 2);
view.setPivotX(pageWidth / 2);
if (position < -0.6f)
{ // [-Infinity,-0.6)
// This page is way off-screen to the left.
view.setScaleX(mMinScale);
view.setScaleY(mMinScale);
} else if (position <= 0.4f)
{ // (-0.6,0.4]
float scaleFactor = (0.6f + position) * (1 - mMinScale) + mMinScale;
view.setScaleX(scaleFactor);
view.setScaleY(scaleFactor);
} else if (position<=1.4f)
{ // (0.4,1.4]
// float scaleFactor = (1.4f - position) * (1 - mMinScale) + mMinScale;
float scaleFactor =(mMinScale-1)*position-0.4f*mMinScale+1.4f;
view.setScaleX(scaleFactor);
view.setScaleY(scaleFactor);
}else {//(1.4,Infinity]
view.setScaleX(mMinScale);
view.setScaleY(mMinScale);
}
}
}
以下具体注意事项
1.position 为当前页距离屏幕左边的距离/当前页的宽度 如果当前页的左边在屏幕的左边为负,在屏幕的右边为正
2.假设当前有三页
左滑:
第一页:position:-0.6 到负数 大小:不变第二页:position:0.4-----(-0.6)大小:从1到MinScale
第三页:position:1.4-0.4 大小:从MinScale到1
由此可根据y=kx+b 计算出:(1)float scaleFactor =(mMinScale-1)*position-0.4f*mMinScale+1.4f;
(2)float scaleFactor = (1.4f - position) * (1 - mMinScale) + mMinScale;这个公式是鸿洋博客里面的计算公式,实际上展开和公式1是一样的。
计算举例,比如第一页左滑,我手机是360dp,然后
paddingLeft和
android:paddingRight都是80dp,所以一个view的宽度是360-80-80=200dp
然后第一页view左边距离屏幕左边的距离等于200dp-80dp=120dp
所以第一页变化范围为120/200=0.6.因为在屏幕左边为负所以,为-0.6.
此处为demo没有做适配其他屏幕的,正常来说,此处系数应该这样计算,比如说第二页的变化过程在360dp手机上为
0.4到(-0.6),2个确定的适合y=kx+b方程的点的坐标是x=0.4,y=1 和x=-0.6,y=MinScale
要适配其他手机时:假设view 宽度为width,pading还是80dp,手机密度系数为density
系数z1=80*density/width
系数z2=-(width-80*density)/width
同理2个用来确定函数的点的坐标为x=z1,y=1和x=z2,y=MinScale