我正在使用Android上的信用卡/借记卡表格。
我想要达到的目标:
我有一个名为EditText
的CardNumber
字段,用户应在该字段中输入他/她的卡号。收到卡号的所有数字后,两个附加的EditText
字段ExpiryDate
和CVV
滑出。如果用户删除了CardNumber
字段中的任何数字,则ExpiryDate
和CVV
字段应该消失或滑入并删除上面写的文字。
当用户再次键入CardNumber
并输入所需的所有数字时,ExpiryDate
和CVV
都应再次出现在以前出现的相同位置。
但这就是我得到的
它们不在同一位置出现。如何实现此目的以及在ExpiryDate
和CVV
消失后如何从中删除文本。
这是我到目前为止所做的
MainActivity.java
import android.content.pm.ActivityInfo;
import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.text.Editable;
import android.text.TextUtils;
import android.text.TextWatcher;
import android.view.KeyEvent;
import android.view.View;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.EditText;
import java.security.Key;
public class MainActivity extends AppCompatActivity {
private EditText cardNumber, expiryDate, CVV, nameOnCard;
private boolean flag = false;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LOCKED);//Locks the screen orientation
init(); //Initializes the variables
typefunc();
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.menu_main, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();
//noinspection SimplifiableIfStatement
if (id == R.id.action_settings) {
return true;
}
return super.onOptionsItemSelected(item);
}
public void init()
{
cardNumber = (EditText) findViewById(R.id.cardNumber); //Field for storing the card number
expiryDate = (EditText) findViewById(R.id.expiryDate); //For storing the Expiry Date
CVV = (EditText) findViewById(R.id.CVV); //For storing the CVV
nameOnCard = (EditText) findViewById(R.id.nameOnCard); //For storing the name of the Cardholder
}
public void typefunc()
{
//FORMATTING CARD NUMBER FIELD
cardNumber.addTextChangedListener(new TextWatcher() {
@Override
public void beforeTextChanged(CharSequence s, int start, int count, int after)
{
}
@Override
public void onTextChanged(CharSequence s, int start, int before, int count)
{
if(s.length()==19)
{
//MAKING EXPIRY DATE VISIBLE & PUTTING FOCUS ON IT
expiryDate.setVisibility(View.VISIBLE);
expiryDate.requestFocus();
//SLIDE OUT ANIMATION (FADE IN --> FADE OUT)
expiryDate.setAlpha(0.0f);//(INVISIBLE)
expiryDate.animate().translationY(expiryDate.getHeight()).alpha(1.0f);//(VISIBLE)
//MAKING CVV VISIBLE
CVV.setVisibility(View.VISIBLE);
//SLIDE OUT ANIMATION (FADE IN --> FADE OUT)
CVV.setAlpha(0.0f); //(INVISIBLE)
CVV.animate().translationY(CVV.getHeight()).alpha(1.0f); //(VISIBLE)
}
if(s.length()<19)
{
//DISAPPEARING THE EXPIRY DATE 7 CVV
expiryDate.setVisibility(View.GONE);
CVV.setVisibility(View.GONE);
//CLEARING THE FOCUS
expiryDate.clearFocus();
//SLIDE IN ANIMATION (FADE OUT --> FADE IN)
expiryDate.animate().translationY(0).alpha(0.0f);
CVV.animate().translationY(0).alpha(0.0f);
}
}
@Override
public void afterTextChanged(Editable s)
{
char space = ' ';
if(s.length()>0 && (s.length()%5) == 0)
{
char c = s.charAt(s.length()-1);
if(Character.isDigit(c))
{
s.insert(s.length()-1,String.valueOf(space));
}
}
}
});
//FORMATTING THE EXPIRY DATE FIELD
expiryDate.addTextChangedListener(new TextWatcher() {
@Override
public void beforeTextChanged(CharSequence s, int start, int count, int after) {
}
@Override
public void onTextChanged(CharSequence s, int start, int before, int count)
{
if(s.length()==5)
CVV.requestFocus();
}
@Override
public void afterTextChanged(Editable s)
{
char slash = '/';
if(s.length()>0 && (s.length()%3) == 0)
{
char c = s.charAt(s.length()-1);
if(Character.isDigit(c))
s.insert(s.length()-1,String.valueOf(slash));
}
}
});
CVV.addTextChangedListener(new TextWatcher() {
@Override
public void beforeTextChanged(CharSequence s, int start, int count, int after) {
}
@Override
public void onTextChanged(CharSequence s, int start, int before, int count)
{
if(s.length()==3) {
nameOnCard.setVisibility(View.VISIBLE);
}
}
@Override
public void afterTextChanged(Editable s)
{
if(s.length()==3)
nameOnCard.requestFocus();
}
});
}
}
content_main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/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"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
tools:context="payment.ec.juspay.in.cardform.MainActivity"
tools:showIn="@layout/activity_main">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="Credit / Debit"
android:id="@+id/cardformHeading"
android:layout_marginLeft="42dp"
android:layout_marginStart="30dp"
android:layout_marginTop="20dp"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
<EditText
android:layout_width="300dp"
android:layout_height="wrap_content"
android:inputType="phone"
android:id="@+id/cardNumber"
android:maxLength="20"
android:hint="Card Number"
android:layout_below="@+id/cardformHeading"
android:layout_alignLeft="@+id/cardformHeading"
android:layout_alignStart="@+id/cardformHeading"
android:layout_marginTop="32dp"
android:singleLine="true"/>
<EditText
android:layout_width="200dp"
android:layout_height="wrap_content"
android:id="@+id/expiryDate"
android:hint="Expiry Date (mm/yy)"
android:maxLength="5"
android:inputType="phone"
android:layout_below="@+id/cardNumber"
android:layout_alignLeft="@+id/cardNumber"
android:layout_alignStart="@+id/cardNumber"
android:singleLine="true"
android:visibility="gone"/>
<EditText
android:layout_width="80dp"
android:layout_height="wrap_content"
android:inputType="numberPassword"
android:ems="10"
android:maxLength="3"
android:id="@+id/CVV"
android:hint="CVV"
android:layout_below="@+id/cardNumber"
android:layout_alignRight="@+id/cardNumber"
android:layout_alignEnd="@+id/cardNumber"
android:singleLine="true"
android:visibility="gone"/>
<EditText
android:layout_width="300dp"
android:layout_height="wrap_content"
android:id="@+id/nameOnCard"
android:hint="Name On Card"
android:layout_below="@+id/expiryDate"
android:layout_alignLeft="@+id/expiryDate"
android:layout_alignStart="@+id/expiryDate"
android:singleLine="true"
android:visibility="gone"/>
</RelativeLayout>
我想念什么?
感谢您的时间!!
最佳答案
您可能不想翻译EditText,因为这就是为什么它在屏幕上的位置比想要的低。
无论如何,如果您想使用翻译动画,则必须使用View.INVISIBLE而不是View.GONE,否则初始getHeight()将返回0。对于s.length()== 19,还需要转换为0,并-expiryDate.getHeight()的s.length()
if(s.length()==19)
{
//MAKING EXPIRY DATE VISIBLE & PUTTING FOCUS ON IT
expiryDate.setVisibility(View.VISIBLE);
expiryDate.requestFocus();
//SLIDE OUT ANIMATION (FADE IN --> FADE OUT)
expiryDate.setAlpha(0.0f);//(INVISIBLE)
expiryDate.animate().translationY(0).alpha(1.0f);//(VISIBLE)
//MAKING CVV VISIBLE
CVV.setVisibility(View.VISIBLE);
//SLIDE OUT ANIMATION (FADE IN --> FADE OUT)
CVV.setAlpha(0.0f); //(INVISIBLE)
CVV.animate().translationY(0).alpha(1.0f); //(VISIBLE)
}
else if(s.length()<19 && expiryDate.getVisibility() == View.VISIBLE)
{
//DISAPPEARING THE EXPIRY DATE 7 CVV
expiryDate.setVisibility(View.INVISIBLE);
CVV.setVisibility(View.INVISIBLE);
//CLEARING THE FOCUS
expiryDate.clearFocus();
//SLIDE IN ANIMATION (FADE OUT --> FADE IN)
expiryDate.animate().translationY(-expiryDate.getHeight()).alpha(0.0f);
CVV.animate().translationY(-CVV.getHeight()).alpha(0.0f);
}
另外,您可能希望像这样在init方法中向上转换视图
expiryDate.getViewTreeObserver().addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() {
@Override
public boolean onPreDraw() {
expiryDate.animate().translationY(-expiryDate.getHeight());
expiryDate.getViewTreeObserver().removeOnPreDrawListener(this);
return true;
}
});