MaterialDesign系列文章(十)TextInputLayout和TextInputEdittext

筆墨Android發表於2018-05-15

最近看見我的文章被很多人喜歡,這裡先謝謝大家了!感謝你對我寫作的認可。

MaterialDesign系列文章(十)TextInputLayout和TextInputEdittext
我叫 筆墨Android ,希望大家記得!哈哈。。。寫關於MD文章已經有10篇了,堅持真是一個很神奇的東西!不知不覺已經更新10篇文章了。這段時間自己的只是體系得到了提升,還結交到了很多朋友。感覺挺值的!如果我的文章有什麼問題,希望你及時提出來,我會盡早的給你一個交代的!文末我會把我的QQ號奉上的,有問題找我哦!!!

本文知識點:

  • TextInputLayout和TextInputEdittext是什麼?
  • TextInputLayout和TextInputEdittext有哪些屬性?
  • TextInputLayout和TextInputEdittext的常見問題?
  • TextInputLayout和TextInputEdittext的一些常見操作?

先上一張效果圖!最起碼知道講的是什麼?省的你不感興趣,還耽誤時間!!!

MaterialDesign系列文章(十)TextInputLayout和TextInputEdittext

1. TextInputLayout和TextInputEdittext是什麼

關於這個谷歌沒有做過多的解釋,其實我覺得沒有什麼好解釋的!這兩個控制元件都是用於輸入的,TextInputLayout是繼承LinearLayout的,但是內部只能有一個子類,並且這個子類必須是EditText的子類。TextInputEdittext是繼承Edittext的一個控制元件。沒有什麼好說的,有的人說這個控制元件的動畫太難看,我覺得還行吧!不是那麼難看。。。。

2. TextInputLayout和TextInputEdittext有哪些屬性

  • android:hint 提示文字
  • app:counterEnabled 是否新增計數功能,預設是false
  • app:counterMaxLength 最大的輸入數量(如果計數顯示的話,影響顯示)
  • app:errorEnabled 是否有錯誤提示
  • app:errorTextAppearance 設定錯誤提示的文字樣式
  • app:hintAnimationEnabled 是否設定提示文字的動畫
  • app:hintEnabled 是否啟動浮動標籤功能,如果不啟用的話,所有提示性資訊都將在Edittext中顯示
  • app:hintTextAppearance 設定提示性文字的樣式
  • app:passwordToggleContentDescription 該功能是為Talkback或其他無障礙功能提供
  • app:passwordToggleEnabled 是否顯示後面的提示圖片
  • app:passwordToggleDrawable 替換後面的提示圖片
  • app:passwordToggleTint 給後面的提示圖片設定顏色
  • app:passwordToggleTintMode 控制密碼可見開關圖示的背景顏色混合模式
  • app:counterOverflowTextAppearance 設定計算器越位後的文字顏色和大小(通過style進行設定的)
  • app:counterTextAppearance 設定正常情況下的計數器文字顏色和大小(通過style進行設定的)

基本上可以設定的屬性就這麼多,接下來我們開始實踐吧!

3. TextInputLayout和TextInputEdittext的常見問題?

其實每次些簡單使用的時候,我都很糾結,有的控制元件直接寫就可以了,但其實裡面有很多需要注意的,否則你可能需要找好久才能夠找到。

MaterialDesign系列文章(十)TextInputLayout和TextInputEdittext

我先丟擲幾個問題,如果你知道的話,就不用往下看了!!!嘻嘻。。。。

  • 問題1:右邊顯示的圖示為什麼設定了還是顯示不出來?
  • 問題2:右邊的圖示顯示出來了,點選之後圖片怎麼換?
  • 問題3:怎麼設定相應區域的顏色?
  • 問題4:hint屬性,我兩個都設定會怎樣?

先看一張最原始的圖片,是我們什麼也沒有改變的樣子!

MaterialDesign系列文章(十)TextInputLayout和TextInputEdittext

上面的問題你能答上來的話,我相信你對這兩個控制元件已經很熟悉了,這個是我剛開始使用這裡兩個控制元件的時候遇到的問題。我眼神也是不好,經常踩坑。這幾個都是平時專案中經常用來對付產品和UI的。很常見的問題!不是嗎?想好答案了嗎?如果還沒有的話~~~

MaterialDesign系列文章(十)TextInputLayout和TextInputEdittext

問題1:

開始的時候我覺得設定了app:passwordToggleDrawable圖片,但是怎麼也顯示不出來,我想是不是控制元件的問題,於是就各種百度。看API文件也沒有說不顯示怎麼處理啊?忘記當時找的時那片文章了,對不起作者了。當你設定inputType不是密文的時候,後面的圖示時不會顯示的!所以必須新增android:inputType="xxxPassword"千萬別新增錯了,這個是新增在TextInputEditText上的!

問題2:

經歷了問題1之後,我發現圖示是顯示出來了,然後我發現我更換了圖示之後。圖示的點選效果不見了,What?什麼東西啊?為什麼。。。後來接著百度,發現也是可以解決的!怎麼解決呢?要從設定圖片說起了。。。首先設定的圖片應該是一張select的就可以了,但是我執行了一下,圖片點選後沒有顏色的變化,到了美工那邊一定會被打回來的!後來想到,既然圖片可以,那麼設定tint的時候應該也是可以的吧?嘗試了一下還真好使!竊喜。。。

圖片的select(對應下面的select_pwd_visible)

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@mipmap/ic_blur_on_white_48dp" android:state_checked="true" />
    <item android:drawable="@mipmap/ic_blur_off_white_48dp" android:state_checked="false" />
</selector>
複製程式碼

顏色的select(對應下面的select_tint_visible)

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/colorAccent" android:state_checked="true" />
    <item android:color="@color/colorPrimaryDark" android:state_checked="false" />
</selector>
複製程式碼

屬性裡面的設定

    app:passwordToggleTint="@drawable/select_tint_visible"
    app:passwordToggleDrawable="@drawable/select_pwd_visible"
複製程式碼

這裡個人覺得圖片還是用48的比較適合,小於48的我試了效果比較小!還是要看自己喜歡了,如果你非喜歡大的我也沒辦法!

問題3:

我們美工總說,這個粉色不適合我,我喜歡金屬質感的,改去吧!我心想你還不喜歡我呢?我說什麼了。。。

MaterialDesign系列文章(十)TextInputLayout和TextInputEdittext

好吧我去改。。。其實大家注意到沒有凡是有app:xxxAppearance都是可以改變文字狀態的屬性,感覺一般都是,所以一定是從這裡下手!

app:hintTextAppearance="@style/hintAppearance"
<style name="hintAppearance" parent="TextAppearance.AppCompat">
      <item name="android:textSize">14sp</item>
      <item name="android:textColor">#ffee00</item>
</style>
複製程式碼

同樣的原理你可以改變每一處的內容。如果你想改變整體的(這裡指的是整體的顏色,你可以自定義一個主題,千萬別直接去改Base的主題,會被打死的!相信我。。。)

    <style name="你的主題名稱" parent="AppTheme">
        <item name="colorAccent">@color/colorAccent</item>
    </style>
複製程式碼

改成你喜歡的顏色就好了,然後讓你的acivity直接使用這個主題就好了,其實這裡的AppTheme你可以換成你們專案裡的AppTheme就ok了!

問題4:

這個問題我要是說你試試就知道了,你會不會打我啊?當你兩個同時設定的時候,兩個會重疊放在那裡,會導致動畫執行了,橫槓上還有文字!剩下的就自己體會吧!

4. TextInputLayout和TextInputEdittext的一些常見操作?

為什麼我看見別人的TextInputLayout和TextInputEdittext下面有錯誤的提示!

你也可以有的,說一下一般都怎麼做,因為TextInputEdittext是繼承EditText的,所以像一些監聽都是通用的,都是監聽文字變化的時候,如果超出規定的位數的時候就使用setError("XXX");就能顯示相應的錯誤了,當你位數正確的時候,你就可以setError("");設定一下了!有的比較刁鑽的產品說,使用者對了也需要提示,但是顏色需要改變,其實你還是可以用這個API,只是動態的改變一下相應的setErrorTextAppearance(int)也就可以了

特別說明一個問題:上面介紹屬性的時候,最後兩個屬性可能有人會忘,千萬別忘了,要不美工會來找你的!


關於圖片就不再這裡再上了,感興趣的童鞋,可以去我的github上下載一下看,所有的內容我都寫上了,應該不用去下載的!好了今天就到這裡吧!希望各位看官滿意!!!

我的QQ號:753355530 加我的是否對好暗號筆墨Android哦!

相關文章