Android Question Card flip (flip between 2 images)

Shay

Well-Known Member
Licensed User
Longtime User
Hi
I am looking to flip card (many cards), meaning flip between 2 images with the card flip effect.
I found this, but this is very limited library
is there other solution? library?
 

Peter Simpson

Expert
Licensed User
Longtime User
No I am using different images, this is why I am asking you to replace to some pictures and see.
second question how can I call image click from outside the clicked function?
I am building memory game and I need to flip back 2 cards together

Download the file in post #9 again

So, you select the first card and nothing happens, then you select the second card and both cards spin at the same time?

A few years ago I created a memory game. 1st tap flipped the 1st card, 2nd tap flipped the 2nd card, if the 2 cards matched then they were removed.
 
Upvote 0

Shay

Well-Known Member
Licensed User
Longtime User
I did download it 1 hour ago (I am using your new code) - did you upload again new one now? (if not replace the back and see, put some pic)
if cards are not correct, how do I move both cards to "back" again? (how to I call image click for the 2 opened cards)?
 
Upvote 0

Peter Simpson

Expert
Licensed User
Longtime User
When I say download something again, it's because I just updated something a few minutes ago, an hour is way too late. Yes I did upload it again, I previously uploaded the wrong version.

@Shay I replaced ALL the cards in the folder with the flags of the world, and I changed the file name from 'back.pne' to a flag name and as you can see from the screen shot below it worked first time out.

Screenshot_20200130-203734.jpg


Anyway, you don't need to call the click image from outside of that actual event. You should handle all the click events from within the click once sub...
 
Upvote 0

Shay

Well-Known Member
Licensed User
Longtime User
I fixed the flip issue with this:
B4X:
If Angle < 90 Then
            B4XImgViewCard(CardRotation).Rotate(0, Angle, 0) 
        Else
            B4XImgViewCard(CardRotation).Rotate(180, Angle, 0) 'Rotate the card to the newly set angle
        End If
 
Upvote 0

cimperia

Active Member
Licensed User
Longtime User
Due to forced inactivity, I thought of converting @Peter Simpson's excellent sample application into a class-based app. (I read Luca’s effort too late, otherwise I would have integrated some of his excellent ideas.)

It’s basically the same code as Peter’s, but reorganised to take advantage of classes, nothing earth-chattering but new B4X members may find this useful for comparison.

I tried to encapsulate the app functionality in 3 files.

1. A Card class (B4XCardView) that deals with aspects related to a playing card.

2. A Deck class (B4XDeck) that deals with aspects related to a deck. It contains, of course, a collection of cards, an array in fact.

3. The main module which has been tremendously simplified.

What are the Differences?

First, I have removed the dependency on Star-Dust’s library. Here are a few lines of code (thanks to codota.com) that I have translated into B4A to do the flipping action. Here it is, for people who are only interested in this aspect. You could modify the method so that it accepts a view parameter, but for efficiency, as this Method is part of a class, it acts on a global class variable.

B4X:
'mBaxView: ImageView defined as global
'https://developer.android.com/reference/android/view/View
'imageView.animate().rotationBy(180f).setDuration(500).start() To rotate on same plan
Private Sub FlipImageBA (RotationX As Float, RotationY As Float, Rotation As Float)

    jo = mBaxView                                 'ImageView defined as global
    Dim PivotX As Float = mBaxView.Width/2.0f    'width centre
    Dim PivotY As Float    = mBaxView.Height/2.0f    'height centre

    'Call Android methods
    'Use SetScaleX/Y to shrink or enlarge the View
'    jo.RunMethod("setScaleX", Array As Object (1.0f))
'    jo.RunMethod("setScaleY", Array As Object (1.0f))

    'Sets the degrees that the view is rotated around the horizontal axis through the pivot point.
    jo.RunMethod("setPivotX", Array As Object( PivotX ))
    'Sets the degrees that the view is rotated around the vertical axis through the pivot point.
    jo.RunMethod("setPivotY", Array As Object( PivotY ))

    'Sets the degrees that the view is rotated around the horizontal axis through the pivot point.
    jo.RunMethod("setRotationX", Array As Object( RotationX ))
    'Sets the degrees that the view is rotated around the vertical axis through the pivot point.
    jo.RunMethod("setRotationY", Array As Object( RotationY ))

    'Sets the degrees that the view is rotated around the pivot point.
    jo.RunMethod("setRotation", Array As Object( Rotation ))

    'Sets the distance along the Z axis (orthogonal To the X/Y plane on which views are drawn)
    'from the camera To this view: 1280.0f * Density
    '1280 is a constant which is used with device scale.
    jo.RunMethod("setCameraDistance",  Array As Object(1280.0f * Density))

End Sub

Or you can use this bit of Java Code instead, though I’m not sure there’s any advantage here:
B4X:
#IF JAVA

import android.widget.ImageView;
import android.util.DisplayMetrics;

public void flipImage (ImageView imageView, float RotationX, float RotationY, float Rotation, float CameraDistance)
{
    //BA.LogInfo("flipImage: In");

    /*---------------------------------------------------------------------------------------
    //Better to use parameter CameraDistance as B4A already provides the information required.
    //However, here's a way to do it:
    DisplayMetrics metrics = getResources().getDisplayMetrics();
    float CameraDistance = 1280.0f * (metrics.density * 160f);
    ----------------------------------------------------------------------------------------
    */
    float PivotX = imageView.getWidth()/2.0f;                    //width centre
    float PivotY = imageView.getHeight()/2.0f;                    //height centre

    imageView.setPivotX(PivotX);
    imageView.setPivotX(PivotX);
    imageView.setPivotY(PivotY);
    imageView.setRotationX(RotationX);
    imageView.setRotationY(RotationY);
    imageView.setRotation(Rotation);
    imageView.setCameraDistance(CameraDistance);

    //BA.LogInfo("flipImage: Out");
}
#End If

Second, as each card implements its own rotation and keep track of its angles, cards can spin together without any side effect. I have altered the rotate function so that it accepts a parameter (number of rotations required). It’s therefore possible to have the 12 cards rotating at the same time, but it’s rather slow in Debug mode, but fast in release mode.

B4X:
'CLICK ON CARD ROTATE THE CARD
Sub DeckCard_Click
    Dim TappedCard As B4XCardView = Sender 'Create a sender to capture B4XImageView click
    TappedCard.Rotate(5)
End Sub

Third, by having the classes do the heavy lifting, the main module code is very simple and easy to maintain. For instance, when you create a new deck, you simply invoke the Shuffle method (B4XDeck.Shuffle) to shuffle it.

Fourth, I did not make B4XCardView a CustomView , but it would be easy to do so.

Here are a couple of links:

Project: Download Project

Animation:
 
Last edited:
Upvote 0
Top