关于ViewFlipper的使用

上篇 谢了 Fragment的切换效果为 翻牌效果， 这次描述一下使用ViewFlipper来实现翻牌的切换效果

在Xml文件中声明一个ViewFlipper。

<ViewFlipper
    android:id="@+id/viewFlipper"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1">
 <include
     android:id="@+id/viewflipper1"
     layout="@layout/viewflipper_item1"/>
 <include
     android:id="@+id/viewflipper2"
     layout="@layout/viewflipper_item2"/>
ViewFlipper>

将想要切换的布局放入到ViewFlipper中。通过 方式

用到的补间动画的方式来进行切换。翻牌效果需要重写 x，y，z三个轴的旋转。所以需要自定义一个animation动画类来重写这些方法。

public class Rotate3dAnimation extends Animation {
    private final float mFromDegrees;   / /从什么角度开始
    private final float mToDegrees; / / 翻转到哪个角度
    private final float mCenterX; / / 以centerX为X轴旋转
    private final float mCenterY; / / 以centerY为Y轴旋转
    private final float mDepthZ;           / / 以DepthZ为 Z轴旋转
    private final boolean mReverse;    
    private Camera mCamera;


    /**
     * 在构造方法中对数据进行初始化。
     */
    public Rotate3dAnimation(float fromDegrees, float toDegrees,
                             float centerX, float centerY, float depthZ, boolean reverse) {
        mFromDegrees = fromDegrees;
        mToDegrees = toDegrees;
        mCenterX = centerX;
        mCenterY = centerY;
        mDepthZ = depthZ;
        mReverse = reverse;
    }


    @Override
    public void initialize(int width, int height, int parentWidth, int parentHeight) {
        super.initialize(width, height, parentWidth, parentHeight);
        mCamera = new Camera();
    }


    @Override
    protected void applyTransformation(float interpolatedTime, Transformation t) {
        final float fromDegrees = mFromDegrees;
        float degrees = fromDegrees + ((mToDegrees - fromDegrees) * interpolatedTime);


        final float centerX = mCenterX;
        final float centerY = mCenterY;
        final Camera camera = mCamera;


        final Matrix matrix = t.getMatrix();


        camera.save();
        if (mReverse) {
            camera.translate(0.0f, 0.0f, mDepthZ * interpolatedTime);
        } else {
            camera.translate(0.0f, 0.0f, mDepthZ * (1.0f - interpolatedTime));
        }
        camera.rotateY(degrees);
        camera.getMatrix(matrix);
        camera.restore();


        matrix.preTranslate(-centerX, -centerY);
        matrix.postTranslate(centerX, centerY);
    }
}

通过点击事件来 进行布局切换

private boolean checked=true;

public void change(View view) {
        float halfWidth = viewFlipper.getWidth() / 2.0f;
        float halfHeight = viewFlipper.getHeight() / 2.0f;
        int duration = 500;
        int depthz = 0;//viewFlipper.getWidth()/2;
        if (checked) {
           
checked=false;
//进入时的动作，与上一个x方向相反
            Rotate3dAnimation in = new Rotate3dAnimation(-90, 0, halfWidth, halfHeight, depthz, false);
            in.setDuration(duration);
            in.setStartOffset(duration);

/ / 给ViewFlipper设置进入动画效果
            viewFlipper.setInAnimation(in);

//退出时的动画。
            Rotate3dAnimation out = new Rotate3dAnimation(0, 90, halfWidth, halfHeight, depthz, false);
            out.setDuration(duration);

 / / 给ViewFlipper设置退出动画效果
            viewFlipper.setOutAnimation(out);
            viewFlipper.showNext();
        } else {
            checked=true;

//进入时的动作，与上一个x方向相反
            Rotate3dAnimation in = new Rotate3dAnimation(90, 0, halfWidth, halfHeight, depthz, false);
            in.setDuration(duration);
            in.setStartOffset(duration);

         / / 给ViewFlipper设置进入动画效果
            viewFlipper.setInAnimation(in); 

  //退出时的动画。
            Rotate3dAnimation out = new Rotate3dAnimation(0, -90, halfWidth, halfHeight, depthz, false);
            out.setDuration(duration);

 / / 给ViewFlipper设置退出动画效果
            viewFlipper.setOutAnimation(out);
            viewFlipper.showPrevious();
        }
    }

完工。