简单仿支付宝/微信密码输入效果

第一步 布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#000000"
    android:fitsSystemWindows="true"
    android:orientation="vertical">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#FFFFFF"
        android:orientation="vertical">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:gravity="center"
            android:orientation="vertical">

            <TextView
                android:textColor="#999999"
                android:id="@+id/prompt"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:text="请输入设置密码"
                android:textSize="20sp" />
        </LinearLayout>

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="50dp">
            <!-- 6位密码框布局，需要一个圆角边框的shape作为layout的背景 -->

            <LinearLayout
                android:id="@+id/typewriting"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="40dp"
                android:layout_marginRight="40dp"
                android:background="@drawable/shape_set_payment"
                android:orientation="horizontal">

                <!--
                     inputType设置隐藏密码明文
                     textSize设置大一点，否则“点”太小了，不美观
                -->

                <TextView
                    android:id="@+id/tv_pass1"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:gravity="center"
                    android:inputType="numberPassword"
                    android:textSize="32sp" />

                <View
                    android:layout_width="1dp"
                    android:layout_height="match_parent"
                    android:background="#999999" />

                <TextView
                    android:id="@+id/tv_pass2"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:gravity="center"
                    android:inputType="numberPassword"
                    android:textSize="32sp" />

                <View
                    android:layout_width="1dp"
                    android:layout_height="match_parent"
                    android:background="#999999" />

                <TextView
                    android:id="@+id/tv_pass3"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:gravity="center"
                    android:inputType="numberPassword"
                    android:textSize="32sp" />

                <View
                    android:layout_width="1dp"
                    android:layout_height="match_parent"
                    android:background="#999999" />

                <TextView
                    android:id="@+id/tv_pass4"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:gravity="center"
                    android:inputType="numberPassword"
                    android:textSize="32sp" />

                <View
                    android:layout_width="1dp"
                    android:layout_height="match_parent"
                    android:background="#999999" />

                <TextView
                    android:id="@+id/tv_pass5"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:gravity="center"
                    android:inputType="numberPassword"
                    android:textSize="32sp" />

                <View
                    android:layout_width="1dp"
                    android:layout_height="match_parent"
                    android:background="#999999" />

                <TextView
                    android:id="@+id/tv_pass6"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:gravity="center"
                    android:inputType="numberPassword"
                    android:textSize="32sp" />

            </LinearLayout>

            <EditText
                android:id="@+id/editText"
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:layout_alignParentBottom="true"
                android:layout_alignParentLeft="true"
                android:layout_alignParentStart="true"
                android:background="@null"
                android:cursorVisible="false"
                android:digits="1234567890"
                android:inputType="numberPassword"
                android:maxLength="6"
                android:maxLines="1"
                android:singleLine="true"
                android:textColor="@null"
                android:textSize="1dp" />

        </RelativeLayout>
    </LinearLayout>
</LinearLayout>

第二步 在drawable目录下创建shape_set_payment.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#ffffff" />
    <corners
        android:bottomLeftRadius="2dp"
        android:bottomRightRadius="2dp"
        android:topLeftRadius="2dp"
        android:topRightRadius="2dp" />
    <stroke
        android:width="1dp"
        android:color="#999999" />
</shape>

第三步 代码实现

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.text.Editable;
import android.text.TextWatcher;
import android.view.View;
import android.widget.EditText;
import android.widget.TextView;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity implements View.OnClickListener {
    private TextView prompt;
    private TextView tv_pass1;
    private TextView tv_pass2;
    private TextView tv_pass3;
    private TextView tv_pass4;
    private TextView tv_pass5;
    private TextView tv_pass6;
    private EditText editText;
    private int state = 1;
    private String password = "";

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        prompt = (TextView) findViewById(R.id.prompt);
        tv_pass1 = (TextView) findViewById(R.id.tv_pass1);
        tv_pass2 = (TextView) findViewById(R.id.tv_pass2);
        tv_pass3 = (TextView) findViewById(R.id.tv_pass3);
        tv_pass4 = (TextView) findViewById(R.id.tv_pass4);
        tv_pass5 = (TextView) findViewById(R.id.tv_pass5);
        tv_pass6 = (TextView) findViewById(R.id.tv_pass6);
        editText = (EditText) findViewById(R.id.editText);
        state = 1;
        prompt.setText("请输入支付密码");
        editText.addTextChangedListener(textWatcher);
    }

    private TextWatcher textWatcher = new TextWatcher() {

        @Override
        public void onTextChanged(CharSequence s, int start, int before,
                                  int count) {
        }

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


        }

        @Override
        public void afterTextChanged(Editable s) {
            getSpot(editText.getText().length());
            if (editText.getText().length() == 6) {
                if (state == 1) {
                    getSpot(0);
                    password = editText.getText().toString();
                    editText.setText(null);
                    prompt.setText("请再次输入支付密码");
                    state = 2;
                } else if (state == 2) {
                    if (password.equals(editText.getText().toString())) {
                        //设置密码 请求接口处
                        Toast.makeText(MainActivity.this, "去登录", Toast.LENGTH_LONG).show();
                    } else {
                        Toast.makeText(MainActivity.this, "两次密码不一次,请从新输入！", Toast.LENGTH_LONG).show();
                    }
                }
            }

        }
    };

    @Override
    public void onClick(View v) {
        switch (v.getId()) {

        }
    }

    public void getSpot(int i) {
        switch (i) {
            case 0:
                tv_pass1.setText("");
                tv_pass2.setText("");
                tv_pass3.setText("");
                tv_pass4.setText("");
                tv_pass5.setText("");
                tv_pass6.setText("");
                break;
            case 1:
                tv_pass1.setText("●");
                tv_pass2.setText("");
                tv_pass3.setText("");
                tv_pass4.setText("");
                tv_pass5.setText("");
                tv_pass6.setText("");
                break;
            case 2:
                tv_pass1.setText("●");
                tv_pass2.setText("●");
                tv_pass3.setText("");
                tv_pass4.setText("");
                tv_pass5.setText("");
                tv_pass6.setText("");
                break;
            case 3:
                tv_pass1.setText("●");
                tv_pass2.setText("●");
                tv_pass3.setText("●");
                tv_pass4.setText("");
                tv_pass5.setText("");
                tv_pass6.setText("");
                break;
            case 4:
                tv_pass1.setText("●");
                tv_pass2.setText("●");
                tv_pass3.setText("●");
                tv_pass4.setText("●");
                tv_pass5.setText("");
                tv_pass6.setText("");
                break;
            case 5:
                tv_pass1.setText("●");
                tv_pass2.setText("●");
                tv_pass3.setText("●");
                tv_pass4.setText("●");
                tv_pass5.setText("●");
                tv_pass6.setText("");
                break;
            case 6:
                tv_pass1.setText("●");
                tv_pass2.setText("●");
                tv_pass3.setText("●");
                tv_pass4.setText("●");
                tv_pass5.setText("●");
                tv_pass6.setText("●");
                break;
        }
    }

}