國際慣例先放圖

效果展示圖

（有點(diǎn)丑，湊合著看吧）

寫在開頭

對于MD風(fēng)格相信大家都不陌生了，也有很多的介紹MD的文章，那為什么我還要寫類似的文章呢？

一方面是為了學(xué)習(xí)源碼，學(xué)習(xí)大牛們的代碼風(fēng)格；

另一方面是為了復(fù)習(xí)以前的知識（因?yàn)榘l(fā)現(xiàn)以前記得再清楚，用的時(shí)候還是會(huì)忘的。。。忘的。。。的。。。所以還是記錄一下，忘的時(shí)候能翻一翻。）

裝B.jpg

（咳咳。。。開玩笑了，我是一個(gè)正經(jīng)的人。。。）

不留碼的司機(jī)不是老司機(jī)

目錄

• 簡單用法
  1.常用屬性和對應(yīng)方法
  2.效果展示

• 進(jìn)階用法
  1.自定義hint樣式
  2.自定義error樣式
  3.自定義超出長度樣式
  4.自定義密碼圖標(biāo)
  5.效果展示

簡單用法

常用屬性和對應(yīng)方法

效果展示

常用功能效果圖

進(jìn)階用法

自定義hint樣式

當(dāng)我們通過setHint（）之后，TextInputLayout會(huì)給浮標(biāo)設(shè)置一個(gè)默認(rèn)的樣式，默認(rèn)顏色是 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>

默認(rèn)樣式

那我們要想改個(gè)樣式該怎么整呢？
“直接去color中改變colorAccent的顏色??！”有同學(xué)該說了
那樣確實(shí)可以做到改變顏色，但是這樣會(huì)影響所有控件的默認(rèn)顏色，就造成了牽一發(fā)而動(dòng)全身的效果。很明顯這不是一個(gè)逼格高的程序員解決問題的思路。我們作為一個(gè)高逼格的程序員，我們首先想到的肯定是自定義啊。

逼格要高

有了思路去找方法，TextInputLayout中恰好給我們提供了設(shè)置浮標(biāo)樣式的方法： setHintTextAppearance（int RexId）
里面讓我們傳一個(gè)資源文件的ID，
這里我們在style.xml下自定義一個(gè)：

 <!-- 設(shè)置提示文字樣式 -->
    <style name="hintAppearance" parent="TextAppearance.AppCompat">
        <item name="android:textSize">24sp</item>
        <item name="android:textColor">#08ff00</item>
    </style>

然后我們把這個(gè)資源文件id傳入剛才的方法中，就能實(shí)現(xiàn)自定義浮標(biāo)樣式了，驚不驚喜、意不意外。

自定義浮標(biāo)樣式

自定義error樣式

有了自定義浮標(biāo)樣式的經(jīng)驗(yàn)，相信自定義error樣式也難不到我們。
同樣的我們在style.xml下自定義error樣式：

 <!-- 設(shè)置錯(cuò)誤提示文字樣式 -->
    <style name="errorAppearance" parent="TextAppearance.AppCompat">
        <item name="android:textSize">16sp</item>
        <item name="android:textColor">#001aff</item>
    </style>

然后通過setErrorTextAppearance（int ResId）進(jìn)行設(shè)置即可。

自定義錯(cuò)誤樣式

自定義超出長度樣式

又是自定義樣式，那我們還按照以上步驟，繼續(xù)走一遍。
先自定義xml樣式

<!-- 設(shè)置超出長度提示文字樣式 -->
    <style name="overAppearance" parent="TextAppearance.AppCompat">
        <item name="android:textSize">16sp</item>
        <item name="android:textColor">#001aff</item>
    </style>

然后再通過set方法設(shè)置，那么問題來了，我們找不到設(shè)置 ‘超出長度提示文字樣式’ 的方法了，那我們要怎么設(shè)置啊！

別著急，通過翻閱源碼，我找到了這個(gè)東西

 mCounterTextAppearance = a.getResourceId(
                R.styleable.TextInputLayout_counterTextAppearance, 0);
       
 mCounterOverflowTextAppearance = a.getResourceId(
                R.styleable.TextInputLayout_counterOverflowTextAppearance, 0);

再點(diǎn)進(jìn)去我看到了這個(gè)

很明顯這不就是TextInputLayout的所有xml屬性嗎
那我們就可以通過xml去設(shè)置 ‘計(jì)數(shù)文字’ 和 ‘超出長度’ 的樣式了

        app:counterTextAppearance="@style/overAppearance"
        app:counterOverflowTextAppearance="@style/errorAppearance"

自定義提示樣式

自定義密碼圖標(biāo)

有了上面的自定義樣式經(jīng)驗(yàn)，相信這個(gè)也難不倒我們，先擼一個(gè)xml，因?yàn)槭菆D標(biāo)，所以我們要寫一個(gè)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）來設(shè)置
就能達(dá)到換圖標(biāo)的效果了。

自定義圖標(biāo)

小結(jié)

不留碼的司機(jī)不是老司機(jī)

總結(jié)

TextInputLayout的講解到此結(jié)束，相信這些知識足以應(yīng)付開發(fā)中的大部分需求了，大家也可以根據(jù)這些東西自己寫個(gè)登錄頁面什么的練練手。
我后續(xù)也會(huì)繼續(xù)整理MD別的控件的文章，希望大家繼續(xù)關(guān)注。