那些年,与Material design不得不说的故事之TextInputLayout
转载请标明出处:
http://blog.csdn.net/zhongjc_bill/article/details/49927023
如上图所示,以前,我们写的EditText ,一经编写,原来的提示语就比不见了,但是新版的EditText 却不会,他会把提示语放到前面,那样子就非常方便了,不仅这样,他还可以进行错误提示,非常适合使用于表单验证和登录注册验证
事前准备,在build.gradle
添加兼容包
compile ‘com.android.support:design:23.0.1’
这个风格按照兼容的来写
styles.xml
<style name="BaseAppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/primary</item>
<item name="colorPrimaryDark">@color/primary_dark</item>
<item name="colorAccent">@color/accent</item>
<item name="android:windowBackground">@color/window_background</item>
</style>
<style name="AppTheme" parent="BaseAppTheme" />
至于layout,只要在本身的EditText的基础上包裹TextInputLayout控件就行了
<?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:orientation="vertical">
<include layout="@layout/include_toolbar" />
<android.support.design.widget.TextInputLayout
android:id="@+id/ti_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp">
<EditText
android:id="@+id/ed_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="@string/hint_username"
android:inputType="textEmailAddress" />
</android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
android:id="@+id/ti_password"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:id="@+id/ed_password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="@string/hint_password"
android:inputType="textPassword" />
</android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
android:id="@+id/ti_repassword"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:id="@+id/ed_repassword"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="@string/hint_repassword"
android:inputType="textPassword" />
</android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
android:id="@+id/ti_phone"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:id="@+id/ed_phone"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="@string/hint_phone"
android:inputType="number" />
</android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
android:id="@+id/ti_email"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:id="@+id/ed_email"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="@string/hint_email"
android:inputType="textEmailAddress" />
</android.support.design.widget.TextInputLayout>
<Button
android:id="@+id/btn_login"
android:layout_margin="10dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/login"/>
</LinearLayout>
这个很简单就不多说了
下面讲一下main.java 主要是怎么操作的
public class EditTextDemo extends AppCompatActivity {
private TextInputLayout ti_name;
private TextInputLayout ti_password;
private TextInputLayout ti_repassword;
private TextInputLayout ti_phone;
private TextInputLayout ti_email;
private EditText ed_name;
private EditText ed_password;
private EditText ed_repassword;
private EditText ed_phone;
private EditText ed_email;
private Button btn_login;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.edittext_demo);
initWidget();
}
private void initWidget() {
ti_name = (TextInputLayout) findViewById(R.id.ti_name);
ti_password = (TextInputLayout) findViewById(R.id.ti_password);
ti_repassword = (TextInputLayout) findViewById(R.id.ti_repassword);
ti_phone = (TextInputLayout) findViewById(R.id.ti_phone);
ti_email = (TextInputLayout) findViewById(R.id.ti_email);
ed_name = (EditText) findViewById(R.id.ed_name);
ed_password = (EditText) findViewById(R.id.ed_password);
ed_repassword = (EditText) findViewById(R.id.ed_repassword);
ed_phone = (EditText) findViewById(R.id.ed_phone);
ed_email = (EditText) findViewById(R.id.ed_email);
btn_login = (Button) findViewById(R.id.btn_login);
btn_login.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
//当email正确时
if (ValidationUtils.isEmail(ed_email)) {
//设置为false时,取消错误提示语(注意在TextInputLayout 设值得)
ti_email.setErrorEnabled(false);
Snackbar.make(v, "登陆", Snackbar.LENGTH_LONG).show();
} else {
//设置提示语
ti_email.setError("电子邮箱格式错误");
}
}
});
//获取到TextInputLayout的EditEext,然后法可以对EditText 的内容进行 监听
ti_password.getEditText().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) {
//当密码的长度大于6的时候
if (s.length() > 6)
{
ti_password.setError("密码长度大于6");
}
else
{
ti_password.setErrorEnabled(false);
}
}
@Override
public void afterTextChanged(Editable s) {
}
});
}//end of initWidget
}
首先要继承 AppCompatActivity,然后就可以对TextInputLayout 和 EditText的控件进行监听,例如我使用的是
ti_password.getEditText().addTextChangedListener进行监听,当我的密码数大于6的时候,就会进行错误提示,
EditText也可以结合正则表达式来进行检测格式的正确性,对于表格验证,和登录注册有很大的帮助
/**
* Created by Administrator on 2015/11/12.
* 表单验证工具类
* author :zjc_bill
*/
public class ValidationUtils {
private static Pattern pattern;
private static Matcher matcher;
/**
* 描述:只能输入5-20个以字母开头、可带数字、“_”、“.”的字串,验证user
* 参数:
* 作者:zjc_bill
* 日期: 2015/11/12 10:45
*/
public static boolean isUserName(EditText editText) {
pattern = pattern.compile("/^[a-zA-Z]{1}([a-zA-Z0-9]|[._]){6,20}$/");
matcher = pattern.matcher(editText.getText().toString());
return matcher.matches();
}
public static boolean isPassword(EditText editText) {
pattern = pattern.compile("/^[a-zA-Z]{1}([a-zA-Z0-9]|[._]){6,20}$/");
matcher = pattern.matcher(editText.getText().toString());
return matcher.matches();
}
public static boolean isEmail(EditText editText) {
pattern = Patterns.EMAIL_ADDRESS;
matcher = pattern.matcher(editText.getText().toString());
return matcher.matches();
}
public static boolean isPhone(EditText editText) {
pattern = Patterns.PHONE;
matcher = pattern.matcher(editText.getText().toString());
return matcher.matches();
}
public static boolean isUrl(EditText editText) {
pattern = Patterns.WEB_URL;
matcher = pattern.matcher(editText.getText().toString());
return matcher.matches();
}
public static boolean isIp(EditText editText) {
pattern = Patterns.IP_ADDRESS;
matcher = pattern.matcher(editText.getText().toString());
return matcher.matches();
}
public static boolean isTheSamePassword(EditText pw1,EditText pw2) {
return pw1.getText().toString().equals(pw2.getText().toString());
}
}