频道栏目
IT货架 > > 正文
Android 自定义实现翻转卡片的View
网友分享于:Jan 1, 1970 8:00:00 AM    来源: IT货架   

标签:

     一般一个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>

    




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

标签:

相关板块推荐 iPhone WindowsPhone

广告服务联系QQ:1134687142 | 网站地图

版权所有: IT货架- 内容来自互联网,仅供用于技术学习,请遵循相关法律法规. 京ICP备11030978号-1