如何使图片可点击,然后翻转到不同的图片? Android Studio

时间:2015-08-24 05:13:02

标签: android image

就像这个网址(http://i.stack.imgur.com/L18ox.jpg)(我不拥有)的图片一样。所以基本上是一个触摸命令,可以将图片翻转到不同的图片,如果匹配则保持翻转但是如果它不匹配则翻转。

有人可以帮帮我吗。我是新手,如果我踩到任何人的脚趾,我很抱歉。

3 个答案:

答案 0 :(得分:0)

我认为你需要使用框架布局并在onClick()中,使第一个图像消失,然后出现第二个图像。这样做。

答案 1 :(得分:0)

1.Layout file

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/layout_root"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin">

    <RelativeLayout
        android:id="@+id/layout_front"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:visibility="visible">
        <!--add your front layout components-->
    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/layout_back"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:visibility="gone">
        <!--add your back layout components-->
    </RelativeLayout>
</RelativeLayout>

2.Animation class

    public class FlipAnimation extends Animation {
    private Camera camera;
    private View fromView;
    private View toView;
    private float centerX;
    private float centerY;
    private boolean forward = true;

    /**
     * Creates a 3D flip animation between two views.
     *
     * @param fromView First view in the transition.
     * @param toView   Second view in the transition.
     */
    public FlipAnimation(View fromView, View toView) {
        this.fromView = fromView;
        this.toView = toView;

        setDuration(700);
        setFillAfter(false);
        setInterpolator(new AccelerateDecelerateInterpolator());
    }

    /**
     * To reverse direction of flip animation
     */
    public void reverse() {
        forward = false;
        View switchView = toView;
        toView = fromView;
        fromView = switchView;
    }

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

    @Override
    protected void applyTransformation(float interpolatedTime, Transformation transformation) {
        final double radians = Math.PI * interpolatedTime;
        float degrees = (float) (180.0 * radians / Math.PI);
        if (interpolatedTime >= 0.5f) {
            degrees -= 180.f;
            fromView.setVisibility(View.GONE);
            toView.setVisibility(View.VISIBLE);
        }

        if (forward)
            degrees = -degrees; //determines direction of rotation when flip begins

        final Matrix matrix = transformation.getMatrix();
        camera.save();
        camera.rotateY(degrees);
        camera.getMatrix(matrix);
        camera.restore();
        matrix.preTranslate(-centerX, -centerY);
        matrix.postTranslate(centerX, centerY);
    }
}

3。翻转用户操作视图的方法。

public static void flipCard(View view) {
        View rootLayout = view.findViewById(R.id.layout_root);
        View cardFace = view.findViewById(R.id.layout_front);
        View cardBack = view.findViewById(R.id.layout_back);
        FlipAnimation flipAnimation = new FlipAnimation(cardFace, cardBack);
        if (cardFace.getVisibility() == View.GONE) {
            flipAnimation.reverse();
        }
        rootLayout.startAnimation(flipAnimation);
    }

4。 OnClick示例。

Utility.flipCard(rootView//your root view here);

答案 2 :(得分:0)

也许我的新图书馆FlipView可以提供帮助。它包括基本的翻转动画并扩展ViewFlipper。我的意思是一个完全可自定义的库,您可以使用任何类型的动画和形状交换任何类型的视图和布局(包括Gmail图像翻转)。

请看一下。