国际惯例先放图
效果展示图
（有点丑，凑合着看吧）
写在开头
对于MD风格相信大家都不陌生了，也有很多的介绍MD的文章，那为什么我还要写类似的文章呢？
一方面是为了学习源码，学习大牛们的代码风格；
另一方面是为了复习以前的知识（因为发现以前记得再清楚，用的时候还是会忘的。。。忘的。。。的。。。所以还是记录一下，忘的时候能翻一翻。）
其实主要目的是为了装X
装B.jpg
（咳咳。。。开玩笑了，我是一个正经的人。。。）
目录
-
简单用法
1.常用属性和对应方法
2.效果展示 -
进阶用法
1.自定义hint样式
2.自定义error样式
3.自定义超出长度样式
4.自定义密码图标
5.效果展示
简单用法
常用属性和对应方法
| 属性名 | 对应方法 | 作用 |
|---|---|---|
| app:hint | setHint(CharSequence) | 设置浮动提示语 |
| app:hintEnabled | setHintEnabled(boolean) | 设置是否开启浮动功能 |
| app:hintAnimationEnabled | setHintAnimationEnabled(boolean) | 设置是否开启浮动提示动画 |
| null | setError | 设置错误提示 |
| app:errorEnabled | setErrorEnabled(boolean) | 设置是否开启错误提示 |
| app:counterEnabled | setCounterEnabled(boolean) | 设置是否开启计数器 |
| app:counterMaxLength | setCounterMaxLength(int) | 设置计数器的最大长度（超过并不影响输入） |
| app:passwordToggleEnabled | setPasswordVisibilityToggleEnabled(boolean) | 设置是否开启密码可见开关(EditText必须为password类型才起作用) |
| app:passwordToggleDrawable | setPasswordVisibilityToggleDrawable(Drawable) | 设置密码可见开关的图标 |
效果展示
常用功能效果图
进阶用法
自定义hint样式
当我们通过setHint（）之后，TextInputLayout会给浮标设置一个默认的样式，默认颜色是 color 中的 colorAccent 如图所示：
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="colorPrimary">#3F51B5</color>
<color name="colorPrimaryDark">#303F9F</color>
<color name="colorAccent">#FF4081</color>
</resources>
默认样式
那我们要想改个样式该怎么整呢？
“直接去color中改变colorAccent的颜色啊！”有同学该说了
那样确实可以做到改变颜色，但是这样会影响所有控件的默认颜色，就造成了牵一发而动全身的效果。很明显这不是一个逼格高的程序员解决问题的思路。我们作为一个高逼格的程序员，我们首先想到的肯定是自定义啊。
逼格要高
有了思路去找方法，TextInputLayout中恰好给我们提供了设置浮标样式的方法： setHintTextAppearance（int RexId）
里面让我们传一个资源文件的ID，
这里我们在style.xml下自定义一个：
<!-- 设置提示文字样式 -->
<style name="hintAppearance" parent="TextAppearance.AppCompat">
<item name="android:textSize">24sp</item>
<item name="android:textColor">#08ff00</item>
</style>
然后我们把这个资源文件id传入刚才的方法中，就能实现自定义浮标样式了，惊不惊喜、意不意外。
自定义浮标样式
自定义error样式
有了自定义浮标样式的经验，相信自定义error样式也难不到我们。
同样的我们在style.xml下自定义error样式：
<!-- 设置错误提示文字样式 -->
<style name="errorAppearance" parent="TextAppearance.AppCompat">
<item name="android:textSize">16sp</item>
<item name="android:textColor">#001aff</item>
</style>
然后通过setErrorTextAppearance（int ResId）进行设置即可。
自定义错误样式
自定义超出长度样式
又是自定义样式，那我们还按照以上步骤，继续走一遍。
先自定义xml样式
<!-- 设置超出长度提示文字样式 -->
<style name="overAppearance" parent="TextAppearance.AppCompat">
<item name="android:textSize">16sp</item>
<item name="android:textColor">#001aff</item>
</style>
然后再通过set方法设置，那么问题来了，我们找不到设置 ‘超出长度提示文字样式’ 的方法了，那我们要怎么设置啊！
别着急，通过翻阅源码，我找到了这个东西
mCounterTextAppearance = a.getResourceId(
R.styleable.TextInputLayout_counterTextAppearance, 0);
mCounterOverflowTextAppearance = a.getResourceId(
R.styleable.TextInputLayout_counterOverflowTextAppearance, 0);
再点进去我看到了这个
很明显这不就是TextInputLayout的所有xml属性吗
那我们就可以通过xml去设置 ‘计数文字’ 和 ‘超出长度’ 的样式了
app:counterTextAppearance="@style/overAppearance"
app:counterOverflowTextAppearance="@style/errorAppearance"
自定义提示样式
自定义密码图标
有了上面的自定义样式经验，相信这个也难不倒我们，先撸一个xml，因为是图标，所以我们要写一个select
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/pwd_close" android:state_checked="false" android:state_pressed="false" />
<item android:drawable="@drawable/pwd_open" android:state_checked="false" android:state_pressed="true" />
<item android:drawable="@drawable/pwd_open" android:state_checked="true" android:state_pressed="false" />
<item android:drawable="@drawable/pwd_close" android:state_checked="true" android:state_pressed="true" />
</selector>
然后我们通过setPasswordVisibilityToggleDrawable（int ResId）来设置
就能达到换图标的效果了。
自定义图标
小结
| 属性名 | 对应方法 | 作用 |
|---|---|---|
| app:hintTextAppearance | setHintTextAppearance(int ResId) | 设置浮标样式 |
| app:errorTextAppearance | setErrorTextAppearance(int ResId) | 设置错误样式 |
| app:counterTextAppearance | null | 设置计数样式 |
| app:counterTextAppearance | null | 设置超出计数样式 |
| app:passwordToggleDrawable | setPasswordVisibilityToggleDrawable(int ResId) | 设置自定义图标 |
总结
TextInputLayout的讲解到此结束，相信这些知识足以应付开发中的大部分需求了，大家也可以根据这些东西自己写个登录页面什么的练练手。
我后续也会继续整理MD别的控件的文章，希望大家继续关注。
网友评论