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;
	}

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

	@Override
	protected 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;
		}
		
		@Override
		public void onAnimationEnd(Animation animation) {
			mainFL.post(new Swap(position));
		}

		@Override
		public void onAnimationRepeat(Animation animation) {

		}

		@Override
		public void onAnimationStart(Animation animation) {

		}

	}

	private class Swap implements Runnable {

		private int position;
		
		public Swap(int pos) {
			this.position = pos;
		}
		@Override
		public 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度，这样就成功了。大家可以试试。