第一步 布局
<?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; } } }