1. 程式人生 > >利用TextInputLayout實現hint浮動顯示(一)

利用TextInputLayout實現hint浮動顯示(一)

  • 學習平臺:Android Studio2.2.3(基於win8.1 Pro)
  • ADT:Nexus5
  • API:24
  • 參考書籍:《第一行程式碼》2th edition

有關章節:3.2 常用控制元件的使用方法。

關於hint提示,郭老師的第一版書使用的是EditText的hint,預設有淺色的文字提示,確實比沒有任何提示好。但是我也見過另一種hint,使用者輸入時會自動到輸入框左上角,所以看到3.2節時,我希望有我想要的改變,結果,沒有變化。

我以為新型的hint仍然是EditText的屬性,所以檢視官方文件
瀏覽一遍,沒有找到我需要的內容,所以直接Google:hint Android,知道了這種hint叫floating hint

,但是搜尋到的是一個視訊教程,所以Google 關鍵詞floating hint。找到有關教程Android Material Design Floating Labels for EditText
原來是需要TextInputLayout
下面是我使用TextInputLayout的步驟:
第一步:新增Support Library
1. 在Android Studio中,File–>Project Structure–>app–>Dependencies–新增Library dependency
新增依賴庫
2. 搜尋design,找到com.android.support:design:25.0.1。

第二步:修改佈局檔案
將EditText包含於TextInputLayout內層。
如下:

<android.support.design.widget.TextInputLayout
        android:id="@+id/layout_edit_text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <EditText
            android:id="@+id/edit_text"
            android:layout_width="match_parent"
android:layout_height="wrap_content" android:hint="Type something here" /> </android.support.design.widget.TextInputLayout>

確實,hint到了左上角
這裡寫圖片描述
但是浮動太快,來不及看,以為執行時,hint就直接出現於輸入框左上角了呢!

不過沒有關係,我又添加了一個TextInputLayout。
以下是效果圖
這裡寫圖片描述

以上就是我對EditText的進一步學習。

另外,一點說明,我開始寫部落格,並不是單純地記錄實現某些功能或完成某個專案的步驟,我更是為了積累自己的這個過程,所以相對有些囉嗦。

昨晚新增TextInputLayout時,一直沒有出現我想要的浮動效果,所以就以為自己的程式碼出了問題,又繼續去參考別人的文章,確實找到一篇,如果需要,請看下一篇–《利用TextInputLayout實現hint浮動顯示(二)》。謝謝!