本頁面由 Cloud Translation API 翻譯而成。

Android Kotlin 基礎知識 02.2：加入使用者互動元素

這個程式碼研究室是 Android Kotlin 基礎知識課程的一部分。如果您按部就班完成程式碼研究室，就能充分體驗到本課程的價值。所有課程程式碼研究室都列在 Android Kotlin 基礎知識程式碼研究室到達網頁。

必備知識

在 Kotlin 中建立基本 Android 應用程式。
在模擬器或裝置上執行 Android 應用程式。
使用 Android Studio 的版面配置編輯器建立線性版面配置。
建立簡單的應用程式，使用 LinearLayout、TextView、ScrollView 和含有點擊處理常式的按鈕。

課程內容

如何使用 EditText 檢視區塊取得使用者輸入內容。
如何使用 EditText 檢視區塊中的文字，將文字設定為 TextView 檢視區塊。
如何使用 View 和 ViewGroup。
如何變更 View 的瀏覽權限。

學習內容

為先前程式碼研究室的 AboutMe 應用程式新增互動功能。
新增 EditText，讓使用者輸入文字。
新增 Button 並實作其點按處理常式。

在本程式碼研究室中，您將擴充 AboutMe 應用程式，加入使用者互動功能。您新增了暱稱欄位、「完成」按鈕和文字檢視畫面，用來顯示暱稱。使用者輸入暱稱並輕觸「完成」按鈕後，文字檢視畫面就會更新，顯示輸入的暱稱。使用者可以輕觸文字檢視畫面，再次更新暱稱。

AboutMe 應用程式

在這項工作中，您將新增 EditText 輸入欄位，讓使用者輸入暱稱。

步驟 1：開始使用

如果您沒有先前程式碼研究室的 AboutMe 應用程式，請下載範例程式碼「AboutMeInteractive-Starter」。這與您在先前的程式碼研究室中完成的程式碼相同。
在 Android Studio 中開啟 AboutMeInteractive-Starter 專案。
執行應用程式。您會看到名稱文字檢視區塊、星號圖片，以及捲動檢視區塊中的長段文字。

請注意，使用者無法變更任何文字。

如果使用者可以與應用程式互動 (例如輸入文字)，應用程式會更有趣。如要接受文字輸入，Android 提供名為「編輯文字」的 UI 小工具。您可以使用 EditText (TextView 的子類別) 定義編輯文字。使用者可透過編輯文字輸入內容並修改，如下方螢幕截圖所示。

步驟 2：新增 EditText

在 Android Studio 中，開啟「Design」分頁中的 activity_main.xml 版面配置檔案。
在「Palette」窗格中，按一下「Text」。

「Palette」窗格的文字元素清單頂端會顯示「Ab TextView」，也就是 TextView。「Ab TextView」下方有多個 EditText 檢視畫面。

在「Palette」窗格中，請注意 TextView 的圖示顯示的字母是「Ab」，沒有底線。不過，EditText 圖示會顯示加上底線的 Ab 。底線表示檢視區塊可編輯。

Android 會為每個 EditText 檢視區塊設定不同屬性，系統則會顯示適當的軟體輸入法 (例如螢幕小鍵盤)。
將「PlainText」編輯文字拖曳至「Component Tree」，並放在 name_text 下方和 star_image 上方。
使用「屬性」窗格，在 EditText 檢視區塊中設定下列屬性。

屬性	值
`id`	`nickname_edit`
`layout_width`	`match_parent` (預設)
`layout_height`	`wrap_content` (預設)

執行應用程式。在星號圖片上方，您會看到預設文字為「Name」的編輯文字。

在這項工作中，您要為 EditText 檢視區塊設定樣式，包括新增提示、變更文字對齊方式、將樣式變更為 NameStyle，以及設定輸入類型。

步驟 1：新增提示文字

在 string.xml 檔案中新增提示的字串資源。

<string name="what_is_your_nickname">What is your Nickname?</string>

使用「屬性」窗格，將下列屬性設為 EditText 檢視區塊：

屬性	值
`style`	`NameStyle`
`textAlignment`	(中心)
`hint`	`@string/what_is_your_nickname`

在「屬性」窗格中，從 text 屬性移除 Name 值。text 屬性值必須為空白，系統才會顯示提示。

步驟 2：設定 inputType 屬性

inputType 屬性會指定使用者可在 EditText 檢視畫面中輸入的內容類型。Android 系統會根據設定的輸入類型，顯示適當的輸入欄位和螢幕小鍵盤。

如要查看所有可能的輸入類型，請在「屬性」窗格中，按一下 inputType 欄位，或按一下欄位旁邊的三點圖示 ...。系統會開啟清單，顯示可使用的所有輸入類型，並勾選目前啟用的輸入類型。你可以選取多個輸入類型。

舉例來說，如果是密碼，請使用 textPassword 值。文字欄位會隱藏使用者的輸入內容。

電話號碼請使用 phone 值。系統會顯示數字鍵盤，使用者只能輸入數字。

設定暱稱欄位的輸入類型：

將 nickname_edit 編輯文字的 inputType 屬性設為 textPersonName。
在「Component Tree」窗格中，會看到 autoFillHints 警告。這項警告不適用於這個應用程式，且超出本程式碼研究室的範圍，因此您可以忽略。(如要進一步瞭解自動填入功能，請參閱「針對自動填入功能最佳化應用程式」一文)。
在「屬性」窗格中，確認 EditText 檢視區塊的下列屬性值：

屬性	值
`id`	`nickname_edit`
`layout_width`	`match_parent` (預設)
`layout_height`	`wrap_content` (預設)
`style`	`@style/NameStyle`
`inputType`	`textPersonName`
`hint`	`"@string/what_is_your_nickname"`
`text`	(空白)

Button 是使用者可輕觸以執行動作的 UI 元素。按鈕可包含文字、圖示，或兩者皆有。

在這項工作中，您要新增「完成」按鈕，使用者輸入暱稱後會輕觸這個按鈕。按鈕會將 EditText 檢視畫面換成顯示暱稱的 TextView 檢視畫面。如要更新暱稱，使用者可以輕觸 TextView 檢視畫面。

步驟 1：新增「完成」按鈕

將「Palette」窗格中的按鈕拖曳至「Component Tree」。將按鈕放在 nickname_edit 編輯文字下方。
建立名為 done 的新字串資源。將字串值設為 Done，

<string name="done">Done</string>

使用「屬性」窗格，在新增的 Button 檢視區塊中設定下列屬性：

屬性	值
`id`	`done_button`
`text`	`@string/done`
`layout_gravity`	`center_horizontal`
`layout_width`	`wrap_content`

layout_gravity 屬性會將檢視區塊置中於父項版面配置 LinearLayout 中。

將樣式變更為 Widget.AppCompat.Button.Colored，這是 Android 提供的預先定義樣式之一。您可以從下拉式選單或「Resources」視窗中選取樣式。

這個樣式會將按鈕顏色變更為強調色 colorAccent。重音色定義在 res/values/colors.xml 檔案中。

colors.xml 檔案包含應用程式的預設顏色。您可以根據應用程式需求，在專案中新增顏色資源或變更現有顏色資源。

colors.xml 範例檔案：

<?xml version="1.0" encoding="utf-8"?>
<resources>
   <color name="colorPrimary">#008577</color>
   <color name="colorPrimaryDark">#00574B</color>
   <color name="colorAccent">#D81B60</color>
</resources>

步驟 2：設定「完成」按鈕的樣式

在「屬性」窗格中，依序選取「Layout_Margin」>「Top」，新增上邊界。將上邊界設為 layout_margin，這是在 dimens.xml 檔案中定義。
從下拉式選單中，將 fontFamily 屬性設為 roboto。
切換至「Text」分頁標籤，並驗證新加入按鈕產生的 XML 程式碼。

<Button
   android:id="@+id/done_button"
   style="@style/Widget.AppCompat.Button.Colored"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_gravity="center_horizontal"
   android:layout_marginTop="@dimen/layout_margin"
   android:fontFamily="@font/roboto"
   android:text="@string/done" />

步驟 3：變更顏色資源

在這個步驟中，您會變更按鈕的強調色，使其與活動的應用程式列相符。

開啟 res/values/colors.xml，將 colorAccent 的值變更為 #76bf5e。

<color name="colorAccent">#76bf5e</color>

您可以在檔案編輯器的左側邊界，看到與十六進位顏色代碼對應的顏色。

請注意設計編輯器中的按鈕顏色變化。

執行應用程式。您應該會在編輯文字下方看到已設定樣式的「完成」按鈕。

使用者輸入暱稱並輕觸「完成」按鈕後，暱稱會顯示在 TextView 檢視畫面中。在這項工作中，您要新增具有彩色背景的文字檢視區塊。文字檢視區塊會在 star_image 上方顯示使用者的暱稱。

步驟 1：新增暱稱的 TextView

將文字檢視區塊從「Palette」窗格拖曳至「Component Tree」。將文字檢視區塊放在 done_button 下方和 star_image 上方。
使用「屬性」窗格，為新的 TextView 檢視區塊設定下列屬性：

屬性	值
`id`	`nickname_text`
`style`	`NameStyle`
`textAlignment`	(中心)

步驟 2：變更 TextView 的顯示設定

您可以使用 visibility 屬性顯示或隱藏應用程式中的檢視畫面。這項屬性可使用以下三個值：

visible：檢視畫面會顯示。
Invisible：隱藏檢視區塊，但檢視區塊仍會佔用版面配置空間。
gone：隱藏檢視區塊，且檢視區塊不會佔用版面配置中的任何空間。

在「Attributes」窗格中，將 nickname_text 文字檢視區塊的 visibility 設為 gone，因為您不希望應用程式一開始就顯示這個文字檢視區塊。

請注意，在「Attributes」窗格中變更屬性時，nickname_text 檢視區塊會從設計編輯器中消失。版面配置預覽畫面會隱藏該檢視區塊。
將 nickname_text 檢視區塊的 text 屬性值變更為空字串。

這個 TextView 生成的 XML 程式碼應如下所示：

<TextView
   android:id="@+id/nickname_text"
   style="@style/NameStyle"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:textAlignment="center"
   android:visibility="gone"
   android:text="" />

版面配置預覽畫面應如下所示：

Button 物件 (或任何檢視區塊) 上的點擊處理常式會指定使用者輕觸按鈕 (檢視區塊) 時要執行的動作。處理點擊事件的函式應在 Activity 中實作，該函式會代管含有按鈕 (檢視區塊) 的版面配置。

點擊事件監聽器的格式通常如下，其中傳入的檢視區塊是收到點擊或輕觸事件的檢視區塊。

private fun clickHandlerFunction(viewThatIsClicked: View) {
// Add code to perform the button click event
}

您可以透過兩種方式，將點按事件監聽器函式附加至按鈕點按事件：

在 XML 版面配置中，您可以將 android:onClick 屬性新增至 <Button> 元素。例如：

<Button
   android:id="@+id/done_button"
   android:text="@string/done"
   ...
   android:onClick="clickHandlerFunction"/>

或

您可以在執行階段透過程式輔助方式，在 Activity 的 onCreate() 中呼叫 setOnClickListener，例如：

myButton.setOnClickListener {
   clickHanderFunction(it)
}

在這項工作中，您要以程式輔助方式新增 done_button 的點擊事件監聽器。您會在對應的活動 (即 MainActivity.kt) 中新增點擊事件監聽器。

點按事件監聽器函式 (稱為 addNickname) 會執行下列動作：

從 nickname_edit 編輯文字取得文字。
在 nickname_text 文字檢視區塊中設定文字。
隱藏編輯文字和按鈕。
顯示暱稱 TextView。

步驟 1：新增點擊監聽器

在 Android Studio 的 java 資料夾中，開啟 MainActivity.kt 檔案。
在 MainActivity.kt 的 MainActivity 類別中，新增名為 addNickname 的函式。加入名為 view 的輸入參數，類型為 View。view 參數是函式呼叫的 View。在此情況下，view 會是「完成」按鈕的執行個體。

private fun addNickname(view: View) {
}

在 addNickname 函式中，使用 findViewById() 取得對 nickname_edit 編輯文字和 nickname_text 文字檢視區塊的參照。

val editText = findViewById<EditText>(R.id.nickname_edit)
val nicknameTextView = findViewById<TextView>(R.id.nickname_text)

將 nicknameTextView 文字檢視區塊中的文字設為使用者在 editText 中輸入的文字，並從 text 屬性取得該文字。

nicknameTextView.text = editText.text

將 editText 的 visibility 屬性設為 View.GONE，即可隱藏暱稱 EditText 檢視畫面。

在先前的工作中，您使用 Layout Editor 變更了 visibility 屬性。您可以在這裡以程式輔助方式執行相同操作。

editText.visibility = View.GONE

將 visibility 屬性設為 View.GONE，即可隱藏「完成」按鈕。您已將按鈕的參照做為函式的輸入參數 view。

view.visibility = View.GONE

在 addNickname 函式的結尾，將暱稱 TextView 檢視區塊的 visibility 屬性設為 View.VISIBLE，讓該檢視區塊顯示。

nicknameTextView.visibility = View.VISIBLE

步驟 2：將點擊事件監聽器附加到「完成」按鈕

您現在已有一個函式，可定義輕觸「完成」按鈕時要執行的動作，接下來需要將該函式附加至 Button 檢視區塊。

在 MainActivity.kt 中，於 onCreate() 函式結尾取得「完成」 Button 檢視區塊的參照。使用 findViewById() 函式並呼叫 setOnClickListener。傳遞點按事件監聽器函式 addNickname() 的參照。

findViewById<Button>(R.id.done_button).setOnClickListener {
            addNickname(it)
        }

在上述程式碼中，it 是指 done_button，也就是做為引數傳遞的檢視區塊。

執行應用程式，輸入暱稱，然後輕觸「完成」按鈕。請注意，編輯文字和按鈕會由暱稱文字檢視區塊取代。

請注意，即使使用者輕觸「完成」按鈕，鍵盤仍會顯示。這是預設行為。

步驟 3：隱藏鍵盤

在這個步驟中，您將加入程式碼，讓使用者輕觸「完成」按鈕後隱藏鍵盤。

在 MainActivity.kt 中，於 addNickname() 函式的結尾加入下列程式碼。如要進一步瞭解這段程式碼的運作方式，請參閱 hideSoftInputFromWindow 說明文件。

// Hide the keyboard.
val inputMethodManager = getSystemService(Context.INPUT_METHOD_SERVICE) as InputMethodManager
inputMethodManager.hideSoftInputFromWindow(view.windowToken, 0)

再次執行應用程式。請注意，輕觸「完成」後，鍵盤會隱藏。

使用者輕觸「完成」按鈕後，就無法再變更暱稱。在下一個工作中，您將讓應用程式更具互動性，並新增功能，讓使用者可以更新暱稱。

在這項工作中，您要為暱稱文字檢視區塊新增點擊事件監聽器。點擊事件監聽器會隱藏暱稱文字檢視區塊、顯示編輯文字，以及顯示「完成」按鈕。

步驟 1：新增點擊監聽器

在 MainActivity 中，為暱稱文字檢視區塊新增名為 updateNickname(view: View) 的點按事件監聽器函式。

private fun updateNickname (view: View) {
}

在 updateNickname 函式中，取得對 nickname_edit 編輯文字的參照，並取得對「完成」按鈕的參照。如要執行這項操作，請使用 findViewById() 方法。

val editText = findViewById<EditText>(R.id.nickname_edit)
val doneButton = findViewById<Button>(R.id.done_button)

在 updateNickname 函式的結尾，新增程式碼來顯示編輯文字、顯示「完成」按鈕，並隱藏文字檢視區塊。

editText.visibility = View.VISIBLE
doneButton.visibility = View.VISIBLE
view.visibility = View.GONE

在 MainActivity.kt 中，於 onCreate() 函式結尾，對 nickname_text 文字檢視區塊呼叫 setOnClickListener。傳入點按事件監聽器函式的參照，也就是 updateNickname()。

findViewById<TextView>(R.id.nickname_text).setOnClickListener {
   updateNickname(it)
}

執行應用程式。輸入暱稱，輕觸「完成」按鈕，然後輕觸暱稱 TextView 檢視畫面。暱稱檢視畫面會消失，編輯文字和「完成」按鈕會顯示在畫面上。

請注意，根據預設，EditText 檢視畫面不會有焦點，且鍵盤不會顯示。使用者難以發現暱稱文字檢視區塊可點選。在下一個工作中，您會為暱稱文字檢視區塊新增焦點和樣式。

步驟 2：將焦點設為 EditText 檢視區塊，並顯示鍵盤

在 updateNickname 函式的結尾，將焦點設為 EditText 檢視區塊。請使用 requestFocus() 方法。

// Set the focus to the edit text.
editText.requestFocus()

在 updateNickname 函式的結尾，加入程式碼來顯示鍵盤。

// Show the keyboard.
val imm = getSystemService(Context.INPUT_METHOD_SERVICE) as InputMethodManager
imm.showSoftInput(editText, 0)

步驟 3：為暱稱 TextView 檢視區塊新增背景顏色

將 nickname_text 文字檢視區塊的背景顏色設為 @color/colorAccent，並新增 @dimen/small_padding 的底部邊框間距。這些變更會向使用者提示暱稱文字檢視區塊可點選。

android:background="@color/colorAccent"
android:paddingBottom="@dimen/small_padding"

執行最終應用程式。編輯文字會成為焦點，編輯文字中會顯示暱稱，且暱稱文字檢視區塊會套用樣式。

現在，向朋友展示互動式 AboutMe 應用程式吧！

Android Studio 專案：AboutMeInteractive

Android Studio 的版面配置編輯器工具是視覺化設計編輯器。您可以使用版面配置編輯器，將 UI 元素拖曳至版面配置，建構應用程式的版面配置。
EditText 是一種 UI 元素，可讓使用者輸入及修改文字。
Button 是使用者可輕觸以執行動作的 UI 元素。按鈕可包含文字、圖示，或兩者皆有。

點擊事件監聽器

如要讓任何 View 回應輕觸動作，請為其新增點擊事件監聽器。
定義點按事件監聽器的函式會收到點按的 View。

您可以透過下列任一方式，將點按事件監聽器函式附加至 View：

在 XML 版面配置中，將 android:onClick 屬性新增至 <View> 元素。
以程式輔助方式，在對應的 Activity 中使用 setOnClickListener(View.OnClickListener) 函式。

Udacity 課程：

使用 Kotlin 開發 Android 應用程式

Android 開發人員說明文件：

本節列出的作業可由課程講師指派給學習本程式碼研究室的學員。講師可自由採取以下行動：

視需要指派作業。
告知學員如何繳交作業。
為作業評分。

講師可以視需求使用全部或部分建議內容，也可以自由指派任何其他合適的作業。

如果您是自行學習本程式碼研究室，不妨利用這些作業驗收學習成果。

回答問題

第 1 題

EditText 是何者的子類別？

View
LinearLayout
TextView
Button

第 2 題

在檢視區塊中使用以下哪些 visibility 屬性值，可以隱藏該檢視區塊，且不會占用版面配置中的任何空間？

visible
Invisible
gone
hide

第 3 題

最好不要在 EditText 檢視畫面提供提示，因為提示會導致輸入欄位過於雜亂。下列敘述是否正確？

第 4 題

以下有關 Button 檢視的敘述何者正確？

Button 檢視區塊是檢視區塊群組。
每個螢幕畫面只能有三個 Button 檢視區塊。
Button 檢視區塊具備可點擊屬性；獲得點擊時，附屬的點擊事件監聽器就會執行動作。
Button 是 ImageView 的擴充功能。

開始下一堂課：2.3：使用版面配置編輯器限制版面配置

如要查看本課程其他程式碼研究室的連結，請參閱 Android Kotlin 基礎知識程式碼研究室登陸頁面。

Android Kotlin 基礎知識 02.2：加入使用者互動元素 透過集合功能整理內容 你可以依據偏好儲存及分類內容。

必備知識

課程內容

學習內容

步驟 1：開始使用

步驟 2：新增 EditText

步驟 1：新增提示文字

步驟 2：設定 inputType 屬性

步驟 1：新增「完成」按鈕

步驟 2：設定「完成」按鈕的樣式

步驟 3：變更顏色資源

步驟 1：新增暱稱的 TextView

步驟 2：變更 TextView 的顯示設定

步驟 1：新增點擊監聽器

步驟 2：將點擊事件監聽器附加到「完成」按鈕

步驟 3：隱藏鍵盤

步驟 1：新增點擊監聽器

步驟 2：將焦點設為 EditText 檢視區塊，並顯示鍵盤

步驟 3：為暱稱 TextView 檢視區塊新增背景顏色

回答問題

第 1 題

第 2 題

第 3 題

第 4 題

Android Kotlin 基礎知識 02.2：加入使用者互動元素