在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>

接下来我在视图中添加了四个ellipses（View's）和一个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;
        }
    });

}

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

注意：这是一个简单的演示，说明如何开始实施类似屏幕的密码，您应该根据自己的需要进行调整和改进。