如何显示倒数计时器

Question

我想要一个 OTP 屏幕。我成功地创建了 OTP 屏幕。在此之下，我想要一个重新发送 otp 按钮和 1 个计时器。如果没有输入，计时器应该在按钮不在焦点时启动。输入 otp 后，计时器应立即停止。我有一个计时器功能，启动计时器，我从活动结束的 onCreate 调用。它应该使发送按钮失去焦点，并且在到期时应该将其聚焦。但是计时器没有显示在屏幕上，并且按钮会在一段时间后显示。

我想要

1. 定时器显示格式很尴尬。我只想要几秒钟。
2. 按钮现在是不可见的，它应该是可见的，但会变暗，因为它已经失焦了

代码：

           public class OTPActivity extends AppCompatActivity implements  AdapterView.OnItemSelectedListener{
    private EditText editText1, editText2, editText3, editText4;
    private EditText[] editTexts;
    CountDownTimer cTimer = null;
    TextView tv;
    Button resend;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_otpactivity2);

        tv = (TextView) findViewById(R.id.timer);
        resend = (Button) findViewById(R.id.ResendOTP);
        editText1 = (EditText) findViewById(R.id.otpEdit1);
        editText2 = (EditText) findViewById(R.id.otpEdit2);
        editText3 = (EditText) findViewById(R.id.otpEdit3);
        editText4 = (EditText) findViewById(R.id.otpEdit4);
        editTexts = new EditText[]{editText1, editText2, editText3, editText4};

        editText1.addTextChangedListener(new PinTextWatcher(0));
        editText2.addTextChangedListener(new PinTextWatcher(1));
        editText3.addTextChangedListener(new PinTextWatcher(2));
        editText4.addTextChangedListener(new PinTextWatcher(3));

        editText1.setOnKeyListener(new PinOnKeyListener(0));
        editText2.setOnKeyListener(new PinOnKeyListener(1));
        editText3.setOnKeyListener(new PinOnKeyListener(2));
        editText4.setOnKeyListener(new PinOnKeyListener(3));
        startTimer();
        resend.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                startTimer();
            }
        });
    }
    void startTimer() {
        resend.setEnabled(false);

        cTimer = new CountDownTimer(30000, 1000) {
            public void onTick(long millisUntilFinished) {
                tv.setText("seconds remaining: " +String.valueOf(millisUntilFinished/1000));

            }
            public void onFinish() {
                tv.setText("Re send OTP!");
                resend.setEnabled(true);
            }
        };
        cTimer.start();
    }


    //cancel timer
    void cancelTimer() {
        if(cTimer!=null)
            cTimer.cancel();
    }
    @Override
    public void onItemSelected(AdapterView<?> parent, View view, int position, long id) {

    }

    @Override
    public void onNothingSelected(AdapterView<?> parent) {

    }

    public class PinTextWatcher implements TextWatcher {

        private int currentIndex;
        private boolean isFirst = false, isLast = false;
        private String newTypedString = "";

        PinTextWatcher(int currentIndex) {
            this.currentIndex = currentIndex;

            if (currentIndex == 0)
                this.isFirst = true;
            else if (currentIndex == editTexts.length - 1)
                this.isLast = true;
        }

        @Override
        public void beforeTextChanged(CharSequence s, int start, int count, int after) {

        }

        @Override
        public void onTextChanged(CharSequence s, int start, int before, int count) {
            newTypedString = s.subSequence(start, start + count).toString().trim();
        }

        @Override
        public void afterTextChanged(Editable s) {

            String text = newTypedString;

            /* Detect paste event and set first char */
            if (text.length() > 1)
                text = String.valueOf(text.charAt(0)); // TODO: We can fill out other EditTexts

            editTexts[currentIndex].removeTextChangedListener(this);
            editTexts[currentIndex].setText(text);
            editTexts[currentIndex].setSelection(text.length());
            editTexts[currentIndex].addTextChangedListener(this);

            if (text.length() == 1)
                moveToNext();
            else if (text.length() == 0)
                moveToPrevious();
        }

        private void moveToNext() {
            if (!isLast)
                editTexts[currentIndex + 1].requestFocus();

            if (isAllEditTextsFilled() && isLast) { // isLast is optional
                editTexts[currentIndex].clearFocus();
                hideKeyboard();
            }
        }

        private void moveToPrevious() {
            if (!isFirst)
                editTexts[currentIndex - 1].requestFocus();
        }

        private boolean isAllEditTextsFilled() {
            for (EditText editText : editTexts)
                if (editText.getText().toString().trim().length() == 0)
                    return false;
            return true;
        }

        private void hideKeyboard() {
            if (getCurrentFocus() != null) {
                InputMethodManager inputMethodManager = (InputMethodManager) getSystemService(INPUT_METHOD_SERVICE);
                inputMethodManager.hideSoftInputFromWindow(getCurrentFocus().getWindowToken(), 0);
            }
        }

    }

    public class PinOnKeyListener implements View.OnKeyListener {

        private int currentIndex;

        PinOnKeyListener(int currentIndex) {
            this.currentIndex = currentIndex;
        }

        @Override
        public boolean onKey(View v, int keyCode, KeyEvent event) {
            if (keyCode == KeyEvent.KEYCODE_DEL && event.getAction() == KeyEvent.ACTION_DOWN) {
                if (editTexts[currentIndex].getText().toString().isEmpty() && currentIndex != 0)
                    editTexts[currentIndex - 1].requestFocus();
            }
            return false;
        }

    }
}

xml：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:gravity="center"
    android:layout_height="match_parent"
    >
    <androidx.cardview.widget.CardView
        xmlns:card_view="http://schemas.android.com/apk/res-auto"
        android:id="@+id/card_view"
        android:layout_width="180dp"
        card_view:cardElevation="4dp"
        android:gravity="center"
        android:layout_height="60dp"
        card_view:cardCornerRadius="4dp">
        <LinearLayout

            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:layout_gravity="center">
        <EditText
            android:id="@+id/otpEdit1"
            android:digits="1234567890"
            android:inputType="number"
            android:maxLength="1"
            android:gravity="center"
            android:layout_weight="1"
            android:layout_width="2dp"
            android:layout_height="wrap_content"
            />
        <EditText
            android:id="@+id/otpEdit2"
            android:digits="1234567890"
            android:inputType="number"
            android:maxLength="1"
            android:gravity="center"
            android:layout_weight="1"
            android:layout_width="2dp"
            android:layout_height="wrap_content"
        />
        <EditText
            android:id="@+id/otpEdit3"
            android:digits="1234567890"
            android:inputType="number"
            android:maxLength="1"
            android:gravity="center"
            android:layout_weight="1"
            android:layout_width="2dp"
            android:layout_height="wrap_content"
        />
        <EditText
            android:id="@+id/otpEdit4"
            android:digits="1234567890"
            android:inputType="number"
            android:maxLength="1"
            android:gravity="center"
            android:layout_weight="1"
            android:layout_width="2dp"
            android:layout_height="wrap_content"
        />
        </LinearLayout>
    </androidx.cardview.widget.CardView>
    <TextView
        android:id="@+id/timer"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Timer"
        android:layout_marginLeft="10dp"/>
    <Button
        android:id="@+id/ResendOTP"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="ResendOTP" />
</LinearLayout>

Answer 1

根据您的倒计时设置，onTick 方法会在 1 秒后调用。因为该按钮在活动开始时可见。

此外，如果您只想在倒数计时器中显示秒数，请使用以下语法：

void startTimer() {
    tv = (TextView) findViewById(R.id.timer);
    cTimer = new CountDownTimer(30000, 1000) {
        public void onTick(long millisUntilFinished) {
            tv.setText("seconds remaining: " +String.valueOf(millisUntilFinished/1000));
        }
        public void onFinish() {
            tv.setText("Re send OTP!");
            resend.setEnabled(true);
        }
    };
    cTimer.start();
}

您不需要在每个刻度上设置隐形按钮，它会增加 ui 事件。在启动计时器之前，您需要在 onCreate 方法或任何地方设置不可见的按钮，如下所示：

            resend.setVisibility(View.INVISIBLE);
            startTimer();

此外，为了调光，您需要更改按钮颜色并使用 setEnabled 方法来启用和禁用按钮点击。

Answer 2

您应该在按钮上使用setEnabled，而不是设置可见性。

您可以在startTimer 函数中设置一次，而不是禁用每次都会调用的onTick 中的按钮。只需在 onTick 中更新您的 TextView。如果需要，您还可以在 XML 中设置这些初始值。

由于您想显示秒数，而不是 new SimpleDateFormat("mm:ss:SS").format(new Date( millisUntilFinished))，您只需执行 millisUntilFinished / 1000 并将其设置为您的 TextView。