Android 自定义实现翻转卡片的View

/** * 两种方式构造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>