天天看點

TextInputLayout的使用與實作

TextInputLayout的使用

在Gradle的依賴中添加上com.android.support:design:23.0.0,其中23版本根據編譯的android版本來調整對應版本即可

TextInputLayout的使用與實作

gradle配置檔案

在對應的Layout檔案中使用TextInputLayout将EditText控件包裹,并且在EditText中設定hint屬性即可,在這個父ViewGroup中,隻能有一個EditText

TextInputLayout的使用與實作

Layout配置檔案

TextInputLayout效果

在兩個輸入框切換點選切換的時候,EditText中的文本會有動畫的方式飛向左上角。

TextInputLayout的使用與實作

TextInputLayout效果

TextInputLayout動畫實作原理

原本以為在點選輸入框的時候,會是在EditText的Focus改變的時候,開始執行動畫,結果發現是在整個TextInputLayout的背景色Drawable發生改變的時候,才會開始執行動畫

在refreshDrawableState函數中,會開始執行相應的動畫,而該函數是在更新View的Selector背景的時候會被調用

TextInputLayout的使用與實作

refreshDrawableState

而在updateLableVisibility函數中,會判斷目前EditText中是否有文字或者擷取到焦點,如果有的話,則開始執行expandHint(展開文本)或者collapseHint(收起文本)動畫

TextInputLayout的使用與實作

updateLableVisibility

在expandHint函數中,會将目前的動畫停掉,在判斷是否有動畫,如果需要有動畫的話,則開始從1-0的動畫

TextInputLayout的使用與實作

expandHint

在animateToExpansionFraction函數中會判斷目前Animator值是否和目标值一樣,如果一樣的話,則不用做動畫了,否則則會使用ObjectAnimator設定200ms的時間,以0-1或者1-0的速度進行變化,而在進度回調的時候,會使用mCollapsingTextHelper來更新目前變化的值

TextInputLayout的使用與實作

animateToExpansionFraction

CollapsingTextHelper在這個類中,儲存了目前Animation執行的到的狀态,比如說目前繪制的hint文案的位置(x,y),畫筆的位置和顔色,目前變化的值(0-1中間的值)等等。

而在setExpansionFraction中,會根據目前的值和目标值計算出來要繪制的位置,以及顔色等,最後用ViewCompat的postInvalidateOnAnimation重繪View

TextInputLayout的使用與實作

setExpansionFraction

而在TextInputLayout中的onLayout中,會計算出EditText的位置,并且更新CollapsingTextHelper中矩形的位置

TextInputLayout的使用與實作

TextInputLayout.onLayout

在TextInputLayout中的draw中,會根據onLayout中計算出的CollapsingTextHelper矩形位置以及縮放大小開始繪制文字

TextInputLayout的使用與實作

draw