先上效果图
1.首先在layout下新建xml文件 view_pas_edittext
主要控件为EditText和Button,其中Button存放闭眼的图片,其他样式自定(闭眼和眼睛两张图片可在阿里图标下载)
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:background="@color/white">
<EditText
android:id="@+id/et_view"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_marginLeft="10dp"
android:layout_weight="4"
android:background="@null"
android:gravity="center_vertical"
android:singleLine="true"
android:textColor="#0e0e0e"
android:textColorHint="#b0c6ce"
android:textSize="14sp" />
<Button
android:id="@id/bt_show"
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_gravity="right|center_vertical"
android:layout_margin="10dp"
android:padding="5dp"
android:background="@drawable/hide_pas" />
</LinearLayout>
</LinearLayout>
2.新建CustomizePasEditText继承LinearLayout,实现View.onClickListener接口
public class CustomizePasEditText extends LinearLayout implements View.OnClickListener {
private EditText editText;
private Button showButton;
//true为隐藏,false为显示
private boolean mode = true;
//设置提示文字
public void setEditTextHint(String hint){
if(editText!=null){
editText.setHint(hint);
}
}
//获得输入框文字
public String getText(){
return editText.getText().toString();
}
public CustomizePasEditText(Context context, AttributeSet attrs) {
super(context, attrs);
LayoutInflater.from(context).inflate(R.layout.view_edittext,this,true);
editText = findViewById(R.id.et_view);
//一开始密码是隐藏的,因此一开始使用闭眼图片,并且将EditText的输入类型设置为密码(不可见)
showButton= findViewById(R.id.bt_show);
showButton.setBackgroundResource(R.drawable.hide_pas);
editText.setInputType(InputType.TYPE_CLASS_TEXT | InputType.TYPE_TEXT_VARIATION_PASSWORD);
showButton.setOnClickListener(this);
}
@Override
public void onClick(View v) {
//当点击了显示/隐藏按钮,则改变editText的文字显示方式
switch (v.getId()){
case R.id.bt_show:
//从隐藏变显示
if(mode){
editText.setInputType(InputType.TYPE_TEXT_VARIATION_VISIBLE_PASSWORD);
//为了点击之后输入框光标不变
editText.setSelection(editText.getText().length());
showButton.setBackgroundResource(R.drawable.show_pas);
mode = !mode;
}else {
editText.setInputType(InputType.TYPE_CLASS_TEXT | InputType.TYPE_TEXT_VARIATION_PASSWORD);
//为了点击之后输入框光标不变
editText.setSelection(editText.getText().length());
showButton.setBackgroundResource(R.drawable.hide_pas);
mode = !mode;
}
break;
}
}
//获得输入框内容
public EditText getEditText(){
return editText;
}
}
3.在activity中使用
首先在activity的xml中调用该控件
<com.xx.xx.customUI.CustomizePasEditText
android:id="@+id/ed_pas"
android:layout_width="match_parent"
android:layout_height="@dimen/control_big_margin"
android:textColorHint="@color/light_gray"
android:hint="@string/ed_hint_pas"
android:background="@null"
android:padding="10dp"
android:textColor="@color/black"
android:inputType="textPassword"
android:lines="1"
android:maxLength="16"/>
然后在代码中使用
//注册绑定
CustomizePasEditText pasEditText;
pasEditText = findViewById(R.id.ed_pas);
pasEditText.setEditTextHint(getResources().getString(R.string.ed_hint_pas));
//获得输入内容
String pas = pasEditText.getText();
注意,如果要动态改变输入框样式,需在CustomizePasEditText中编写