在Android Studio中制作Flashcards

Question

我是android编程的新手.我想制作一款带有抽认卡的应用.这些抽认卡会有单词,当我触摸它们时,它会转向显示单词的含义.

我搜索谷歌.但我找不到任何制作抽认卡的正确教程.

谢谢!

Answer 1

欢迎使用Android Richa.

我找到了一些有用的链接:

基本上你将使用动画和ImageViews.列表中最适合您要做的事情的链接是"Flip animation explain".

卡教程

卷曲/翻转动画

翻转动画解释

酷翻转卡库

您将设置卡的布局,然后设置活动.一旦到位,您将在XML中制作动画.

我在这里找到了代码:

主要活动

public class MainActivity extends AppCompatActivity {

private AnimatorSet mSetRightOut;
private AnimatorSet mSetLeftIn;
private boolean mIsBackVisible = false;
private View mCardFrontLayout;
private View mCardBackLayout;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    findViews();
    loadAnimations();
    changeCameraDistance();

}

private void changeCameraDistance() {
    int distance = 8000;
    float scale = getResources().getDisplayMetrics().density * distance;
    mCardFrontLayout.setCameraDistance(scale);
    mCardBackLayout.setCameraDistance(scale);
}

private void loadAnimations() {
    mSetRightOut = (AnimatorSet) AnimatorInflater.loadAnimator(this, R.animator.out_animation);
    mSetLeftIn = (AnimatorSet) AnimatorInflater.loadAnimator(this, R.animator.in_animation);
}

private void findViews() {
    mCardBackLayout = findViewById(R.id.card_back);
    mCardFrontLayout = findViewById(R.id.card_front);
}

public void flipCard(View view) {
    if (!mIsBackVisible) {
        mSetRightOut.setTarget(mCardFrontLayout);
        mSetLeftIn.setTarget(mCardBackLayout);
        mSetRightOut.start();
        mSetLeftIn.start();
        mIsBackVisible = true;
    } else {
        mSetRightOut.setTarget(mCardBackLayout);
        mSetLeftIn.setTarget(mCardFrontLayout);
        mSetRightOut.start();
        mSetLeftIn.start();
        mIsBackVisible = false;
    }
  } 
}

你在这里弄乱相机距离,以确保在屏幕上看到翻转动画.因为它可能穿过"虚拟线"而根本看不到.

卡前XML

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:tint="@color/cardFront"
        android:padding="16dp"
        android:src="@drawable/rectangle"/>

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="@string/front"
        android:textColor="@color/white"
        style="@style/Base.TextAppearance.AppCompat.Display1"
        android:gravity="center"/>

</FrameLayout>

卡背XML

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">



    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:tint="@color/cardBack"
        android:padding="16dp"
        android:src="@drawable/rectangle"/>

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="@string/back"
        android:textColor="@color/white"
        style="@style/Base.TextAppearance.AppCompat.Display1"
        android:gravity="center"/>


</FrameLayout>

活动XML

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="blog.droidsonroids.pl.blogpost.MainActivity"
    android:onClick="flipCard">


    <FrameLayout
        android:id="@+id/card_back"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <include layout="@layout/card_back" />


    </FrameLayout>

    <FrameLayout
        android:id="@+id/card_front"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center">
        <include layout="@layout/card_front" />

    </FrameLayout>


</FrameLayout>

在动画XML中

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">

    <objectAnimator
        android:valueFrom="1.0"
        android:valueTo="0.0"
        android:propertyName="alpha"
        android:duration="0" />


    <objectAnimator
        android:valueFrom="-180"
        android:valueTo="0"
        android:propertyName="rotationY"
        android:repeatMode="reverse"
        android:duration="@integer/anim_length" />

    <objectAnimator
        android:valueFrom="0.0"
        android:valueTo="1.0"
        android:propertyName="alpha"
        android:startOffset="@integer/anim_length_half"
        android:duration="0" />
</set>

出动画

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <objectAnimator
        android:valueFrom="0"
        android:valueTo="180"
        android:propertyName="rotationY"
        android:duration="@integer/anim_length" />

    <objectAnimator
        android:valueFrom="1.0"
        android:valueTo="0.0"
        android:propertyName="alpha"
        android:startOffset="@integer/anim_length_half"
        android:duration="0" />
</set>