如何在 Android 中创建信用卡表单？

许多应用程序都具有提供漂亮 UI 的功能，用于在其应用程序中添加您的信用卡并保存它们。在CRED 应用程序中可以看到这种类型的功能，我们可以在该应用程序中保存我们的信用卡。在本文中，我们将简单地创建在该应用程序中看到的信用卡表单。我们将在我们的应用程序中为信用卡创建一个 UI。

我们将在本文中构建什么？

我们将构建一个简单的应用程序，我们将在其中显示信用卡和一些文本字段以在该文本字段中输入数据。输入该数据后，我们将看到上面显示的卡片中显示的数据。下面给出了一个示例视频，以了解我们将在本文中做什么。请注意，我们将使用Java语言来实现这个项目。

分步实施

第 1 步：创建一个新项目

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

第 2 步：添加依赖项和 JitPack 存储库

导航到Gradle Scripts > build.gradle(Module:app)并在依赖项部分添加以下依赖项。

implementation ‘com.github.fevziomurtekin:PayView:1.0.3’

编程需要懂一点英语

将 JitPack 存储库添加到您的构建文件中。将其添加到 allprojects{} 部分中存储库末尾的根 build.gradle 中。

allprojects {

repositories {

…

maven { url “https://jitpack.io” }

}

编程需要懂一点英语

添加此依赖项后同步您的项目，现在我们将转向它的实现。

用于 PayView 的重要属性

Attributes	Description
cardBgColor	This attribute is used to provide background color to our card.
cardFgColor	This attribute is used to provide foreground color to our card.
cardTextColor	This attribute is used to provide text color which is used in our card.
cardAnimationType	There are 2 animations used in card which are horizontal and vertical. They are used when we add cvv.
cardNameTextSize	This attribute is to specify the text size of the name which we add for our card.
cardNoTextSize	This attribute is to specify the text size of the card number which we add for our card.
cardYearTextSize	This attribute is to specify the text size of the card year which we add for our card.
cardMonthTextSize	This attribute is to specify the text size of the card Month which we add for our card.
cardCvTextSize	This attribute is to specify the text size of the card cvv which we add for our card.
cardNumberHelperText	This attribute is used to provide hint for entering card number.
cardNameHelperText	This attribute is used to provide hint for entering card name.
cardCvErrorText	This attribute is used to provide hint for entering card cvv.
cardMonthErrorText	This attribute is used to provide hint for entering card month.
cardYearErrorText	This attribute is used to provide hint for entering card year.
cardExpiredErrorText	This attribute is used to provide hint when the entered card year is invalid.

步骤 3：使用 activity_main.xml 文件

导航到app > res > layout > activity_main.xml并将以下代码添加到该文件中。下面是activity_main.xml文件的代码。

XML

Java

import android.os.Bundle;
import android.view.View;
import android.widget.Toast;
 
import androidx.appcompat.app.AppCompatActivity;
 
import com.fevziomurtekin.payview.Payview;
 
public class MainActivity extends AppCompatActivity {
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
         
        // on below line we are creating a variable
        // for our pay view and initializing it.
        Payview payview = findViewById(R.id.payview);
         
        // on below line we are setting pay on listener for our card.
        payview.setPayOnclickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // after clicking on pay we are displaying toast message as card added.
                Toast.makeText(MainActivity.this, "Card Added. ", Toast.LENGTH_SHORT).show();
            }
        });
    }
}

第 4 步：使用MainActivity。 Java文件

转到主活动。 Java文件，参考如下代码。下面是MainActivity的代码。 Java文件。代码中添加了注释以更详细地理解代码。

Java

import android.os.Bundle;
import android.view.View;
import android.widget.Toast;
 
import androidx.appcompat.app.AppCompatActivity;
 
import com.fevziomurtekin.payview.Payview;
 
public class MainActivity extends AppCompatActivity {
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
         
        // on below line we are creating a variable
        // for our pay view and initializing it.
        Payview payview = findViewById(R.id.payview);
         
        // on below line we are setting pay on listener for our card.
        payview.setPayOnclickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // after clicking on pay we are displaying toast message as card added.
                Toast.makeText(MainActivity.this, "Card Added. ", Toast.LENGTH_SHORT).show();
            }
        });
    }
}

现在运行您的应用程序并查看代码的输出。

输出：