Android自定义EditText表单验证
2016-10-21 本文已影响982人
咔咔和拉拉
对于EditText样式，网上都有好多各种方便的自定义控件。比如google的MaterialEditText库，继承EditText;
又或者像android-edittext-validator，大神们都已经封装好了的，直接拿过来用就可以。
但是，还不是我想要的，没办法，我们要的是更贴近现实项目的。先贴一下需求图；
需求图.png
其实也挺简单的，就是做的判断多一点；
1，布局；
布局拆分.png
我把EditText给拆分了下，比如背景看起来像底下只有一条线，其实我把background设为“@null”没有背景；右边的是个ImageView控件，底下是一个高为1px的View,View的下部分红框里是个未显示的提示语TextView,好吧，看下布局；
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_marginTop="40px"
android:paddingLeft="44px"
android:paddingRight="44px"
>
//输入框
<EditText
android:id="@+id/m_phone_edt"
android:layout_width="0dp"
android:layout_height="80px"
android:background="@null"
android:hint="请输入手机号"
android:textSize="30px"
android:textColorHint="#bcbcbc"
android:layout_weight="8"
android:paddingLeft="5px"
/>
//右边清除按钮
<ImageView
android:id="@+id/m_cancle"
android:layout_width="70px"
android:layout_height="70px"
android:src="@mipmap/login_gb"
android:layout_gravity="center"
android:layout_marginLeft="-75px"
android:padding="20px"
android:visibility="gone"
/>
</LinearLayout>
//底部线条
<View
android:id="@+id/m_phone_edt_bg"
android:layout_width="match_parent"
android:layout_height="1px"
android:background="#d3d3d3"
android:layout_marginLeft="44px"
android:layout_marginRight="44px"
/>
//错误提示语
<TextView
android:id="@+id/m_phone_hint"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="#e40b12"
android:text="请输入12位手机号码"
android:textSize="25px"
android:gravity="right"
android:padding="6px"
android:layout_marginRight="38px"
android:visibility="invisible"
/>
这是一个EditText的布局，汗，，，，但是方便操作，可以实现自己想要的效果；
布局看完了，让我看看下代码。。同事写了个帮助方法，拿过来改了下，我们看一个手机号判定的方法把；
/**
*
* @param edit editText控件
* @param hint 文字提示
* @param phoneCancle 清除按钮
* @param view 底下1px的线
* @param listener 回调方法
*/
public void setPhoneListener(final EditText edit, final TextView hint , final ImageView phoneCancle,final View view, final EditPasswordListener listener){
//第一个方法，监听焦点离开获得的方法
edit.setOnFocusChangeListener(new View.OnFocusChangeListener() {
@Override
public void onFocusChange(View v, boolean hasFocus) {
String editText = edit.getText().toString().trim();//拿到输入内容
if(hasFocus && editText.length() == 0){
view.setBackgroundColor(0xffffe313);//如果获取焦点 并且没有内容 1px线条显示黄色选中状态
}else if(!hasFocus) {
//如果输入内容为空，提示语隐藏，线为灰色，跳出方法
if(editText.equals("")){
hint.setVisibility(View.INVISIBLE);
view.setBackgroundColor(0xffd3d3d3);
return;
}
// 如果内容为空，不显示清除按钮
if (editText.equals("")) {
phoneCancle.setVisibility(View.GONE);
} else {
phoneCancle.setVisibility(View.VISIBLE);
}
//手机号格式判定
if (WHelperUtil.isMobileRight(mContext, editText)) {
bool2 = true;
} else {
bool2 = false;
}
if (bool2) {
listener.isPasswordRight(true);//正确显示绿色的线条，提示语等
hint.setText("正确");
hint.setTextColor(0xff3CD21E);
hint.setVisibility(View.VISIBLE);
view.setBackgroundColor(0xff3CD21E);
} else if(!bool2 && editText.length()<11){
listener.isPasswordRight(false);//错误的显示红色的线条等。。。
hint.setText("请输入11位手机号码");
hint.setTextColor(0xffe40b12);
hint.setVisibility(View.VISIBLE);
view.setBackgroundColor(0xffe40b12);
}
}
}
});
//这个方法是实时监听内容变化的方法
edit.addTextChangedListener(new TextWatcher() {
@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 editText = s.toString().trim();
if (editText.equals("")) {
phoneCancle.setVisibility(View.GONE);
} else {
phoneCancle.setVisibility(View.VISIBLE);
}
if (WHelperUtil.isMobileRight(mContext, editText)) {
bool2 = true;
} else {
bool2 = false;
}
if (editText.equals("")) {
hint.setVisibility(View.INVISIBLE);
view.setBackgroundColor(0xffd3d3d3);
return;
}
if (bool2) {
listener.isPasswordRight(true);
hint.setText("正确");
hint.setTextColor(0xff3CD21E);
hint.setVisibility(View.VISIBLE);
view.setBackgroundColor(0xff3CD21E);
} else if(!bool2 && editText.length()>11){
listener.isPasswordRight(false);
hint.setText("请输入11位手机号码");
hint.setTextColor(0xffe40b12);
hint.setVisibility(View.VISIBLE);
view.setBackgroundColor(0xffe40b12);
}else if(!bool2 && editText.length()<11){
listener.isPasswordRight(false);
hint.setVisibility(View.INVISIBLE);
view.setBackgroundColor(0xffffe313);
}
}
});
}
写的很详细，大家应该能看的懂，最后在Activity中调用此方法；
mLoginUtils = new LoginUtils(MainActivity.this);
//手机号
mLoginUtils.setPhoneListener(mPhoneEdt, mPhoneHint, mCancle, mPhoneEdtBg, new LoginUtils.EditPasswordListener() {
@Override
public void isPasswordRight(boolean bool) {
mIsPhoneRight = bool;//拿到值
isLogin();//判断登录按钮是否可点
}
});
private void isLogin() {
//手机号，密码，验证码同时正确，可点击
if (mIsPhoneRight && mIsPasswordRight && mIsCodeLook) {
mGoLogin.setEnabled(true);//登录按钮可点
} else {
mGoLogin.setEnabled(false);
}
}
最右贴一个终极效果图；看看是不是你想要的效果 .
效果图.gif
