/** * 兩種方式構造1個翻轉卡片 * 1：直接提供1個特定命名格式的View * 2：提供兩個線性布局（正面和，反面） * Created by lip on 2015/4/8. */ public class FlipView extends LinearLayout implements View.OnClickListener,RotateAnimation.InterpolatedTimeListener { private LinearLayout m_first_ll, m_second_ll; private boolean enableRefresh; private LinearLayout view; private View clickView;//當前的view private Context context; public FlipView(Context context) { super(context); this.context=context; //initViews(); } public FlipView(Context context,AttributeSet attrs) { super(context,attrs); this.context=context; //initViews(); } /** */ public void initViews() { view=(LinearLayout)inflate(context,R.layout.flip_view,null); m_first_ll=(LinearLayout)view.findViewById(R.id.first_ll); m_second_ll=(LinearLayout)view.findViewById(R.id.second_ll); m_first_ll.setOnClickListener(this); m_second_ll.setOnClickListener(this); addView(view, ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT); } /** * @param ll1 正面 * @param ll2 反面 */ public void addViews(LinearLayout ll1,LinearLayout ll2) { m_first_ll=ll1; m_second_ll=ll2; m_first_ll.setOnClickListener(this); m_second_ll.setOnClickListener(this); addView(m_first_ll, ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT); addView(m_second_ll, ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT); } /** * flag=0 翻到正面 * flag=1 翻到反面 * @param flag */ public void show(int flag) { enableRefresh = true; RotateAnimation rotateAnim = null; float cX = this.getWidth() / 2.0f; float cY = this.getHeight() / 2.0f; if(flag==0) rotateAnim = new RotateAnimation(cX, cY, RotateAnimation.ROTATE_DECREASE); else if(flag==1) rotateAnim = new RotateAnimation(cX, cY, RotateAnimation.ROTATE_INCREASE); if (rotateAnim != null) { rotateAnim.setInterpolatedTimeListener(this); rotateAnim.setFillAfter(true); this.startAnimation(rotateAnim); } } @Override public void onClick(View v) { Log.d("click:",v.toString()); enableRefresh = true; clickView=v; RotateAnimation rotateAnim = null; float cX = this.getWidth() / 2.0f; float cY = this.getHeight() / 2.0f; if (m_first_ll==v) { rotateAnim = new RotateAnimation(cX, cY, RotateAnimation.ROTATE_INCREASE); } else if (m_second_ll == v) { rotateAnim = new RotateAnimation(cX, cY, RotateAnimation.ROTATE_DECREASE); } if (rotateAnim != null) { rotateAnim.setInterpolatedTimeListener(this); rotateAnim.setFillAfter(true); this.startAnimation(rotateAnim); } } @Override public void interpolatedTime(float interpolatedTime) { if (enableRefresh && interpolatedTime > 0.5f) { setHint(); enableRefresh = false; } } public void setHint() { if (clickView == m_first_ll) { m_first_ll.setVisibility(View.GONE); m_second_ll.setVisibility(View.VISIBLE); } else if (clickView==m_second_ll) { m_second_ll.setVisibility(View.GONE); m_first_ll.setVisibility(View.VISIBLE); } } }

public class FlipActivity extends Activity { private FlipView flipView; LinearLayout firstLL,secondLL; LinearLayout root; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); //setContentView(R.layout.activity_flip); initViews(); } private void initViews() { root=(LinearLayout)LayoutInflater.from(this).inflate(R.layout.activity_flip,null); flipView=(FlipView)root.findViewById(R.id.flip_view); /*********第1種方式（要主動調用initViews）*************/ // firstLL=(LinearLayout)LayoutInflater.from(this).inflate(R.layout.flip_view1,null); // secondLL=(LinearLayout)LayoutInflater.from(this).inflate(R.layout.flip_view2,null); /*********第2種方式*************/ firstLL=(LinearLayout)root.findViewById(R.id.root_ll1); secondLL=(LinearLayout)root.findViewById(R.id.root_ll2); root.removeView(firstLL); root.removeView(secondLL); flipView.addViews(firstLL,secondLL); setContentView(root); } }

flipView.addViews(firstLL,secondLL);第1個參數就是正面的view，第2個參數是反面的view，這兩個view都是線性布局。我提供了兩種設置正反面的的方式，如果要是對布局有1點了解，其實這是1樣的

</pre><p>    旋轉工具類（網上參考他人的）：</p><p>          <pre name="code" class="java">public class RotateAnimation extends Animation { /** 值為true時可明確查看動畫的旋轉方向。 */ public static final boolean DEBUG = false; /** 沿Y軸正方向看，數值減1時動畫逆時針旋轉。 */ public static final boolean ROTATE_DECREASE = true; /** 沿Y軸正方向看，數值減1時動畫順時針旋轉。 */ public static final boolean ROTATE_INCREASE = false; /** Z軸上最大深度。 */ public static final float DEPTH_Z = 310.0f; /** 動畫顯示時長。 */ public static final long DURATION = 800l; /** 圖片翻轉類型。 */ private final boolean type; private final float centerX; private final float centerY; private Camera camera; public RotateAnimation(float cX, float cY, boolean type) { centerX = cX; centerY = cY; this.type = type; // 設置動畫時長 setDuration(DURATION); } @Override public void initialize(int width, int height, int parentWidth, int parentHeight) { // 在構造函數以后、applyTransformation()之前調用本方法。 super.initialize(width, height, parentWidth, parentHeight); camera = new Camera(); } @Override protected void applyTransformation(float interpolatedTime, Transformation transformation) { // interpolatedTime:動畫進度值，范圍為0～1，0.5為正好翻轉1半 if (listener != null) { listener.interpolatedTime(interpolatedTime); } float from = 0.0f, to = 0.0f; if (type == ROTATE_DECREASE) { from = 0.0f; to = 180.0f; } else if (type == ROTATE_INCREASE) { from = 360.0f; to = 180.0f; } // 旋轉的角度 float degree = from + (to - from) * interpolatedTime; boolean overHalf = (interpolatedTime > 0.5f); if (overHalf) { // 翻轉過半的情況下，為保證數字仍為可讀的文字而非鏡面效果的文字，需翻轉180度。 degree = degree - 180; } // 旋轉深度 float depth = (0.5f - Math.abs(interpolatedTime - 0.5f)) * DEPTH_Z; final Matrix matrix = transformation.getMatrix(); camera.save(); // 深度――》相當于與屏幕的距離 camera.translate(0.0f, 0.0f, depth); // 以x軸旋轉 // camera.rotateX(degree); // 以y軸旋轉 camera.rotateY(degree); camera.getMatrix(matrix); camera.restore(); if (DEBUG) { if (overHalf) { matrix.preTranslate(-centerX * 2, -centerY); matrix.postTranslate(centerX * 2, centerY); } } else { // 確保圖片的翻轉進程1直處于組件的中心點位置 /* * preTranslate是指在setScale前平移,postTranslate是指在setScale后平移,它們參數是平移的距離, * 而不是平移目的地的坐標! * 由于縮放是以(0,0)為中心的,所以為了把界面的中心與(0,0)對齊,就要preTranslate(-centerX, * -centerY),setScale完成后, 調用postTranslate(centerX, * centerY),再把圖片移回來,這樣看到的動畫效果就是activity的界面圖片從中心不停的縮放了 * 注:centerX和centerY是界面中心的坐標 */ matrix.preTranslate(-centerX, -centerY); matrix.postTranslate(centerX, centerY); } } /** 用于監聽動畫進度。當值過半時需更新的內容。 */ private InterpolatedTimeListener listener; public void setInterpolatedTimeListener(InterpolatedTimeListener listener) { this.listener = listener; } /** 動畫進度監聽器。 */ public static interface InterpolatedTimeListener { public void interpolatedTime(float interpolatedTime); } }

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <cn.xindrace.viewflip.FlipView android:id="@+id/flip_view" android:layout_width="match_parent" android:layout_height="match_parent"/> <LinearLayout android:id="@+id/root_ll1" android:orientation="vertical" android:layout_width="wrap_content" android:layout_height="wrap_content"> <TextView android:layout_width="match_parent" android:layout_height="match_parent" android:text="It is the first side"/> </LinearLayout> <LinearLayout android:id="@+id/root_ll2" android:orientation="vertical" android:layout_width="wrap_content" android:layout_height="wrap_content"> <TextView android:layout_width="match_parent" android:layout_height="match_parent" android:text="It is the first side"/> </LinearLayout> </LinearLayout>