自定义Android Dialog EditText 密码输入框

在一些需要输入支付密码的需求中，如微信支付的黑圆点。

开始也是一直在想着怎么自定义EditText去做，确实网上已经有自定义view的实现。之前也是参考别人写的，并修改了部分后用于项目中，大家可以搜下“PasswordInputView”，好多作者实现了，大家的思路都差不多。不知道参考哪位作者的了，因为自己改了部分参数跟方法，修改了颜色，找不到对比踪迹了。
但是测试发现自定义的那个View第一个输入框总比其的5个大点点，要仔细看，然后密码输入框的线也有点粗细不一，边角跟设计图也不一致，测试就提bug单了。

后面想着怎么优化来着，继续在那个类上改来改去，边角上总有点跟设计图不一致，产品就没通过了。基础差，没办法。
停顿下，去厕所蹲下大便思考下......过不久，只听脑子里一个微波炉的声音响起：“叮”的一声，有思路了！

做一个假象！
就是：EditText文本输入透明、文字透明，然后盖在一个View上面，然后监控这个EditText的
afterTextChanged 处理EditText 下面的那个View相关的显示逻辑。

开干。
1、布局文件：dialog_pay.xml

Code Text：

<?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:gravity="center"
android:orientation="vertical"
android:padding="15dp">

<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/bg_white_rect_circle_border"
android:orientation="vertical">

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:padding="8dp">

<ImageView
android:id="@+id/dialog_close"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_marginLeft="-8dp"
android:padding="15dp"
android:src="@mipmap/ic_dialog_close"
android:visibility="visible" />

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="请输入支付密码"
android:textColor="@color/gray_general_lable"
android:textSize="@dimen/text_size_l" />

</RelativeLayout>

<View
android:layout_width="match_parent"
android:layout_height="0.5dp"
android:background="@color/divider_color" />

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:layout_marginTop="16dp"
android:gravity="center_horizontal"
android:text="支付金额"
android:textColor="@color/gray_general_title"
android:textSize="@dimen/text_size_m" />

<TextView
android:id="@+id/dialog_money"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:gravity="center_horizontal"
android:text="0"
android:textColor="@color/black_general_title"
android:textSize="22sp" />

<FrameLayout
android:id="@+id/fragment_password"
android:layout_width="match_parent"
android:layout_height="wrap_content">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="40dp"
android:layout_margin="15dp"
android:gravity="center"
android:orientation="horizontal">

<ImageView
android:id="@+id/et_pwd_1"
style="@style/EditTextPasswordStyle" />

<ImageView
android:id="@+id/et_pwd_2"
style="@style/EditTextPasswordStyle"
android:layout_marginLeft="10dp" />

<ImageView
android:id="@+id/et_pwd_3"
style="@style/EditTextPasswordStyle"
android:layout_marginLeft="10dp" />

<ImageView
android:id="@+id/et_pwd_4"
style="@style/EditTextPasswordStyle"
android:layout_marginLeft="10dp" />

<ImageView
android:id="@+id/et_pwd_5"
style="@style/EditTextPasswordStyle"
android:layout_marginLeft="10dp" />

<ImageView
android:id="@+id/et_pwd_6"
style="@style/EditTextPasswordStyle"
android:layout_marginLeft="10dp" />
</LinearLayout>

<EditText
android:id="@+id/et_pwd_real"
android:layout_width="match_parent"
android:layout_height="40dp"
android:layout_margin="15dp"
android:background="@color/color_transparent"
android:cursorVisible="false"
android:inputType="numberPassword"
android:maxLength="6"
android:maxLines="1"
android:textColor="@color/color_transparent" />

</FrameLayout>

</LinearLayout>
</LinearLayout>

Code Design：

2、自定义Dialog：PayDialog.java

public class PayDialog extends Dialog implements View.OnClickListener {

private TextView mDialogMoney;

private EditText mEtPwdReal;
private ImageView mEt1, mEt2, mEt3, mEt4, mEt5, mEt6;

public interface PasswordCallback {
void callback(String password);
}

public PasswordCallback mPasswordCallback;

public PayDialog(Context context) {
super(context, R.style.PasswordDialog);
initDilaog();
}

void initDilaog() {
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.dialog_pay);
setCancelable(false);
setCanceledOnTouchOutside(false);

findViewById(R.id.dialog_close).setOnClickListener(this);

mDialogMoney = (TextView) findViewById(R.id.dialog_money);

mEtPwdReal = (EditText) findViewById(R.id.et_pwd_real);
mEtPwdReal.addTextChangedListener(new PasswordEditChangedListener(mEtPwdReal));

mEt1 = (ImageView) findViewById(R.id.et_pwd_1);
mEt2 = (ImageView) findViewById(R.id.et_pwd_2);
mEt3 = (ImageView) findViewById(R.id.et_pwd_3);
mEt4 = (ImageView) findViewById(R.id.et_pwd_4);
mEt5 = (ImageView) findViewById(R.id.et_pwd_5);
mEt6 = (ImageView) findViewById(R.id.et_pwd_6);
}

private void requestFocus() {
mEtPwdReal.requestFocus();
this.getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_STATE_ALWAYS_VISIBLE);
}

/**
* 重制
*/
public void clearPasswordText() {
mEtPwdReal.setText("");
requestFocus();
}

/**
* 设置金额
*
* @param money
*/
public void setMoney(int money) {
mDialogMoney.setText("¥" + money + ".00");
}

/**
* 设置回调
*
* @param passwordCallback
*/
public void setPasswordCallback(PasswordCallback passwordCallback) {
this.mPasswordCallback = passwordCallback;
}

@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.dialog_close:
dismiss();
break;
}
}

private class PasswordEditChangedListener implements TextWatcher {

private EditText mEditText;

public PasswordEditChangedListener(EditText editText) {
this.mEditText = editText;
}

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

}

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

}

@Override
public void afterTextChanged(Editable s) {
String ret = s.toString().trim();
if (mEditText.getId() == R.id.et_pwd_real) {
char[] array = ret.toCharArray();
for (int i = 0; i < array.length; i++) {
//设置图片为黑色圆点
if (i == 0) {
mEt1.setImageResource(R.mipmap.icon_pwd);
} else if (i == 1) {
mEt2.setImageResource(R.mipmap.icon_pwd);
} else if (i == 2) {
mEt3.setImageResource(R.mipmap.icon_pwd);
} else if (i == 3) {
mEt4.setImageResource(R.mipmap.icon_pwd);
} else if (i == 4) {
mEt5.setImageResource(R.mipmap.icon_pwd);
} else if (i == 5) {
mEt6.setImageResource(R.mipmap.icon_pwd);
}
}
clearTextView(array.length, mEt1, mEt2, mEt3, mEt4, mEt5, mEt6);
//自动提交
if (array.length == 6) {
if (mPasswordCallback != null)
mPasswordCallback.callback(String.valueOf(array));
}
}
}

/**
* 按删除键后，删除的值对应的图标还原
*
* @param length
* @param editTexts
*/
void clearTextView(int length, ImageView... editTexts) {
for (int i = 0; i < 6; i++) {
//比如当前密码长度为4位，当大于4的图标，就要还原成未输入情况
if (i > length - 1) {
editTexts[i].setImageResource(0);
}
}
}
}
}

3、调用Dialog：MainActivity.java

public class MainActivity extends Activity {

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

findViewById(R.id.btn_pay).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
createPayDialog();
}
});
}

void createPayDialog() {
final PayDialog payDialog = new PayDialog(this);
payDialog.setMoney(520);
payDialog.setPasswordCallback(new PayDialog.PasswordCallback() {
@Override
public void callback(String password) {
if ("000000".equals(password)) {
payDialog.clearPasswordText();
Toast.makeText(MainActivity.this, "密码为错误，请重试", Toast.LENGTH_SHORT).show();

} else {
Toast.makeText(MainActivity.this, "密码为：" + password, Toast.LENGTH_SHORT).show();
payDialog.dismiss();
}
}
});
payDialog.clearPasswordText();
payDialog.show();
}
}

4、运行效果[b]图：[/b]





资源地址：http://download.csdn.net/download/liang_fei_xp/9969719