巧用ViewPager 打造不一样的广告轮播切换效果之实践

1.此篇为对 http://blog.csdn.net/lmj623565791/article/details/51339751 ；

本文出自:【张鸿洋的博客】的实践。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

巧用ViewPager 打造不一样的广告轮播切换效果 之实践

猜你喜欢

巧用ViewPager 打造不一样的广告轮播切换效果之实践