一天一个控件——TextInputLayout

一天一个控件——TextInputLayout

在编写Android程序的时候，最大的悲哀不是不会编写代码，而是明明知道有一个官方的控件能够实现需要的效果，但是不知道这个空的名称，或者是都不知道Android官方提供的控件能够实现这个效果。

想写这个一天一控件的系统的原因是，在想写一个登录界面的时候，之前不知道在哪里看见过一个碉堡的登录页面，而且控件使用的也是Android自带的控件，但是我忘记了是什么控件，几经周折才找到这个控件——TextInputLayout。通过这个事件，我在想，我对开源的控件不熟悉，那还还能说得过去，但是对Android原生的控件都不熟悉，那就有点过分了。因此我才想每天一个控件系列的，只是简单的使用，让这些控件给我一个熟悉的面孔。

效果图

什么都不说先上效果图：

控件使用

引入

这个控件是随着Google的Material Desgin而推出的，这个控件并不在Android的默认包中，要使用这个控件需要提前引入compile 'com.android.support:design:x.y.z'(x.y.z是最新的design包)。最简单方式：

错误

当com.android.support:design包引入后，就可以在布局文件中使用这个控件了，一般而言，TextInputLayout会和TextInputEditText一起使用，但是需要注意，在TextInputLayout中只能放置一个EditText控件，如果存放了两个或两个EditText控件，在运行的时候编译器会给出如下错误提示：

在错误中已经已经将问题说得非常清楚了。

属性

通过Android的API文档说明，TextInputLayout提供了大量的自定义属性：

1. counterEnableed
2. counterMaxLength
3. errorEnabled
4. errorText
5. passwordToggleDrawable
6. passwordToggleEnabled
7. …

比如1,2两个属性可以很清晰的告诉用户已经输入的字符数和接受的最大字符数。5.6两个属性就可以很简单实现密码的显示和隐藏（都不用 写自定义View了）

<android.support.design.widget.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        app:counterEnabled="true"
        app:counterMaxLength="11">

        <android.support.design.widget.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="账号/手机/邮箱" />
    android.support.design.widget.TextInputLayout>

    <android.support.design.widget.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:passwordToggleDrawable="@drawable/eye"
        app:passwordToggleEnabled="true">

        <android.support.design.widget.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="密码"
            android:inputType="textPassword" />

    android.support.design.widget.TextInputLayout>

这样就能实现一开始的效果了。

至于输出错误信息。需要在代码中进行设置，进行判断之后调用setError()设置错误信息

public class MainActivity extends AppCompatActivity {
    private TextInputLayout textInputLayout;
    private TextInputEditText editText;
    private Button button;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        textInputLayout = (TextInputLayout) findViewById(R.id.text_username);
        editText = (TextInputEditText) findViewById(R.id.et_username);
        button = (Button) findViewById(R.id.btn);


        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                String text = editText.getText().toString();
                if (!text.equals("hhhh")) {
//                    Toast.makeText(MainActivity.this, "show", Toast.LENGTH_SHORT).show();
                    textInputLayout.setError("用户名不正确");
                }
            }
        });
    }
}

errTextAppearance后面使用的是属性的id。基础的使用应该就是这些，会使用这些应该就能够满足一般的使用了。还有什么高级的使用的方式，到时候能够查文档。