1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
|
/*
* Copyright (C) 2013 The Android Open Source Project
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
package com.example.android.cardflip;
import android.animation.Animator;
import android.animation.AnimatorListenerAdapter;
import android.animation.AnimatorSet;
import android.app.Activity;
import android.os.Build;
import android.os.Bundle;
import android.view.GestureDetector;
import android.view.MotionEvent;
import android.view.ViewTreeObserver;
import android.widget.RelativeLayout;
import java.util.ArrayList;
import java.util.List;
/**
* This application creates 2 stacks of playing cards. Using fling events,
* these cards can be flipped from one stack to another where each flip comes with
* an associated animation. The cards can be flipped horizontally from left to right
* or right to left depending on which stack the animating card currently belongs to.
*
* This application demonstrates an animation where a stack of cards can either be
* be rotated out or back in about their bottom left corner in a counter-clockwise direction.
* Rotate out: Down fling on stack of cards
* Rotate in: Up fling on stack of cards
* Full rotation: Tap on stack of cards
*
* Note that in this demo touch events are disabled in the middle of any animation so
* only one card can be flipped at a time. When the cards are in a rotated-out
* state, no new cards can be rotated to or from that stack. These changes were made to
* simplify the code for this demo.
*/
public class CardFlip extends Activity implements CardFlipListener {
final static int CARD_PILE_OFFSET = 3;
final static int STARTING_NUMBER_CARDS = 15;
final static int RIGHT_STACK = 0;
final static int LEFT_STACK = 1;
int mCardWidth = 0;
int mCardHeight = 0;
int mVerticalPadding;
int mHorizontalPadding;
boolean mTouchEventsEnabled = true;
boolean[] mIsStackEnabled;
RelativeLayout mLayout;
List<ArrayList<CardView>> mStackCards;
GestureDetector gDetector;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
mStackCards = new ArrayList<ArrayList<CardView>>();
mStackCards.add(new ArrayList<CardView>());
mStackCards.add(new ArrayList<CardView>());
mIsStackEnabled = new boolean[2];
mIsStackEnabled[0] = true;
mIsStackEnabled[1] = true;
mVerticalPadding = getResources().getInteger(R.integer.vertical_card_magin);
mHorizontalPadding = getResources().getInteger(R.integer.horizontal_card_magin);
gDetector = new GestureDetector(this, mGestureListener);
mLayout = (RelativeLayout)findViewById(R.id.main_relative_layout);
ViewTreeObserver observer = mLayout.getViewTreeObserver();
observer.addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
@Override
public void onGlobalLayout() {
if (android.os.Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {
mLayout.getViewTreeObserver().removeOnGlobalLayoutListener(this);
} else {
mLayout.getViewTreeObserver().removeGlobalOnLayoutListener(this);
}
mCardHeight = mLayout.getHeight();
mCardWidth = mLayout.getWidth() / 2;
for (int x = 0; x < STARTING_NUMBER_CARDS; x++) {
addNewCard(RIGHT_STACK);
}
}
});
}
/**
* Adds a new card to the specified stack. Also performs all the necessary layout setup
* to place the card in the correct position.
*/
public void addNewCard(int stack) {
CardView view = new CardView(this);
view.updateTranslation(mStackCards.get(stack).size());
view.setCardFlipListener(this);
view.setPadding(mHorizontalPadding, mVerticalPadding, mHorizontalPadding, mVerticalPadding);
RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(mCardWidth,
mCardHeight);
params.topMargin = 0;
params.leftMargin = (stack == RIGHT_STACK ? mCardWidth : 0);
mStackCards.get(stack).add(view);
mLayout.addView(view, params);
}
/**
* Gesture Detector listens for fling events in order to potentially initiate
* a card flip event when a fling event occurs. Also listens for tap events in
* order to potentially initiate a full rotation animation.
*/
private GestureDetector.SimpleOnGestureListener mGestureListener = new GestureDetector
.SimpleOnGestureListener() {
@Override
public boolean onSingleTapUp(MotionEvent motionEvent) {
int stack = getStack(motionEvent);
rotateCardsFullRotation(stack, CardView.Corner.BOTTOM_LEFT);
return true;
}
@Override
public boolean onFling(MotionEvent motionEvent, MotionEvent motionEvent2, float v,
float v2) {
int stack = getStack(motionEvent);
ArrayList<CardView> cardStack = mStackCards.get(stack);
int size = cardStack.size();
if (size > 0) {
rotateCardView(cardStack.get(size - 1), stack, v, v2);
}
return true;
}
};
/** Returns the appropriate stack corresponding to the MotionEvent. */
public int getStack(MotionEvent ev) {
boolean isLeft = ev.getX() <= mCardWidth;
return isLeft ? LEFT_STACK : RIGHT_STACK;
}
/**
* Uses the stack parameter, along with the velocity values of the fling event
* to determine in what direction the card must be flipped. By the same logic, the
* new stack that the card belongs to after the animation is also determined
* and updated.
*/
public void rotateCardView(final CardView cardView, int stack, float velocityX,
float velocityY) {
boolean xGreaterThanY = Math.abs(velocityX) > Math.abs(velocityY);
boolean bothStacksEnabled = mIsStackEnabled[RIGHT_STACK] && mIsStackEnabled[LEFT_STACK];
ArrayList<CardView>leftStack = mStackCards.get(LEFT_STACK);
ArrayList<CardView>rightStack = mStackCards.get(RIGHT_STACK);
switch (stack) {
case RIGHT_STACK:
if (velocityX < 0 && xGreaterThanY) {
if (!bothStacksEnabled) {
break;
}
mLayout.bringChildToFront(cardView);
mLayout.requestLayout();
rightStack.remove(rightStack.size() - 1);
leftStack.add(cardView);
cardView.flipRightToLeft(leftStack.size() - 1, (int)velocityX);
break;
} else if (!xGreaterThanY) {
boolean rotateCardsOut = velocityY > 0;
rotateCards(RIGHT_STACK, CardView.Corner.BOTTOM_LEFT, rotateCardsOut);
}
break;
case LEFT_STACK:
if (velocityX > 0 && xGreaterThanY) {
if (!bothStacksEnabled) {
break;
}
mLayout.bringChildToFront(cardView);
mLayout.requestLayout();
leftStack.remove(leftStack.size() - 1);
rightStack.add(cardView);
cardView.flipLeftToRight(rightStack.size() - 1, (int)velocityX);
break;
} else if (!xGreaterThanY) {
boolean rotateCardsOut = velocityY > 0;
rotateCards(LEFT_STACK, CardView.Corner.BOTTOM_LEFT, rotateCardsOut);
}
break;
default:
break;
}
}
@Override
public void onCardFlipEnd() {
mTouchEventsEnabled = true;
}
@Override
public void onCardFlipStart() {
mTouchEventsEnabled = false;
}
@Override
public boolean onTouchEvent(MotionEvent me) {
if (mTouchEventsEnabled) {
return gDetector.onTouchEvent(me);
} else {
return super.onTouchEvent(me);
}
}
/**
* Retrieves an animator object for each card in the specified stack that either
* rotates it in or out depending on its current state. All of these animations
* are then played together.
*/
public void rotateCards (final int stack, CardView.Corner corner,
final boolean isRotatingOut) {
List<Animator> animations = new ArrayList<Animator>();
ArrayList <CardView> cards = mStackCards.get(stack);
for (int i = 0; i < cards.size(); i++) {
CardView cardView = cards.get(i);
animations.add(cardView.getRotationAnimator(i, corner, isRotatingOut, false));
mLayout.bringChildToFront(cardView);
}
/** All the cards are being brought to the front in order to guarantee that
* the cards being rotated in the current stack will overlay the cards in the
* other stack. After the z-ordering of all the cards is updated, a layout must
* be requested in order to apply the changes made.*/
mLayout.requestLayout();
AnimatorSet set = new AnimatorSet();
set.playTogether(animations);
set.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
mIsStackEnabled[stack] = !isRotatingOut;
}
});
set.start();
}
/**
* Retrieves an animator object for each card in the specified stack to complete a
* full revolution around one of its corners, and plays all of them together.
*/
public void rotateCardsFullRotation (int stack, CardView.Corner corner) {
List<Animator> animations = new ArrayList<Animator>();
ArrayList <CardView> cards = mStackCards.get(stack);
for (int i = 0; i < cards.size(); i++) {
CardView cardView = cards.get(i);
animations.add(cardView.getFullRotationAnimator(i, corner, false));
mLayout.bringChildToFront(cardView);
}
/** Same reasoning for bringing cards to front as in rotateCards().*/
mLayout.requestLayout();
mTouchEventsEnabled = false;
AnimatorSet set = new AnimatorSet();
set.playTogether(animations);
set.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
mTouchEventsEnabled = true;
}
});
set.start();
}
}
|