Material Design之TextInputLayout使用示例

使用TextInputLayout创建一个登陆界面

1.导入支持库 

使用TextInputLayout 控件需要导入两个库，一个是appcompat-v7，保证material styles可以向下兼容。另一个是Design Support Library。 

在项目的build.gradle文件中，添加下面的依赖(dependencies):

dependencies {
        compile fileTree(dir: ‘libs‘, include: [‘*.jar‘])
        compile ‘com.android.support:design:22.2.0‘
        compile ‘com.android.support:appcompat-v7:22.2.0‘
    }

2.使用TextInputLayout 

TextInputLayout 控件表现得就像LinearLayout 一样，它是一个容器。TextInputLayout 中只能放一个子元素，和ScrollView有点类似，并且子元素必须是EditText 。

<android .support.design.widget.TextInputLayout
    android:id="@+id/usernameWrapper"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <edittext android:id="@+id/username"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="textEmailAddress"
        android:hint="Username"/>

</android .support.design.widget.TextInputLayout>

注意到了么，我在EditText设置一个属性-hint。这个属性大家都很熟悉了，EditText没有输入的时候，hint会显示，当输入第一个字母上去的时候，hint就消失了。这个体验不是太好。 
感谢TextInputLayout，这个马上就不是问题了。当EditText中输入第一个字母要隐藏hint的时候，TextInputLayout中会出现一个悬浮的标签来显示这个hint，还负责一个炫酷的的material 动画。

注：EditText的高度可以固定， TextInputLayout 的高度不要固定，否则TextInputLayout 的setError()的信息可能会无法正常显示

3.app:hintTextAppearance="@style/FloatingStyle"

app:hintTextAppearance=”@style/FloatingStyle” 用于设置floating字体的样式。

<style name="FloatingStyle" parent="@android:style/TextAppearance">
        <item name="android:textColor">#e0ffffff</item>
        <item name="android:textSize">12sp</item>
  </style>

TextInputLayout可以使用setError()方法在输入框下方显示错误信息，用途类似EditText的setError()。同样的，在xml中可以使用app:errorTextAppearance来设置错误信息的字体样式。

 

 

参考链接：http://www.mamicode.com/info-detail-965904.html

其他链接：http://www.open-open.com/lib/view/open1433496206666.html