对于EditText样式,网上都有好多各种方便的自定义控件。比如google的MaterialEditText库,继承EditText;
又或者像android-edittext-validator,大神们都已经封装好了的,直接拿过来用就可以。
但是,还不是我想要的,没办法,我们要的是更贴近现实项目的。先贴一下需求图;
其实也挺简单的,就是做的判断多一点;
1,布局;
我把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);
}
}