如何在 Android 中添加 Easy FlipView？

EasyFlipView 是一个 Android 库，它允许我们在我们的 android 应用程序中轻松创建翻转视图。我们可以在许多应用程序中使用此功能，例如我们存储用户信用卡或借记卡详细信息的应用程序（用户可以轻松翻转卡片以查看卡片的 CVV）。下面给出了一个示例 GIF，以了解我们将在本文中做什么。请注意，我们将使用Java语言来实现这个项目。

属性表

Attribute Name	Default Value	Description
app:flipOnTouch=”true”	true	Whether the card should be flipped on touch or not.
app:flipDuration=”400″	400	The duration of flip animation in milliseconds.
app:flipEnabled=”true”	true	If this is set to false, then it won’t flip ever in Single View and it has to be always false for RecyclerView
app:flipType=”horizontal”	vertical	Whether card should flip in vertical or horizontal
app:flipFrom=”right”  app:flipFrom=”back”	left  front	Whether card should flip from left to right Or right to left(Horizontal type) or car should flip to front or back(Vertical type)
app:autoFlipBack=”true”	false	If this is set to true, then the card will be flipped back to the original front side after the time set in autoFlipBackTime.
app:autoFlipBackTime=”1000″	1000	The time in milliseconds (ms), after the card will be flipped back to the original front side.

分步实施

第 1 步：创建一个新项目

要在 Android Studio 中创建新项目，请参阅如何在 Android Studio 中创建/启动新项目。请注意，选择Java作为编程语言。

第 2 步：在进入编码部分之前先做一些预任务

转到app -> res -> values -> colors.xml文件并设置应用程序的颜色。

XML

  
    #0F9D58
    #0F9D58
    #05af9b
    #ffffff
   

转到 Gradle Scripts -> build.gradle (Module: app)部分并导入以下依赖项，然后单击上面弹出窗口中的“the”。

implementation ‘com.wajahatkarim3.EasyFlipView:EasyFlipView:3.0.0’

第 3 步：设计 UI

在activity_main.xml中去掉默认的Text View，将布局改为Relative layout并添加EasyFlipView ，在里面，我们包含2个布局card_layout_back.xml和card_layout_front.xml （我们在下一步创建2个布局），按照同样的步骤，再添加一个水平类型的card_layout_front。下面是activity_main.xml文件的代码。

现在转到res -> layout并右键单击它 然后新建 -> 布局资源文件（命名文件card_layout_back ）。现在打开card_layout_back.xml文件，添加一个简单的ImageView ， 并将 src 设置为您想要的图像。下面是card_layout_back.xml文件的代码

重复上述步骤并创建card_layout_front.xml文件。下面是card_layout_front.xml文件的代码

第 4 步：编码部分

我们可以将OnFlipAnimationListener添加到水平和垂直翻转视图中，当用户翻转卡片时，我们只显示一条吐司消息。下面是MainActivity的完整代码。 Java文件。代码中添加了注释以更详细地理解代码。

Java

import android.os.Bundle;
import android.widget.Toast;
  
import androidx.appcompat.app.AppCompatActivity;
  
import com.wajahatkarim3.easyflipview.EasyFlipView;
  
public class MainActivity extends AppCompatActivity {
  
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
  
        // creating objects of  EasyFlipView
        EasyFlipView easyFlipViewVertical = (EasyFlipView) findViewById(R.id.easyFlipViewVertical);
        EasyFlipView easyFlipViewHorizontal = (EasyFlipView) findViewById(R.id.easyFlipViewHorizontal);
  
  
        // creating OnFlipAnimationListener for easyFlipViewVertical
        easyFlipViewVertical.setOnFlipListener(new EasyFlipView.OnFlipAnimationListener() {
            @Override
            public void onViewFlipCompleted(EasyFlipView flipView, EasyFlipView.FlipState newCurrentSide) {
                // showing simple toast message to the user
                Toast.makeText(MainActivity.this, "Vertical Flip Completed :)", Toast.LENGTH_SHORT).show();
            }
        });
  
        // creating OnFlipAnimationListener for easyFlipViewHorizontal
        easyFlipViewHorizontal.setOnFlipListener(new EasyFlipView.OnFlipAnimationListener() {
            @Override
            public void onViewFlipCompleted(EasyFlipView flipView, EasyFlipView.FlipState newCurrentSide) {
                // showing simple toast message to the user
                Toast.makeText(MainActivity.this, "Horizontal Flip Completed :)", Toast.LENGTH_SHORT).show();
            }
        });
    }
}

输出：