Android Kotlin 基本概念 02.2：新增使用者互動功能

本程式碼研究室是 Android Kotlin 基礎課程的一部分。使用程式碼研究室逐步完成程式碼課程後，您將能充分發揮本課程的潛能。所有課程程式碼研究室清單均列於 Android Kotlin 基礎程式碼研究室到達網頁。

這些程式碼研究室是 Android Kotlin 基礎課程的一部分。使用程式碼研究室逐步完成程式碼課程後，您將能充分發揮本課程的潛能。

本系列的程式碼研究室如下：

• 2.1 使用版面配置編輯器進行線性版面配置
• 2.2 新增使用者互動
• 2.3 使用版面配置編輯器限制版面配置
• 2.4 資料繫結基本概念

須知事項

• 在 Kotlin 中建立基本 Android 應用程式。
• 在模擬器或裝置上執行 Android 應用程式。
• 使用 Android Studio 的「版面配置編輯器」建立線性版面配置。
• 建立使用 LinearLayout、TextView、ScrollView 的簡易應用程式，以及一個包含點擊處理常式的按鈕。

課程內容

• 如何使用 EditText 資料檢視取得使用者輸入內容。
• 如何使用 EditText 檢視畫面中的文字將文字設定為 TextView 檢視。
• 如何與 View 和 ViewGroup 搭配運作。
• 如何變更View的顯示設定。

執行步驟

• 從先前的程式碼研究室，將互動功能新增至 aboutMe 應用程式。
• 新增 EditText，讓使用者可以輸入文字。
• 新增 Button 並實作其點擊處理常式。

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

在這項工作中，您可以加入 EditText 輸入欄位，讓使用者輸入暱稱。

步驟 1：開始使用

1. 如果您尚未安裝先前的程式碼研究室中的關於 MeMe 應用程式，請下載範例程式碼 AboutMeInteractive-Starter。這與您先前在程式碼研究室中所建立的程式碼相同。
2. 在 Android Studio 中開啟關於 MeInteractive-Starter 專案。
3. 執行應用程式。你會看到名稱文字檢視、星號圖片和大型文字片段。
   
   
   
   請注意，使用者無法變更任何文字。

當使用者能與應用程式互動 (例如，可輸入文字) 時，應用程式就會變得更加有趣。為了接受文字輸入，Android 提供的使用者介面 (UI) 小工具稱為編輯文字，您使用 EditText (TextView 的子類別) 定義編輯文字。編輯文字可讓使用者輸入及修改文字，如下方的螢幕截圖所示。

步驟 2：新增 EditText

1. 在 Android Studio 中，開啟「設計」分頁中的 activity_main.xml 版面配置檔案。
2. 在「Palette」窗格中，按一下 [Text]。
   
   
   
   Ab TextView 是 TextView，顯示在「Palette」窗格中的文字元素清單頂端。Ab TextView 下方有多個 EditText 視圖。
   
   在「Palette」窗格中，請注意 TextView 的圖示如何顯示字母 Ab 及無意義的字母。不過，EditText 圖示會顯示底線為 Ab。低分表示視圖可以編輯。
   
   Android 會針對每項 EditText 屬性設定不同的屬性，然後顯示適當的軟式輸入方法 (例如螢幕小鍵盤)。
3. 將「PlainText」編輯文字拖曳到「元件樹狀結構」中，然後將文字放置在 name_text 下方和 star_image 的上方。
   
   
   
4. 請在「EditText」檢視畫面中使用「屬性」窗格設定下列屬性，

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

5. 執行你的應用程式。在星號圖片上方，你可以看到編輯文字，其中有預設文字「Name」(名稱)。
   
   
   

在這項工作中，您可以透過新增提示、變更文字對齊方式、將樣式變更為 NameStyle，以及設定輸入類型，為 EditText 視圖設定樣式。

步驟 1：新增提示文字

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

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

提示：建議您在每個 EditText 視圖中顯示提示，協助使用者瞭解可以編輯的欄位有哪些輸入內容。

2. 使用「屬性」窗格，將下列屬性設為 EditText 資料檢視：

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

3. 在「屬性」窗格中，移除 text 屬性的 Name 值。text 屬性值必須為空白，這樣才會顯示提示。

步驟 2：設定 typeType 屬性

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

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

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

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

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

1. 針對 nickname_edit 編輯文字，將 inputType 屬性設為 textPersonName。
2. 在「元件樹狀結構」窗格中查看 autoFillHints 警告。此警告不適用於此應用程式，且不在此程式碼研究室的範圍內，因此您可以忽略此警告。(如要進一步瞭解自動填入功能，請參閱最佳化應用程式的自動填入功能)。
   
3. 在「屬性」窗格中，驗證 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 是使用者介面元素，可讓使用者輕觸以執行動作。按鈕可以包含文字、圖示，或同時包含文字和圖示。

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

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

1. 將按鈕從「Palette」窗格拖曳至「元件樹狀結構」。請將按鈕放在「nickname_edit」編輯文字的下方。
   
   
2. 建立名為「done」的新字串資源。將字串的值設為 Done。

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

3. 使用「屬性」窗格，針對新增的 Button 資料檢視設定下列屬性：

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

layout_gravity 屬性以視圖的上層版面配置「LinearLayout」為中心。

4. 將樣式變更為 Widget.AppCompat.Button.Colored，這是 Android 提供的預先定義樣式之一。您可以從下拉式選單或「資源」視窗中選取樣式。
   
   
   
   這個樣式會將按鈕顏色變更為強調色 (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：設定「完成」按鈕樣式

1. 在「屬性」窗格中選取 [Layout_Margin > Top]，即可新增頂端邊界。請將上方邊界設為 layout_margin，如 dimens.xml 檔案所定義。
   
   
   
2. 使用下拉式選單將 fontFamily 屬性設為 roboto。
   
   
   
3. 切換至 [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：變更顏色資源

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

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

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

檔案編輯器左側邊緣會顯示與 HEX 代碼相對應的顏色。

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

2. 執行你的應用程式。你會在編輯文字下方看到樣式「DONE」按鈕。
   
   
   

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

步驟 1：為暱稱新增 TextView

1. 將文字檢視從「面板」窗格拖曳至「元件樹狀結構」。請將文字檢視放在 done_button 下方 (star_image) 上方。
   
   

2. 使用「屬性」窗格，為新的 TextView 資料檢視設定下列屬性：

屬性	值
id	nickname_text
style	NameStyle
textAlignment	(中央)

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

您可以使用 visibility 屬性來在應用程式中顯示或隱藏檢視。這項屬性會使用下列三個值：

• visible：可查看的檢視畫面。
• Invisible：隱藏視圖，但檢視畫面仍會佔用版面配置的空間。
• gone：隱藏視圖，而且不會佔用版面配置中的任何空格。

1. 在「屬性」窗格中，將 nickname_text 文字檢視的 visibility 設為 gone，因為您不希望應用程式一開始顯示這個文字檢視。
   
   
   
   請注意，當您在「屬性」面板中變更屬性時，nickname_text 視圖會從設計編輯器中消失。版面配置在版面配置預覽中會隱藏。
2. 將 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：新增點擊接聽器

1. 在 Android Studio 的 java 資料夾中，開啟 MainActivity.kt 檔案。
2. 在 MainActivity.kt 的 MainActivity 類別中，新增名為 addNickname 的函式。加入名為「view」的輸入參數 (類型：View)。view 參數是呼叫函式的 View。在這種情況下，view 是您 [DONE] 按鈕的執行個體。

private fun addNickname(view: View) {
}

3. 在 addNickname 函式內部使用 findViewById()，取得 nickname_edit 編輯文字和 nickname_text 文字檢視的參照。

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

4. 將 nicknameTextView 文字檢視中的文字設定為使用者在 editText 中輸入的文字，以取得 text 屬性中的文字。

nicknameTextView.text = editText.text

5. 如要隱藏暱稱「EditText」檢視畫面，請將 editText 的「visibility」屬性設為 View.GONE。

在先前的工作中，您使用版面配置編輯器變更 visibility 屬性。您同樣可以透過程式執行相同操作

editText.visibility = View.GONE

6. 將 visibility 屬性設為 View.GONE，即可隱藏 [DONE] 按鈕。您已經將按鈕參照為函式的輸入參數 view。

view.visibility = View.GONE

7. 在 addNickname 函式結尾，將暱稱 TextView 視圖的 visibility 屬性設為 View.VISIBLE 即可顯示。

nicknameTextView.visibility = View.VISIBLE

步驟 2：將點擊接聽器附加到 DONE 按鈕

您現已建立函式，可定義輕觸 [DONE] 按鈕時要執行的動作。您必須將函式附加至 Button 檢視表。

1. 在 MainActivity.kt 中，在 onCreate() 函式結尾，取得 DONE Button 檢視表的參照。使用 findViewById() 函式並呼叫 setOnClickListener。傳入點擊監聽器函式 addNickname()。

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

在上述程式碼中，it 是指 done_button，這是以引數形式傳送的視圖。

2. 執行應用程式、輸入暱稱，然後輕觸 [完成] 按鈕。請注意，編輯文字與按鈕會由暱稱文字檢視取代。

請注意，即使使用者輕觸 [完成] 按鈕，鍵盤仍會顯示。這是系統預設的行為。

步驟 3：隱藏鍵盤

在這個步驟中，您可以新增程式碼，在使用者輕觸 [DONE] 按鈕後隱藏鍵盤。

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

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

2. 再次執行應用程式。請注意，輕觸 [完成] 後，鍵盤就會隱藏。

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

在這項工作中，您將在點擊文字檢視中加入點擊接聽器。點擊接聽器會隱藏暱稱的文字檢視、顯示編輯文字，並顯示「完成」按鈕。

步驟 1：新增點擊接聽器

1. 在 MainActivity 中，新增暱稱清單函式 (名稱為「updateNickname(view: View)」)，用於暱稱暱稱檢視。

private fun updateNickname (view: View) {
}

2. 在 updateNickname 函式中，取得 nickname_edit 編輯文字的參照，並取得 [DONE] 按鈕的參照。方法是使用 findViewById() 方法。

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

3. 在 updateNickname 函式結尾，加入程式碼以顯示編輯文字、顯示 [完成] 按鈕，並隱藏文字檢視。

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

4. 在 MainActivity.kt 中，在 onCreate() 函式結尾，呼叫 nickname_text 文字檢視上的 setOnClickListener。傳入點擊監聽器函式的參照，也就是 updateNickname()。

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

5. 執行您的應用程式。輸入暱稱，然後輕觸 [完成] 按鈕，然後輕觸暱稱「TextView」檢視模式。暱稱檢視消失後，即可編輯編輯文字和 [完成] 按鈕。
   
   
   

請注意，根據預設，EditText 檢視不會聚焦，且鍵盤未顯示。使用者很難判斷暱稱文字的可點擊區域是可點擊的。在下一個工作中，您可以將焦點和樣式新增到暱稱文字檢視。

步驟 2：將焦點移至 EditText 檢視模式，並顯示鍵盤

1. 在 updateNickname 函式結尾，將焦點設為 EditText 視圖。請使用 requestFocus() 方法。

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

2. 在 updateNickname 函式結尾，加入程式碼即可顯示鍵盤。

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

步驟 3：為「TextView」檢視模式新增背景顏色

1. 將 nickname_text 文字檢視的背景顏色設為 @color/colorAccent，然後加上底部邊框間距 @dimen/small_padding。這些異動將對使用者顯示暱稱文字檢視的可點擊提示。

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

2. 執行最終版應用程式。編輯文字會聚焦，編輯文字會顯示暱稱，以及設定暱稱文字檢視樣式。

現在，您可以向好友顯示互動式的 MeMe 應用程式！

Android Studio 專案：關於 MeInteractive

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

點擊接聽器

• 只要在其中加入點擊事件監聽器，即可讓 View 回應。
• 定義點擊接聽器的函式會收到獲得點擊的 View。

您可透過以下兩種方法之一，將點擊監聽器函式附加到 View：

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

Udacity 課程：

• 使用 Kotlin 開發 Android 應用程式

Android 開發人員說明文件：

• 透過版面配置編輯器建立 UI
• Button
• EditText
• 輸入類型
• 處理鍵盤輸入
• 樣式與主題

這個部分會列出在代碼研究室中，受老師主導的課程作業的可能學生作業。由老師自行決定要執行下列動作：

• 視需要指派家庭作業。
• 告知學生如何提交家庭作業。
• 批改家庭作業。

老師可視需要使用這些建議，並視情況指派其他合適的家庭作業。

如果您是自行操作本程式碼研究室，歡迎透過這些家庭作業來測試自己的知識。

回答這些問題

第 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 基礎程式碼程式碼到達網頁。