android - 检测android编辑文本中用户输入的位数

Question

我正在处理一个项目，我需要使用 PIN 码锁定我自己的应用程序。

我想使用四个圆圈作为我的 edittext 的背景，并在用户输入数字时填充每个圆圈。就像 iOS 锁屏一样。

有输入时如何填充这些圆圈？

Answer 1

这是我整理的一个简单示例，供您入门。

您应该首先定义密码的椭圆形，我已经在 drawable 文件夹中的两个文件中定义了我的:

elipse.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval" >
    <gradient android:startColor="#8BE807" android:endColor="#68B002" android:angle="270" />
</shape>

ellipse_checked.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval" >
    <gradient android:startColor="#C7C7C7" android:endColor="#8A8A8A" android:angle="270"/>
</shape>

接下来，我在 View 中添加了四个省略号(View)和一个ExitText，如下所示:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
android:gravity="center_vertical|center_horizontal"
android:orientation="vertical">

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal">

    <View
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:background="@drawable/ellipse"
        android:id="@+id/elipse1"
        android:layout_margin="10dip" />

    <View
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:background="@drawable/ellipse"
        android:id="@+id/elipse2"
        android:layout_margin="10dip" />

    <View
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:background="@drawable/ellipse"
        android:id="@+id/elipse3"
        android:layout_margin="10dip" />

    <View
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:background="@drawable/ellipse"
        android:id="@+id/elipse4"
        android:layout_margin="10dip" />

</LinearLayout>

<EditText
    android:layout_width="100dip"
    android:layout_height="wrap_content"
    android:inputType="textPassword"
    android:ems="10"
    android:id="@+id/txtPass"
    android:layout_gravity="center_horizontal"
    android:layout_marginTop="30dip"
    android:textAlignment="center"
    android:maxLength="4"
    android:gravity="center" />

</LinearLayout>

然后在我的 MainActivity 中我有:

int passlen = 0;
Drawable mDrawableElipseChecked;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    // Used to change our pass-code ellipses style
    mDrawableElipseChecked = this.getResources().getDrawable(R.drawable.ellipse_checked);

    // Ellipses
    final View elipse1 = findViewById(R.id.elipse1);
    final View elipse2 = findViewById(R.id.elipse2);
    final View elipse3 = findViewById(R.id.elipse3);
    final View elipse4 = findViewById(R.id.elipse4);

    // Listen for text changes to our pass-code EditText
    final EditText txtPass = (EditText) findViewById(R.id.txtPass);
    txtPass.setOnKeyListener(new View.OnKeyListener() {
        @Override
        public boolean onKey(View view, int i, KeyEvent keyEvent) {

            if (keyEvent.getAction() == KeyEvent.ACTION_UP) {

                // Crude example of how to "check" / "un-check" our 
                // ellipses NOTE: You should write a better implementation 
                // for handling deletes etc
                passlen = txtPass.getText().length();
                if (passlen == 1) {
                    elipse1.setBackground(mDrawableElipseChecked);
                } else if (passlen == 2)
                    elipse2.setBackground(mDrawableElipseChecked);
                else if (passlen == 3)
                    elipse3.setBackground(mDrawableElipseChecked);
                else if (passlen == 4)
                    elipse4.setBackground(mDrawableElipseChecked);
                else {
                    return true;
                }
            }
            return false;
        }
    });

}

您现在应该有一个非常简单的示例，说明如何为应用实现类似密码的功能。

注意:这是一个关于如何开始实现类似屏幕的密码的简单演示，您应该调整和改进它以满足您的需要。