java - Android EditText 不会重新出现在同一个地方

Question

我正在 Android 上处理信用卡/借记卡表格。

我想要实现的目标:

我有一个名为 CardNumber 的 EditText 字段，用户应该在其中输入他/她的卡号。在收到卡号的所有数字后，两个额外的 EditText 字段，ExpiryDate 和 CVV 滑出。如果用户删除 CardNumber 字段中的任何数字，bot 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>

我错过了什么？

感谢您的宝贵时间!

Answer 1

您可能不想翻译 EditText，因为这就是它在屏幕上的位置低于预期的原因。

如果你无论如何都想使用平移动画，你必须使用 View.INVISIBLE 而不是 View.GONE，否则初始的 getHeight() 将返回 0。你还需要将 s.length()== 平移为 0 19 和 -expiryDate.getHeight() for s.length()<19

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 方法中向上转换 View

expiryDate.getViewTreeObserver().addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() {
    @Override
    public boolean onPreDraw() {
        expiryDate.animate().translationY(-expiryDate.getHeight());
        expiryDate.getViewTreeObserver().removeOnPreDrawListener(this);
        return true;
    }
});