那些年,与Material design不得不说的故事之TextInputLayout

原创 2015年11月19日 14:13:14

那些年,与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());
    }

}
版权声明:本文为博主原创文章,未经博主允许不得转载。

Material Design之TextInputLayout使用示例

Google在2015的IO大会上,给我们带来了更加详细的Material Design设计规范,同时,也给我们带来了全新的Android Design Support Library,在这个supp...
  • nwsuafer
  • nwsuafer
  • 2015年08月05日 17:49
  • 2458

说说项目管理的那些事儿

在我们的开发团队里,每一个带过项目的人都成了优秀的员工. 这不是偶然,领导别人才会明白如何被领导,有句话叫”没有当过老板的员工不是好员工.”五年前听说这句话的时候还很不理解,等到自己做了项目负责人才...
  • zhuanzhe117
  • zhuanzhe117
  • 2015年07月19日 16:12
  • 2083

Material Design 之 侧边栏与 SystemBar 不得不说的故事

再过2个小时就是2015苹果春季发布会了,在两个小时的闲暇时间里,顺便鼓捣一下 Material Design 的侧边栏,没想到又是心酸血泪史。...
  • u014732778
  • u014732778
  • 2015年03月11日 11:27
  • 804

Material Design 入门(一)——TextInputLayout和TextInputEditText

最近学习了Material Design中提供的一些控件,下面就他们的使用方法陈述给大家,希望能够帮助大家快速上手。 本例子使用在控件都在com.android.support:design包中,如果...
  • u012230055
  • u012230055
  • 2016年08月29日 17:04
  • 5437

Material Design风格文本输入样式TextInputLayout的使用

TextInputLayout介绍TextInputLayout是Google基于Material Design风格出现的一个文本输入布局。主要特点在样式上,官方第一句介绍是当输入的文本显示或者隐藏的...
  • xuanguofeng
  • xuanguofeng
  • 2017年06月07日 09:49
  • 575

Android TextInputLayout,打造 Material Design 风格的文本输入框

Android Material Design 对 EditText 输入框的交互设计定义了一个规范,详细设计细节可以参考官网介绍:Components/Text fields (需要 翻墙 )。an...
  • wenbitianxiafeng
  • wenbitianxiafeng
  • 2016年11月28日 16:34
  • 1685

Material Design之TextInputLayout

使用TextInputLayout,首先要添加design library依赖, 打开build.gradle(Module:app),加入 compile 'com.android.support...
  • wu_wxc
  • wu_wxc
  • 2015年08月04日 11:04
  • 1064

Android开发---十款 Material Design 风格的 Android 开源项目

自Android推出Material Design以来,原生的Android系统颜值越来越高,现在可以客观的说和苹果的iOS不分伯仲。这篇文章整理了一些优秀的遵循Material Design的And...
  • Maiduoudo
  • Maiduoudo
  • 2017年01月19日 21:24
  • 7129

Andorid Material Design TextInputLayout和TextInputEditText

TextInputLayout继承自LinearLayoutLayout which wraps an EditText (or descendant) to show a floating labe...
  • RichieZhu
  • RichieZhu
  • 2016年08月28日 21:40
  • 792

Android开发之Material Design高体验开源项目篇

摘要:本文详细介绍了十个Material Design开源项目,从示例、FAB、菜单、动画、Ripple到Dialog,看被誉为“Google第一次在设计语言和规范上超越了Apple”的Materia...
  • Maiduoudo
  • Maiduoudo
  • 2016年12月22日 18:50
  • 1349
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:那些年,与Material design不得不说的故事之TextInputLayout
举报原因:
原因补充:

(最多只允许输入30个字)