安卓Material Desigh常用代码介绍2——高逼格输入框TextInputLayout的介绍和例子

控件介绍

TextInputLayout 继承自LinearLayout，是EditText的升级版。

属性介绍

1.基本框架

    <android.support.design.widget.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="UrerName"
            />
    </android.support.design.widget.TextInputLayout>

2.设置提示内容的大小与颜色
在TextInputLayout中添加

        app:hintTextAppearance="@style/text_hint_style"

在style添加

    <style name="text_hint_style" parent="TextAppearance.AppCompat">
        <item name="android:textSize">16sp</item>
        <item name="android:textColor">#000000</item>
    </style>

3.设置字数超出提示
在TextInputLayout

        app:counterEnabled="true"
        app:counterMaxLength="8"
        app:counterOverflowTextAppearance="@style/counterOverFlowAppearance"
        app:counterTextAppearance="@style/counterAppearance"

在style中

   <style name="counterAppearance" parent="TextAppearance.AppCompat">
        <item name="android:textSize">16sp</item>
        <item name="android:textColor">#000</item>
    </style>

    <style name="counterOverFlowAppearance" parent="TextAppearance.AppCompat">
        <item name="android:textSize">16sp</item>
        <item name="android:textColor">#ff00</item>
    </style>

注意事项

1.TextInputLayout包裹EditText，注意：TextInputLayout只能有一个子控件，和ScrollView有点类似，并且子元素必须是EditText，要不然报错；

例子效果

设计思路

1.设置两个TextInputLayout；
2.在第二个控件里添加hint设置，超出设置；

代码如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="UrerName"
            />
    </android.support.design.widget.TextInputLayout>

    <android.support.design.widget.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:hintTextAppearance="@style/text_hint_style"
        app:counterEnabled="true"
        app:counterMaxLength="8"
        app:counterOverflowTextAppearance="@style/counterOverFlowAppearance"
        app:counterTextAppearance="@style/counterAppearance">

        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="PassWord" />
    </android.support.design.widget.TextInputLayout>

</LinearLayout>

    <style name="text_hint_style" parent="TextAppearance.AppCompat">
        <item name="android:textSize">16sp</item>
        <item name="android:textColor">#000000</item>
    </style>

    <style name="counterAppearance" parent="TextAppearance.AppCompat">
        <item name="android:textSize">16sp</item>
        <item name="android:textColor">#000</item>
    </style>

    <style name="counterOverFlowAppearance" parent="TextAppearance.AppCompat">
        <item name="android:textSize">16sp</item>
        <item name="android:textColor">#ff00</item>
    </style>