标签：
一般一个View只有一面，但是可以自定义一个View，实现像翻书那样的翻转效果。
旋转View：
/**
* 两种方式构造一个翻转卡片
* 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);
/*********第一种方式（要主动调用initViews）*************/
// firstLL=(LinearLayout)LayoutInflater.from(this).inflate(R.layout.flip_view1,null);
// secondLL=(LinearLayout)LayoutInflater.from(this).inflate(R.layout.flip_view2,null);
/*********第二种方式*************/
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);
}
} 既然一个View 有两面，那当然需要主动去设置正面和反面的内容了。
flipView.addViews(firstLL,secondLL);第一个参数就是正面的view，第二个参数是反面的view，这两个view都是线性布局。我提供了两种设置正反面的的方式，如果要是对于布局有一点了解，其实这是一样的
</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为正好翻转一半
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 {
// 确保图片的翻转过程一直处于组件的中心点位置
/*
* 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);
}
} xml布局：
<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>
标签：
原文地址：http://blog.csdn.net/yilip/article/details/44942327
