Today I saw a post on the flip of Android poker cards, so I wanted to learn it. Since I have been exposed to few Animation animations, I feel very novel.
First of all, let’s talk about the layout, it is FrameLayout. This layout sets a click method, you need to set the id, and you will use it later. This layout also includes two sub-layouts, namely the front and reverse layouts of Poke. On code:
One more note:This is the problem I just discovered. In the main activity, the front and back xml file will be displayed by default. Therefore, if I need to see the front as soon as I open the app, then the front xml file needs to be placed under the reverse xml file, which is
<?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:andro xmlns:tools="/tools" 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" android:onClick="flipCard" android: tools:context=""> <include layout="@layout/cell_card_back" /> <include layout="@layout/cell_card_front" /> </FrameLayout>
According to the logic of the code, the next two layouts are:
These two FrameLayouts also need to be written to write ids and will be used later.
cell_card_back.xml:
<?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:andro android:layout_width="match_parent" android:layout_height="match_parent" android: > <ImageView android:src="@drawable/rectangle_back" android:contentDescription="@null" android:padding="16dp" android:layout_width="match_parent" android:layout_height="match_parent" /> <TextView android:textColor="@color/colorAccent" android:text="Reverse" android:textSize="40dp" android:layout_gravity="center" android:gravity="center" android:layout_width="match_parent" android:layout_height="match_parent" /> </FrameLayout>
cell_card_front.xml:
<?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:andro android:layout_width="match_parent" android:layout_height="match_parent" android:> <ImageView android:src="@drawable/rectangle_front" android:padding="16dp" android:contentDescription="@null" android:layout_width="match_parent" android:layout_height="match_parent" /> <TextView android:textSize="40dp" android:textColor="@color/colorPrimary" android:text="front" android:gravity="center" android:layout_gravity="center" android:layout_width="match_parent" android:layout_height="match_parent" /> </FrameLayout>
Continue to follow the logical lines of the two layouts above, you need to use two Drawable files as background images, so look at the drawable file:
rectangle_back.xml:
It's probably a card interface with black edges and red backgrounds with rounded corners
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:andro android:shape="rectangle"> <corners android:radius="16dp"/> <solid android:color="@color/cardBack"/> <stroke android:width="2dp" android:color="@android:color/black"/> </shape>
rectangle_front.xml:
It is probably a card interface with black edges and gray backgrounds with rounded corners
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:andro android:shape="rectangle"> <corners android:radius="16dp"/> <solid android:color="@color/cardFront"/> <stroke android:width="2dp" android:color="@android:color/black"/> </shape>
After walking through the logic line of the interface UI, I looked at the Java code and found that two Animators were needed. So I created an animator resource folder under the res file and created two animation files below:
:
This is an animation that enters from the left, which is hidden at the beginning, rotates in reverse, and when it is halfway through the rotation, the card is displayed
<?xml version="1.0" encoding="utf-8"?> <set xmlns:andro> <!--disappear--> <objectAnimator android:duration="0" android:propertyName="alpha" android:valueFrom="1.0" android:valueTo="0.0"/> <!--Rotate--> <objectAnimator android:duration="3000" android:propertyName="rotationY" android:valueFrom="-180" android:valueTo="0"/> <!--Appear--> <objectAnimator android:duration="0" android:propertyName="alpha" android:startOffset="1500" android:valueFrom="0.0" android:valueTo="1.0"/> </set>
anim_out.xml:
This is an animation that goes out on the right, rotates 180 degrees, and when it is halfway through, the card disappears.
<?xml version="1.0" encoding="utf-8"?> <set xmlns:andro> <objectAnimator android:duration="3000" android:propertyName="rotationY" android:valueFrom="0" android:valueTo="180"/> <!--disappear--> <objectAnimator android:duration="0" android:propertyName="alpha" android:startOffset="1500" android:valueFrom="1.0" android:valueTo="0.0"/> </set>
Let's look at the Java code:
MainActivity:
public class MainActivity extends AppCompatActivity {
@Bind(.main_fl_card_back)
FrameLayout mFlCardBack;
@Bind(.main_fl_card_front)
FrameLayout mFlCardFront;
@Bind(.main_fl_container)
FrameLayout mFlContainer;
private AnimatorSet mLeftInSet;
private AnimatorSet mRightOutSet;
private boolean mIsShowBack;
@Override
protected void onCreate(Bundle savedInstanceState) {
(savedInstanceState);
setContentView(.activity_main);
(this);
setAnimation();//Set animation setCameraDistance();//Set the lens distance, I don't know much about it here }
private void setAnimation() {
//mLeftInSet is the animation entered on the left mLeftInSet = (AnimatorSet) (this, .anim_in);
//mRightOutSet is the animation that goes out on the right mRightOutSet = (AnimatorSet) (this, .anim_out);
//Click event // There is no need to rewrite all methods through ListenerAdapter, just write the methods you need to write (new AnimatorListenerAdapter() {
//At the beginning of the animation @Override
public void onAnimationStart(Animator animation) {
(animation);
(false);
}
});
//At the end of the animation (new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
(animation);
(true);//The framelayouy in the main layout allows you to click }
});
}
//I haven't really understood the setting of the lens distance.//The comment on the post says: Change the viewing angle distance and get close to the screen private void setCameraDistance() {
int distance = 16000;
float scale = getResources().getDisplayMetrics().density*distance;
(scale);//Set the distance (scale);//Set the distance }
//This is the click method of the main Framelayout public void flipCard(View view){
//mIsShowBack can be understood as mutually exclusive, so it is boolean if(!mIsShowBack){
//The right animation is set on the front card interface (mFlCardFront);
//The left animation is set on the reverse card interface (mFlCardBack);
//Start the animation ();
();
mIsShowBack = true;
}else {
//The right animation is set on the back of the card interface (mFlCardBack);
//The left animation is set on the front interface of the card (mFlCardFront);
();
();
mIsShowBack = false;
}
}
//I never thought about this, but can also unbind ButterKnife in the onDestroy method protected void onDestroy(){
();
(this);
}
}At this point, it is basically all completed.
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.