Android中对布局的翻转，如何保持布局不颠倒
最近在研究iphone上的翻转效果，就是类似于passbook里面的查看票据的时候，正面是一种布局，点击某个按钮会翻转到背面，然后呈现的又是另一个布局。就在想怎么用到android里面呢？正好，最近项目有这个需求。于是便上网搜寻有关android的翻转动画的资料。在网上找到原来apidemos里面就提供了翻转动画，不过是针对图片的翻转，但是我想只要有动画就是一样的调用，管它图片还是布局呢，最后还不是xxx.startAnimation。翻转动画如下，如果没有apidemos的童鞋可以直接拿去用。
package com.huiian.kelu.util;import android.graphics.Camera;import android.graphics.Matrix;import android.view.animation.Animation;import android.view.animation.Transformation;public class Rotate3dAnimation extends Animation {private final float fromDegrees;private final float toDegrees;private final float centerX;private final float centerY;private final float depthZ;private final boolean reverse;private Camera camera;public Rotate3dAnimation(float fromDegrees, float toDegrees, float centerX,float centerY, float depthZ, boolean reverse) {this.fromDegrees = fromDegrees;this.toDegrees = toDegrees;this.centerX = centerX;this.centerY = centerY;this.depthZ = depthZ;this.reverse = reverse;}@Overridepublic void initialize(int width, int height, int parentWidth,int parentHeight) {super.initialize(width, height, parentWidth, parentHeight);camera = new Camera();}@Overrideprotected void applyTransformation(float interpolatedTime, Transformation t) {final float fromDegrees = this.fromDegrees;float degrees = fromDegrees+ ((toDegrees - fromDegrees) * interpolatedTime);final float centerX = this.centerX;final float centerY = this.centerY;final Camera camera = this.camera;final Matrix matrix = t.getMatrix();camera.save();if (reverse) {camera.translate(0.0f, 0.0f, depthZ * interpolatedTime);} else {camera.translate(0.0f, 0.0f, depthZ * (1.0f - interpolatedTime));}camera.rotateY(degrees);camera.getMatrix(matrix);camera.restore();matrix.preTranslate(-centerX, -centerY);matrix.postTranslate(centerX, centerY);}}?
?????? 有了这个动画类之后，就可以像调用android基本动画的方式来调用了，因为大家可以看到这个翻转动画是继承于Animation的。那具体该如何实现布局的翻转呢？首先你的布局代码是：
<FrameLayout android:id="@id/main_fl" android:layout_width="214dp" android:layout_height="246dp" android:layout_centerInParent="true" android:orientation="vertical" android:visibility="invisible" > <include layout="@layout/zheng" /> <include layout="@layout/fan" /> </FrameLayout>
?
??????? 一个正，一个反，剩下的你自己布局就行。
??????? 剩下的在Activity里面的用法apidemos也给出了，大家只需要把一些布局替换成自己的就行了。好了，这个时候坑爹的来了，因为你会发现翻转过去的布局是倒着的，我被这个鬼东西折腾了好久，因为我发现apidemos里面的例子也是这样的，它的图片也是倒的。这让人情何以堪。于是试了许久终于解决了。首先我们定义一个记录正反的bool值
private boolean nowZhengFan = true;// 默认当前是正面
?
然后我们是点击布局来切换正反面的，所以将布局设置OnClickListener监听。然后在onClick方法里面写：
case R.id.main_fl:if(nowZhengFan) {applyRotation(0, 0, 90);} else {applyRotation(-1, 360, 270);}break;?
private void applyRotation(int position, float start, float end) {float centerX = mainFL.getWidth() / 2.0f;float centerY = mainFL.getWidth() / 2.0f;final Rotate3dAnimation animation = new Rotate3dAnimation(start, end,centerX, centerY, 310.0f, true);animation.setDuration(500);animation.setFillAfter(false);animation.setInterpolator(new AccelerateInterpolator());animation.setAnimationListener(new DisplayNextView(position, true));mainFL.startAnimation(animation);}private class DisplayNextView implements AnimationListener {private int position;private boolean b;public DisplayNextView(int pos,boolean b) {this.b = b;this.position = pos;}@Overridepublic void onAnimationEnd(Animation animation) {mainFL.post(new Swap(position));}@Overridepublic void onAnimationRepeat(Animation animation) {}@Overridepublic void onAnimationStart(Animation animation) {}}private class Swap implements Runnable {private int position;public Swap(int pos) {this.position = pos;}@Overridepublic void run() {float centerX = missionFL.getWidth() / 2.0f;float centerY = missionFL.getWidth() / 2.0f;Rotate3dAnimation rotation = null;if(position > -1) {rotation = new Rotate3dAnimation(270, 360, centerX, centerY, 310.0f, false);zheng.setVisibility(View.GONE);fan.setVisibility(View.VISIBLE);nowZhengFan = false;} else {rotation = new Rotate3dAnimation(90, 0, centerX, centerY, 310.0f, false);zheng.setVisibility(View.VISIBLE);fan.setVisibility(View.GONE);nowZhengFan = true;}rotation.setDuration(500);rotation.setFillAfter(false);rotation.setInterpolator(new DecelerateInterpolator());mainFL.startAnimation(rotation);}}?
这里的关键是点击之后的第一次翻转是0--90度，然后调用swap进行第二次翻转，apidemos里面的是90-180度，但是这样就会导致布局是反的，于是要改成270-360度，这样就ok了。如果是翻回去，那么就是在点击之后是360-270度，这样就成功了。大家可以试试。
?