Material Design -- TextInputLayout

1. 导入Support Library

   想要使用TextInputLayout 控件，必须先在自己的项目中导入 Support Liarbry，如果没有下载这个支持库，可以打开 SDK Manager 去下载

这里写图片描述

在build.gradle 加入以下语句

compile 'com.android.support:design:23.2.0'

当然这个代码取决于你的Support Library 的版本。

接下来我们就可以使用 TextInputLayout 控件了。

2.使用TextInputLayout创建一个简单的登录界面

效果图

这里写图片描述

首先介绍一下经常用到几个方法

setHint(CharSequence hint); //用于设置提示文字
setError(CharSequence error);//用于设置错误提示信息
setErrorEnabled(boolean enabled);//用于设置是否将错误信息显示出来

接下来介绍如何在XML 文件中定义 TextInputLayout,它的简单使用方法如下：

之后在Activity 中获取到这个TextInputLayout，然后使用上面介绍的几个函数，对其进行相应设置即可。

TextInputLayout mTextInputLayout = (TextInputLayout) findViewById(R.id.textInputLayout);
mTextInputLayout.setHint("UserName ");

好了，介绍完它的简单使用方法，下面就来实现LOGIN界面，实际上是很容易实现的。

之后在主函数中进行如下操作

public class MainActivity extends AppCompatActivity {

    private TextInputLayout mTextInputLayout,mTextInputLayout2;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
         mTextInputLayout = (TextInputLayout) findViewById(R.id.textInputLayout);
        mTextInputLayout2 = (TextInputLayout) findViewById(R.id.textInputLayout2);
        mTextInputLayout.setHint("UserName ");
        mTextInputLayout2.setHint("Password");

        EditText editText = mTextInputLayout.getEditText();
        editText.addTextChangedListener(new TextWatcher() {
            @Override
            public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) {

            }

            @Override
            public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) {
                if (charSequence.length() > 10){
                    mTextInputLayout.setError("The length more than 10");
                    mTextInputLayout.setErrorEnabled(true);
                } else {
                    mTextInputLayout.setErrorEnabled(false);
                }
            }

            @Override
            public void afterTextChanged(Editable editable) {

            }
        });
    }

如以上代码示，在Username 输入框内添加了 监听事件，当输入字符长度 10 时，便将错误显示出来，Password输入框我并没有去实现，因为是相同的实现方法。在真正的登录系统中，我们还需要去检验输入的合法性，相应检验函数可以在LOGIN 按钮的监听事件内去执行。

3.ActionBar 问题

为了美观，在登陆界面一般都是将 ActionBar 进行隐藏的，这里有两种方法去隐藏。

第一种方法十分简单，直接设置一个不含ActionBar 的主题，比如我使用的是 Theme.AppCompat.DayNight.NoActionBar 主题，所以自然不含有ActionBar。

第二种方法，

好了，通过以上两种方法都可以隐藏ActionBar。

4.隐藏 KeyBoard

以上登录界面，当我们输入完密码之后，会有一个非常恼人的问题，就是除非我们按后退键，否则输入键盘不会消失。或许在某些机型上，只许轻轻点击一下Home 键就可以实现返回的功能，但是在另一些机型上，比如说我的调试机 魅族MX2，必须上划 Home 键，才可以实现返回功能，又由于，点击Home键是返回主菜单，经常出现按错的问题，现在我们来实现一个功能，让我们点击屏幕上的其他控件，以隐藏输入键盘。

在以上登陆界面内，输入键盘弹出时，屏幕的绝大部分空间都被RelativeLayout控件占据，所以我为这个控件设置了一个监听事件，当用户输入完点击这个控件，便去隐藏KeyBoard，主要添加代码如下

RelativeLayout mRelativeLayout = (RelativeLayout) findViewById(R.id.relative);
        mRelativeLayout.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                hideKeyboard();
            }
        });


 private void hideKeyboard() {
            ((InputMethodManager) getSystemService(Context.INPUT_METHOD_SERVICE)).
                    hideSoftInputFromWindow(mRelativeLayout.getWindowToken(), InputMethodManager.HIDE_NOT_ALWAYS);
    }

好了，通过以上设置有解决了KeyBoard的问题，这个时候，我们发现 TextInputLayout的hint文字颜色为深红色，那么我们能不能改变这个颜色呢？

5.改变 Hint 样式

打开 values\styles.xml ，找到以下代码

@color/colorAccent

就算找不到这行代码也没关系，我们可以手动添加进去，只要改变这个 colorAccent的值，就可以将 整个 样式改变为我们想要的颜色了。