Android Kotlin の基礎 02.2: ユーザー操作を追加する

この Codelab は、Android Kotlin の基礎コースの一部です。このコースを最大限に活用するには、Codelab を順番に進めることをおすすめします。コースのすべての Codelab は、Android Kotlin の基礎の Codelab のランディング ページに一覧表示されています。

これらの Codelab は、Android Kotlin の基礎コースの一部です。このコースを最大限に活用するには、Codelab を順番に進めることをおすすめします。

このシリーズの Codelab は次のとおりです。

• 2.1 Layout Editor を使用した線形レイアウト
• 2.2 ユーザー インタラクティビティを追加する
• 2.3 Layout Editor を使用した制約レイアウト
• 2.4 データ バインディングの基本

前提となる知識

• Kotlin で基本的な Android アプリを作成します。
• エミュレータまたはデバイスで Android アプリを実行する。
• Android Studio の Layout Editor を使用してリニア レイアウトを作成する。
• LinearLayout、TextView、ScrollView、クリック ハンドラ付きのボタンを使用するシンプルなアプリを作成します。

学習内容

• EditText ビューを使用してユーザー入力を取得する方法。
• EditText ビューのテキストを使用して TextView ビューにテキストを設定する方法。
• View と ViewGroup の使用方法。
• View の公開設定を変更する方法。

演習内容

• 以前の Codelab で作成した AboutMe アプリにインタラクティブ機能を追加します。
• ユーザーがテキストを入力できるように EditText を追加します。
• Button を追加して、クリック ハンドラを実装します。

この Codelab では、AboutMe アプリを拡張してユーザー インタラクションを追加します。ニックネーム フィールド、[完了] ボタン、ニックネームを表示するテキスト ビューを追加します。ユーザーがニックネームを入力して [DONE] ボタンをタップすると、テキスト ビューが更新され、入力されたニックネームが表示されます。テキスト ビューをタップすると、ニックネームを再度更新できます。

このタスクでは、ユーザーがニックネームを入力できるように EditText 入力フィールドを追加します。

ステップ 1: 開始する

1. 前の Codelab で作成した AboutMe アプリがまだない場合は、スターター コード AboutMeInteractive-Starter をダウンロードします。これは、前の Codelab で完成させたコードと同じです。
2. Android Studio で AboutMeInteractive-Starter プロジェクトを開きます。
3. アプリを実行します。名前のテキスト ビュー、星の画像、長いテキストのセグメントがスクロール ビューに表示されます。
   
   
   
   ユーザーがテキストを変更できないことに注意してください。

ユーザーがアプリを操作できる（テキストを入力できるなど）と、アプリはより興味深いものになります。テキスト入力を受け付けるために、Android には「編集テキスト」と呼ばれるユーザー インターフェース（UI）ウィジェットが用意されています。TextView のサブクラスである EditText を使用して、編集テキストを定義します。編集テキストを使用すると、ユーザーはテキスト入力を入力および変更できます（下のスクリーンショットを参照）。

ステップ 2: EditText を追加する

1. Android Studio で、[Design] タブの activity_main.xml レイアウト ファイルを開きます。
2. [Palette] ペインで [Text] をクリックします。
   
   
   
   [Ab TextView]（TextView）が、[Palette] ペインのテキスト要素のリストの上部に表示されます。[Ab TextView] の下には、複数の EditText ビューがあります。
   
   [Palette] ペインで、TextView のアイコンに下線なしの文字 Ab が表示されていることを確認してください。ただし、EditText アイコンでは Ab に下線が引かれています。下線は、ビューが編集可能であることを示します。
   
   Android は EditText ビューごとに異なる属性を設定し、システムは適切なソフト入力方法（画面キーボードなど）を表示します。
3. [PlainText] 編集テキストを [Component Tree] にドラッグし、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: inputType 属性を設定する

inputType 属性は、ユーザーが EditText ビューに入力できる入力のタイプを指定します。Android システムは、設定された入力タイプに応じて、適切な入力フィールドと画面キーボードを表示します。

使用可能な入力タイプをすべて表示するには、[属性] ペインで inputType フィールドをクリックするか、フィールドの横にある 3 つのドット ... をクリックします。使用できる入力タイプがすべて表示されたリストが開きます。現在アクティブな入力タイプにはチェックマークが付いています。複数の入力タイプを選択できます。

たとえば、パスワードの場合は textPassword 値を使用します。テキスト フィールドでユーザーの入力が隠されます。

電話番号の場合は、phone 値を使用します。数字キーパッドが表示され、ユーザーは数字のみを入力できます。

ニックネーム フィールドの入力タイプを設定します。

1. nickname_edit 編集テキストの inputType 属性を textPersonName に設定します。
2. [Component Tree] ペインに、autoFillHints の警告が表示されます。この警告はこのアプリには適用されず、この Codelab の範囲外であるため、無視してかまいません。（自動入力について詳しくは、自動入力用にアプリを最適化するをご覧ください）。
   
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 は、ユーザーがタップしてアクションを実行できる UI 要素です。ボタンは、テキスト、アイコン、またはテキストとアイコンの両方で構成できます。

このタスクでは、ユーザーがニックネームを入力した後にタップする [完了] ボタンを追加します。ボタンを押すと、EditText ビューがニックネームを表示する TextView ビューに切り替わります。ニックネームを更新するには、ユーザーが TextView ビューをタップします。

ステップ 1: [完了] ボタンを追加する

1. [Palette] ペインから [Component Tree] にボタンをドラッグします。ボタンを 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 が提供する事前定義されたスタイルの 1 つです。スタイルは、プルダウン メニューまたは [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: [完了] ボタンのスタイルを設定する

1. [属性] ペインで、[Layout_Margin > Top] を選択して上マージンを追加します。上余白を dimens.xml ファイルで定義されている layout_margin に設定します。
   
   
   
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>

ファイル エディタの左の余白に、16 進コードに対応する色が表示されます。

デザイン エディタでボタンの色が変更されていることを確認します。

2. アプリを実行します。編集テキストの下に、スタイルが設定された [完了] ボタンが表示されます。
   
   
   

ユーザーがニックネームを入力して [完了] ボタンをタップすると、ニックネームが TextView ビューに表示されます。このタスクでは、色付きの背景を持つテキストビューを追加します。テキスト ビューには、star_image の上にユーザーのニックネームが表示されます。

ステップ 1: ニックネーム用の TextView を追加する

1. [Palette] ペインから [Component Tree] にテキスト ビューをドラッグします。テキストビューを done_button の下、star_image の上に配置します。
   
   

2. [属性] ペインを使用して、新しい TextView ビューに次の属性を設定します。

属性	値
id	nickname_text
style	NameStyle
textAlignment	（中央）

ステップ 2: TextView の可視性を変更する

アプリでのビューの表示と非表示は、visibility 属性を使用して切り替えることができます。この属性には、次の 3 つの値のいずれかを指定します。

• 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
}

クリック リスナー関数をボタンのクリック イベントにアタッチするには、次の 2 つの方法があります。

• 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 は [完了] ボタンのインスタンスになります。

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 の visibility プロパティを View.GONE に設定して、ニックネームの EditText ビューを非表示にします。

前のタスクでは、レイアウト エディタを使用して visibility プロパティを変更しました。ここでは、同じことをプログラムで行います。

editText.visibility = View.GONE

6. visibility プロパティを View.GONE に設定して、[完了] ボタンを非表示にします。ボタンの参照は、関数の入力パラメータ view としてすでに存在します。

view.visibility = View.GONE

7. addNickname 関数の最後に、ニックネーム TextView ビューの visibility プロパティを View.VISIBLE に設定して、ビューを表示します。

nicknameTextView.visibility = View.VISIBLE

ステップ 2: [DONE] ボタンにクリック リスナーを追加する

[完了] ボタンがタップされたときに実行されるアクションを定義する関数を作成したので、この関数を Button ビューに関連付ける必要があります。

1. MainActivity.kt で、onCreate() 関数の最後に、DONE Button ビューへの参照を取得します。findViewById() 関数を使用して、setOnClickListener を呼び出します。クリック リスナー関数 addNickname() への参照を渡します。

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

上記のコードでは、it は done_button を参照します。これは、引数として渡されるビューです。

2. アプリを実行し、ニックネームを入力して [DONE] ボタンをタップします。編集テキストとボタンがニックネーム テキスト ビューに置き換えられていることに注目してください。

[完了] ボタンをタップした後もキーボードが表示されたままになっていることに注意してください。これはデフォルトの動作です。

ステップ 3: キーボードを非表示にする

このステップでは、ユーザーが [完了] ボタンをタップした後にキーボードを非表示にするコードを追加します。

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 編集テキストへの参照を取得し、[完了 ] ボタンへの参照を取得します。これを行うには、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. 最終的なアプリを実行します。編集テキストにフォーカスが設定され、ニックネームが編集テキストに表示され、ニックネームのテキスト ビューにスタイルが設定されます。

インタラクティブな AboutMe アプリを友達に見せてみましょう。

Android Studio プロジェクト: AboutMeInteractive

• Android Studio の Layout Editor ツールは、ビジュアル デザイン エディタです。Layout Editor を使用すると、UI 要素をレイアウトにドラッグして、アプリのレイアウトを作成できます。
• EditText は、ユーザーがテキストを入力および変更できる UI 要素です。
• Button は、ユーザーがタップしてアクションを実行できる UI 要素です。ボタンは、テキスト、アイコン、またはテキストとアイコンの両方で構成できます。

クリック リスナー

• View にクリック リスナーを追加すると、タップに応答させることができます。
• クリック リスナーを定義する関数は、クリックされた View を受け取ります。

クリック リスナー関数を View にアタッチするには、次の 2 つの方法があります。

• XML レイアウトで、android:onClick 属性を <View> 要素に追加します。
• プログラムで、対応する Activity で setOnClickListener(View.OnClickListener) 関数を使用します。

Udacity コース:

• Kotlin による Android アプリの開発

Android デベロッパー ドキュメント:

• Layout Editor を使用して UI を作成する
• Button
• EditText
• 入力値の型
• キーボード入力の処理
• スタイルとテーマ

このセクションでは、インストラクター主導のコースの一環として、この Codelab に取り組んでいる生徒向けに考えられる宿題をいくつか示します。インストラクターは、以下のようなことを行えます。

• 必要に応じて宿題を与える
• 宿題の提出方法を生徒に伝える
• 宿題を採点する

インストラクターは、これらの提案を必要なだけ使用し、必要に応じて他の宿題も自由に与えることができます。

この Codelab に独力で取り組む場合は、これらの宿題を自由に使用して知識をテストしてください。

以下の質問に回答してください

問題 1

EditText は何のサブクラスですか？

• View
• LinearLayout
• TextView
• Button

問題 2

次の visibility 属性値のうち、ビューに設定するとビューが非表示になり、レイアウト内の領域を占有しなくなるのは次のどれですか。

• visible
• Invisible
• gone
• hide

問題 3

入力フィールドの妨げになるため、EditText でヒントを表示することは推奨されない。正誤問題

• 正しい
• 誤り

問題 4

Button ビューの説明として正しい文は次のうちどれですか。

• Button ビューはビューグループです。
• 1 つの画面に配置できる Button ビューは 3 つだけです。
• Button ビューはクリック可能で、クリックすると、関連付けられたクリック リスナーがアクションを実行します。
• Button は ImageView の拡張です。

次のレッスンに進む: 2.3: Layout Editor を使用した制約レイアウト

このコースの他の Codelab へのリンクについては、Android Kotlin の基礎の Codelab のランディング ページをご覧ください。