android design 学习1：TextInputLayo

介绍

TextInputLayout是属于Material Design的新特性
存在的意义：
我们知道TextInputLayout是跟EditText是很类似的，那么他存在肯定是有意思的，EditText在设置hint="xxx"是默认显示，然后只要在edittext中输入的时候默认显示的就消失了，这种体验就不是很好。

那TextInputLayout有什么不同的地方呢，我们先来看下官方的案例图片

官方案例图片

我们可以看到在edittext输入文字的时候，默认提示的文字并没有消失，而是现实在其左上方。确实是很友好的交互

---

TextInputLayout使用

添加依赖

因为TextInputLayout是属于Material Design特性，所以我们需要添加依赖
<pre>
compile 'com.android.support:appcompat-v7:23.1.0'
compile 'com.android.support:design:23.1.0'
</pre>

布局使用

先看布局代码在说

<pre>

<android.support.design.widget.TextInputLayout
android:id="@+id/activity_activate_robot_email_tilayout"
android:layout_width="300dp"
android:layout_height="wrap_content"
android:layout_below="@id/activity_activate_robot_phone_tilayout"
android:layout_marginTop="20dp"
>
<EditText
android:layout_width="300dp"
android:layout_height="wrap_content"
android:hint="@string/activity_activate_input_email"
android:inputType="number"
/>
</android.support.design.widget.TextInputLayout>
</pre>

看代码我们知道，他并不是我们最初想的是替换掉edittext，而是在edittext上加载了一层控件

TextInputLayout控件和LinearLayout完全一样，它只是一个容器。
那我们可能会想，那我又多个edittext我能不能都放到TextInputLayout中呢，答案是不行，因为：TextInputLayout只接受一个子元素。子元素需要是一个EditText元素。

修改样式

这里面的修改样式主要是修改提示文字颜色和控件颜色。
修改其实很简单，我们可以在style.xml中找到

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">#3498db</item>
</style>

只要将

    <item name="colorAccent">#3498db</item>

这里面的颜色值替换就可以了

获取TextInputLayout的数据

看布局我们知道TextInputLayout中包含了EditText，那我们获取数据可以直接通过EditText.getText().ToString();得到文本内容。
而其实TextInputLayout也是可以获取edittext的文本内容的。
<pre>
String phone = activityActivateRobotPhoneTilayout.getEditText().getText().toString().trim();
String email = activityActivateRobotEmailTilayout.getEditText().getText().toString().trim();
</pre>
看下不同之处，他先是getEditText()获取子Edittext，然后再getText()来获取EditText的文本信息。

错误信息显示

既然TextInputLayout他是为友好交互而诞生，那么在输入问题错误的时候也能够给出友好的提示，如：

那么是怎么实现的呢，我们看代码

    activityActivateRobotEmailTilayout.setError("Not a valid email address!");
    activityActivateRobotPhoneTilayout.setError("Not a valid phone number!");

然后如果没有错误呢，怎么讲这个错误去掉呢

    activityActivateRobotEmailTilayout.setErrorEnabled(false);
    activityActivateRobotPhoneTilayout.setErrorEnabled(false);

---

总结

虽然很简单，但是是不是感觉很多人还没开始用到，是不是感觉很多地方可以用到。

material design 很多新特性都不错，一起赶快用起来吧。

---

慢慢努力做好身边所有的事

求知若饥，虚心若愚