如何使用EditText(kotlin)

情境

如果想要讓使用者輸入一些文字，並且讓使用者能繼續修改或刪除的介面，又或者可以使用者輸入密碼並且顯示隱藏，EditText是一個很適合的元件。

說明

EditText可以在你的程式內讓使用者輸入一些訊息，可以以單行或多行的模式顯示，點擊輸入框的時候，系統會自動跳出鍵盤讓使用者進行輸入，它擁有一些內建的功能，例如長按會跳出系統內建的複製、剪下或貼上等功能，也可以讓使用者進行移動位置來編輯，是一個非常強大的內建元件。

程式碼解說

方法一

你可以直接在程式碼內宣告，只要給定當前的 Layout id，取得Layout的實體，就可以透過new的方式把一個EditText加到目前的Activtiy了。

MainActivity 內新增不需再 XML 內宣告。

class MainActivity : AppCompatActivity() {  
  
    override fun onCreate(savedInstanceState: Bundle?) {  
        super.onCreate(savedInstanceState)  
        setContentView(R.layout.activity_main)  
        val editText = EditText(this)  
        container.addView(editText)  
    }  
}

就會看到以下的畫面。

方法二

當然這樣的方式比較不推薦，因為佈局會變得難以控制，加上如果元件一多，實際上在管理會很不方便，所以比較好的做法是寫在XML內。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.givemepass.edittextdemo.MainActivity">

    <EditText
        android:background="@android:drawable/edit_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
</RelativeLayout>

這樣也可以完成如下圖的畫面，基本上跟用程式碼建置是相同的，在這邊多加了一個 background 的參數，可以設定EditText的外框，這邊選用android內建的外框，因此 style 會隨著 android 版本不同而有不一樣的外觀。

功能參數說明

hint 提示
你可以使用 android:hint 的方式來提示使用者該輸入哪類型的資料，當使用者輸入一個以上的文字就會消失。

<?xml version="1.0" encoding="utf-8"?>  
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
 xmlns:tools="http://schemas.android.com/tools"  
 android:id="@+id/activity_main"  
 android:layout_width="match_parent"  
 android:layout_height="match_parent"  
 tools:context=".MainActivity">  

 <EditText android:hint="請輸入名字"  
  android:background="@android:drawable/edit_text"  
  android:layout_width="wrap_content"  
  android:layout_height="wrap_content"/>  
</RelativeLayout>

android:inputType 可以讓你選擇使用者能夠輸入甚麼樣的資料，取幾個比較常用的來說明。

android:inputType="text"：任何鍵盤上的字都可以。

<EditText  
 android:hint="請輸入名字"  
 android:inputType="text"  
 android:background="@android:drawable/edit_text"  
 android:layout_width="wrap_content"  
 android:layout_height="wrap_content"/>

`android:inputType="number"`: 只能數字。

<EditText  
 android:hint="請輸入數字"  
 android:inputType="number"  
 android:background="@android:drawable/edit_text"  
 android:layout_width="wrap_content"  
 android:layout_height="wrap_content"/>

你會看到鍵盤上只跳出數字讓你輸入。

android:inputType="textPassword": 輸入密碼。

<EditText  
 android:hint="請輸入密碼"  
 android:inputType="textPassword"  
 android:background="@android:drawable/edit_text"  
 android:layout_width="wrap_content"  
 android:layout_height="wrap_content"/>

你會看到輸入完的文字過沒多久就被遮蔽。

android:inputType="textCapSentences|textPassword"：你也可以把效果用 | 符號串起來。

<EditText  
 android:hint="請輸入密碼"  
 android:inputType="textCapSentences｜textPassword"  
 android:background="@android:drawable/edit_text"  
 android:layout_width="wrap_content"  
 android:layout_height="wrap_content"/>

android:imeOptions:可以讓你輸入文字完, 鍵盤出現某些選項的按鈕。
你可以看到 Android Studio 出現很多選項。

例如 ActionSend。

<EditText
 android:hint="請輸入密碼"
 android:imeOptions="actionSend"
 android:background="@android:drawable/edit_text"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"/>

而有些手機鍵盤是該手機廠商客製的，並不會顯示Send的按鈕，沒關係你可以切換到 landscape 的模式，它就會出現在EditText的旁邊，如以下的畫面。

當然你也可以指定上面出現的字是什麼，只要透過 android:imeActionLabel 這個屬性就可以設定。

<EditText
 android:imeActionLabel="launch"
 android:hint="請輸入密碼"
 android:imeOptions="actionSend"
 android:background="@android:drawable/edit_text"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"/>

一樣如果手機廠商客製化的鍵盤沒有 Lanch 按鈕，可以切到 landscape 的模式去看就會出現下圖。

如果你指定了 android:imeOptions 屬性，那麼就可以對它設定 Listener 如下面的範例，首先對 xml 的 EditText 指定 ID。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:tools="http://schemas.android.com/tools"
 android:id="@+id/activity_main"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:paddingBottom="@dimen/activity_vertical_margin"
 android:paddingLeft="@dimen/activity_horizontal_margin"
 android:paddingRight="@dimen/activity_horizontal_margin"
 android:paddingTop="@dimen/activity_vertical_margin"
 tools:context="com.example.givemepass.edittextdemo.MainActivity">

 <EditText
  android:id="@+id/password"
  android:imeActionLabel="launch"
  android:hint="請輸入密碼"
  android:imeOptions="actionSend"
  android:background="@android:drawable/edit_text"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content" />
</RelativeLayout>

再從MainActivity內將元件設定事件，事件的id可以參照下方連結去偵測，
https://developer.android.com/reference/android/view/inputmethod/EditorInfo.html
例如我設定為 actionSend 那麼 ID 就是 EditorInfo.IME_ACTION_SEND。

class MainActivity : AppCompatActivity() {  
 override fun onCreate(savedInstanceState: Bundle?) {  
  super.onCreate(savedInstanceState)  
  setContentView(R.layout.activity_main)  
  password.setOnEditorActionListener { _, actionId, _ ->  
   var handled = false  
   if (actionId == EditorInfo.IME_ACTION_SEND) {  
    Toast.makeText(this@MainActivity, "send", Toast.LENGTH_SHORT).show()  
    handled = true  
   }  
   handled  
  }  
 }  
}

你就會看到下圖按下 launch 就跳出 Toast。

假設你有多個 EditText，你可以透過 android:imeOptions="actionNext"，按下一個來達到自動去尋找下一個 EditText。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:tools="http://schemas.android.com/tools"
 android:orientation="vertical"
 android:id="@+id/activity_main"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:paddingBottom="@dimen/activity_vertical_margin"
 android:paddingLeft="@dimen/activity_horizontal_margin"
 android:paddingRight="@dimen/activity_horizontal_margin"
 android:paddingTop="@dimen/activity_vertical_margin"
 tools:context="com.example.givemepass.edittextdemo.MainActivity">
 <EditText
  android:id="@+id/name"
  android:hint="請輸入名字"
  android:imeOptions="actionNext"
  android:background="@android:drawable/edit_text"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content" />
 <EditText
  android:id="@+id/password"
  android:imeActionLabel="launch"
  android:hint="請輸入密碼"
  android:imeOptions="actionSend"
  android:background="@android:drawable/edit_text"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content" />
</LinearLayout>

就會看到如下圖所操作，直接跳到下一格。

除了這些功能以外，Android 還提供另外一個方便的元件叫做 AutoCompleteTextView，可以參考如何使用AutoCompleteTextView(自動提示)，以上就是一個簡單的EditText操作。

GiveMePasS's Android惡補筆記

搜尋此網誌

如何使用EditText(kotlin)

情境

說明

程式碼解說

方法一

方法二

功能參數說明