如何显示倒数计时器

Question

我想要一个 OTP 屏幕。我成功创建了 OTP 屏幕。在此之下，我想要一个重新发送 otp 按钮和 1 个计时器。如果没有输入，计时器应该在按钮不在焦点上时启动。一旦输入 otp，计时器就会停止。我有一个定时器功能，我从 activity 的 onCreate 结束时调用的启动定时器。它应该取消对发送按钮的关注，并且在到期时，应该使它成为焦点。但是屏幕上没有显示计时器，一段时间后显示按钮。

我要

计时器显示格式不正确。我只想要秒
按钮现在是不可见的，它应该是可见的，但变暗了，没有焦点

代码：

           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 秒后根据您的倒数计时器调用 setup.Because 该按钮在 activity 开始时可见。

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

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。

如何显示倒数计时器

How to show countdown timer

android

countdowntimer