iT邦幫忙

2022 iThome 鐵人賽

DAY 4
0

EditText

經過昨天的TextViewe跟Button的介紹,應該會有一種感覺,這些UI元件的寫法大概就是寬、高必須給,id通常也會設,再加一些該元件特有的屬性,坐等IDE提醒我(大誤)
EditText一樣是TextView的子類,同樣也是與用戶互動的常用重要元件之一。很常使用在聊天軟體、簡訊、社交軟體發文、帳號密碼登入、備忘錄、行事曆、購物網...等等,總之無所不在。

EditText常用的屬性

  1. hint : 提示字串(一樣建議放入res/strings),讓用戶知道這裡該輸入什麼資訊,是較好的使用者體驗,hint在開始輸入後就會消失。
  2. maxLines : 高度設"wrap_content" 的情況下,若使用者輸入n行,那麼EditText的高度也會跟著拉高。maxLines是限制元件的行高,需注意並不是限制用戶輸入的最大行數,用戶仍然能輸入n行,文本會向上捲動只留下設定的行數,如 : android:maxLines="1"為顯示最新的一行。
  3. inputType : 限制輸入的類型及鍵盤模式,有text、number、time、date...等多種設定值可選,鍵盤就會依照設定的值顯示相對應的鍵盤模式(如:number就會是數字鍵盤而不是英文字母鍵盤),對提升使用者體驗也有好處。官方文件
  4. maxLength : 最多顯示幾個字符,中文、英文字母、數字皆可。
  5. maxEms : 是用來限制元件顯示寬度的,em是排版印刷上的單位,以字母'M'的寬度為基準,設定要讓用戶輸入幾個'M'的寬度,所以輸入數字、英文字母、中文能顯示的字符數量都會不同,並不能真正限制輸入的字符數。有坑注意:只在寬度為"wrap_content"時適用,match_parent跟固定寬度均無法適用
  6. importantForAutofill : IDE常常在EditText的編輯過程中出現黃色警告,建議設置autoFillHint,自動填充提示,這東西就是我們使用app時,若有輸入過的帳戶名、電話、地址等,都會出現的提示框,他好處是可以減少用戶重複輸入訊息的時間及輸入錯誤的情況,可以讓用戶體驗加分。如果不需的話就將android:importantForAutofill="no"加上去,IDE就會收起它的黃牌了。autofill官方文件
   <EditText
        android:id="@+id/editTextInput"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/edittext_hint"
        android:maxLength="12"
        android:maxLines="1"
        android:inputType="text"
        android:importantForAutofill="no"
        android:minHeight="48dp"/>     

在Activity取得輸入的內容,並Toast出來

EditText經常搭配按鈕來對輸入的內容做送出、確認...等等動作。下面以Toast來當例子

  1. 使用getText()方法取得輸入內容,".text"是kotlin的語法糖,語法糖就是友善開發者容易理解或簡化程式碼的語法,所以兩者做的事是一樣的,你也可以寫getText(),IDE會在字底下畫上蚯蚓線提醒可以使用語法糖讓程式碼更簡潔。再調用toString()將內容轉成字符串。
  2. 設置setOnClickListener,按下ok按鈕後彈出訊息泡泡
  //宣告變量與元件連結
    val editTextInput :EditText = findViewById(R.id.editTextInput)
    val btnOk : Button = findViewById(R.id.btnOK)
    
    btnOk.setOnClickListener {
        //取得EditText的內容並叫用toString(),以String的形式賦值給變量inputUsername
        val inputUsername = editTextInput.text.toString()
        //彈出以inputUsername為內容的訊息泡泡
        Toast.makeText(this,inputUsername,Toast.LENGTH_SHORT).show()
        }

EditText官方文檔


註解

註解可分單行註解跟多行註解,使用快捷鍵或直接打出符號也行:

  • Window:
    • 單行快捷鍵ctrl + /
    • 多行快捷鍵ctrl + shift + /
  • Mac:
    • 單行快捷鍵command + /
    • 多行快捷鍵command + shift + /
// 我是單行註解

/*我是多行註解1
* 我是多行註解2
* 我是多行註解3*/

一段程式碼中夾雜這樣的文字解釋叫做註解,IDE在編譯的的時候會忽略它不去編譯,是用來輔助開發者了解這行或這區塊的程式碼什麼意思?在幹嘛?的好東西,尤其記憶力不好的時候,隔沒幾天在看自己寫的程式碼,猶如天書,這時候有註解的話就可以幫助回想,節省時間啊!
多人協作的時候,想了解別人的程式碼或是當個體貼的好夥伴,好的註解是少不了的,正所謂:註解下的好,不怕朋友少。
通常會註解自己獨立一(多)行,或下在完整的一句程式碼後面,個人不建議下在程式碼之中(如下),因為打斷程式碼有礙閱讀,就像講話到一半被插話一樣難受。

 //可以這裡
 Toast.makeText(this,"You click the Alarm ImageButton"/*不報錯,但不推薦*/,Toast.LENGTH_SHORT).show() //可以這裡
 //可以這裡

一天一點點,打家明天見。絕對不是偷懶


上一篇
第3天 UI基礎元件(一) : TextView、Button
下一篇
第5天 UI基礎元件(三) : ImageView
系列文
新手向Android&Kotlin學習紀錄30天30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言