Android Kotlin の基礎 02.2: ユーザー インタラクティビティを追加する

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

前提となる知識

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

学習内容

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

演習内容

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

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

AboutMe アプリ

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

ステップ 1: スタートガイド

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



    ユーザーはこれらのテキストを変更できません。

ユーザーがテキストを入力できるなど、ユーザーがアプリを操作することができると、アプリはより興味深いものになります。Android は、テキスト入力を受け入れるために、テキスト編集と呼ばれるユーザー インターフェース(UI)ウィジェットを備えています。編集テキストを定義するには、EditTextTextView のサブクラス)を使用します。編集テキストを使用すると、ユーザーは以下のスクリーンショットに示すように、テキスト入力を入力して変更できます。

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

  1. Android Studio の [Design] タブで activity_main.xml レイアウト ファイルを開きます。
  2. [Palette] パネルで、[Text] をクリックします。



    [Pal Text] ペインのテキスト要素のリストの上部に、TextView である [Ab TextView] が表示されます。[Ab TextView] の下には複数の EditText ビューがあります。

    [Palette] ペインで、TextView のアイコンにアンダー スコアのない文字 Ab が表示されています。ただし、EditText アイコンの場合、Ab は下線付きです。下線は、ビューが編集可能であることを示します。

    Android では、EditText の各ビューに対してさまざまな属性が設定され、適切なソフト入力方法(画面キーボードなど)が表示されます。
  3. PlainText の編集テキストを [Component Tree] にドラッグし、name_text の下と star_image の上に配置します。


  4. [Attributes] ペインを使用して、EditText ビューで次の属性を設定します。

属性

id

nickname_edit

layout_width

match_parent(デフォルト)

layout_height

wrap_content(デフォルト)

  1. アプリを実行します。スターの画像の上に、デフォルトのテキスト「Name」を含む編集テキストが表示されます。


このタスクでは、EditText ビューのスタイル設定として、ヒントの追加、テキストの配置の変更、スタイルの使用を NameStyle に変更し、入力タイプを設定します。

ステップ 1: ヒントテキストを追加する

  1. string.xml ファイルに、ヒントの新しい文字列リソースを追加します。
<string name="what_is_your_nickname">What is your Nickname?</string>
  1. [Attributes] ペインを使用して、次の属性を EditText ビューに設定します。

属性

style

NameStyle

textAlignment

(中央)

hint

@string/what_is_your_nickname

  1. [Attributes] ペインで、text 属性から Name 値を削除します。ヒントを表示するには、text 属性値が空である必要があります。

ステップ 2: inputType 属性を設定する

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

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

たとえば、パスワードには textPassword 値を使用します。テキスト フィールドはユーザー入力を非表示にします。

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

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

  1. nickname_edit 編集テキストの inputType 属性を textPersonName に設定します。
  2. [Component Tree] ペインに autoFillHints 警告が表示されます。この警告はこのアプリには適用されず、この Codelab の範囲外なので無視できます。(自動入力について詳しくは、自動入力用にアプリを最適化するをご覧ください)。
  3. [Attributes] ペインで、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>
  1. [Attributes] ペインを使用して、新しく追加した Button ビューで次の属性を設定します。

属性

id

done_button

text

@string/done

layout_gravity

center_horizontal

layout_width

wrap_content

layout_gravity 属性は、ビューをその親レイアウト LinearLayout の中央に配置します。

  1. スタイルを 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: [完了] ボタンのスタイルを設定する

  1. [Attributes] ペインで、[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>

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

Design Editor のボタンの色が変更されています。

  1. アプリを実行すると、編集テキストの下にスタイル付き [完了] ボタンが表示されます。


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

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

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


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

属性

id

nickname_text

style

NameStyle

textAlignment

(中央)

ステップ 2: TextView の表示設定を変更する

アプリ内のビューは、visibility 属性を使って表示または非表示にできます。この属性には次の 3 つの値のいずれかを指定します。

  • visible: ビューが表示されます。
  • Invisible: ビューを非表示にしますが、レイアウトの領域は引き続き占有します。
  • gone: ビューを非表示にします。ビューはレイアウト内のスペースを占有しません。
  1. アプリで最初にこのテキストビューを表示しないようにするために、[Attributes] ペインで、nickname_text テキストビューの visibilitygone に設定します。



    [Attributes] ペインで属性を変更すると、デザインエディタから 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"/>

または

  • これは、実行時に ActivityonCreate()setOnClickListener を呼び出すことで実行できます。次に例を示します。
myButton.setOnClickListener {
   clickHanderFunction(it)
}

このタスクでは、プログラムで done_button のクリック リスナーを追加します。対応するアクティビティ(MainActivity.kt)にクリック リスナーを追加します。

addNickname というクリック リスナー関数は、次の処理を行います。

  • nickname_edit 編集テキストからテキストを取得します。
  • nickname_text テキストビューでテキストを設定します。
  • 編集テキストとボタンを非表示にする。
  • ニックネーム TextView を表示します。

ステップ 1: クリック リスナーを追加する

  1. Android Studio の java フォルダにある MainActivity.kt ファイルを開きます。
  2. MainActivity.ktMainActivity クラス内に、addNickname という関数を追加します。View 型の view という入力パラメータを含めます。view パラメータは、関数が呼び出される View です。この場合、view は [完了] ボタンのインスタンスになります。
private fun addNickname(view: View) {
}
  1. addNickname 関数内で、findViewById() を使用して nickname_edit 編集テキストと nickname_text テキストビューへの参照を取得します。
val editText = findViewById<EditText>(R.id.nickname_edit)
val nicknameTextView = findViewById<TextView>(R.id.nickname_text)
  1. nicknameTextView テキストビューのテキストを、ユーザーが editText に入力したテキストに設定し、text プロパティから取得します。
nicknameTextView.text = editText.text
  1. editTextvisibility プロパティを View.GONE に設定して、ニックネーム EditText ビューを非表示にします。

前のタスクでは、Layout Editor を使用して visibility プロパティを変更しました。ここでは、プログラムを使って同じことを行います。

editText.visibility = View.GONE
  1. visibility プロパティを View.GONE に設定して、[完了] ボタンを非表示にします。関数の入力パラメータ view には、すでにボタンの参照があります。
view.visibility = View.GONE
  1. addNickname 関数の最後で、visibility プロパティを View.VISIBLE に設定してニックネーム TextView ビューを表示します。
nicknameTextView.visibility = View.VISIBLE

ステップ 2: クリック リスナーを [完了] ボタンに接続する

[完了] ボタンをタップしたときに実行するアクションを定義する関数を、Button ビューにアタッチする必要があります。

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

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

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

ユーザーが [完了] ボタンをタップした後もキーボードが表示されます。これがデフォルトの動作です。

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

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

  1. MainActivity.kt で、addNickname() 関数の最後に次のコードを追加します。このコードの仕組みについて詳しくは、hideSoftInputFromWindow のドキュメントをご覧ください。
// Hide the keyboard.
val inputMethodManager = getSystemService(Context.INPUT_METHOD_SERVICE) as InputMethodManager
inputMethodManager.hideSoftInputFromWindow(view.windowToken, 0)
  1. アプリを再度実行します。[完了] をタップするとキーボードが非表示になります。

ユーザーが [完了] ボタンをタップした後でニックネームを変更する方法はありません。次のタスクでは、アプリをインタラクティブにし、ユーザーがニックネームを更新できるように機能を追加します。

このタスクでは、ニックネーム テキストビューにクリック リスナーを追加します。クリック リスナーはニックネーム テキストビューを非表示にし、編集テキストを表示して、[完了] ボタンを表示します。

ステップ 1: クリック リスナーを追加する

  1. MainActivity で、ニックネーム テキストビュー用に updateNickname(view: View) というクリック リスナー関数を追加します。
private fun updateNickname (view: View) {
}
  1. updateNickname 関数内で、nickname_edit 編集テキストへの参照を取得し、[完了] ボタンへの参照を取得します。そのためには、findViewById() メソッドを使用します。
val editText = findViewById<EditText>(R.id.nickname_edit)
val doneButton = findViewById<Button>(R.id.done_button)
  1. updateNickname 関数の最後に、編集テキストを表示するコードを追加し、[完了] ボタンを表示して、テキストビューを非表示にします。
editText.visibility = View.VISIBLE
doneButton.visibility = View.VISIBLE
view.visibility = View.GONE
  1. MainActivity.kt で、onCreate() 関数の最後で nickname_text テキストビューに対して setOnClickListener を呼び出します。クリック リスナー関数への参照(updateNickname())を渡します。
findViewById<TextView>(R.id.nickname_text).setOnClickListener {
   updateNickname(it)
}
  1. アプリを実行します。ニックネームを入力し、[完了] ボタンをタップしてニックネーム TextView ビューをタップします。[ニックネーム] ビューが消え、編集テキストと [完了] ボタンが表示されるようになります。


デフォルトでは EditText ビューはフォーカスされていないため、キーボードは表示されません。ニックネーム テキストビューがクリック可能だとユーザーが判断しにくい。次のタスクでは、ニックネーム テキストビューにフォーカスとスタイルを追加します。

ステップ 2: フォーカスを EditText ビューに設定して、キーボードを表示する

  1. updateNickname 関数の最後で、フォーカスを EditText ビューに設定します。requestFocus() メソッドを使用します。
// Set the focus to the edit text.
editText.requestFocus()
  1. 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"
  1. 完成したアプリを実行します。編集テキストにフォーカスがかかり、編集テキストにニックネームが表示され、ニックネーム テキストビューのスタイルが設定されます。

インタラクティブな AboutMe アプリを友だちに紹介しましょう。

Android Studio プロジェクト: AboutMeInteractive

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

クリック リスナー

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

クリック リスナー関数は、次の 2 つのうちいずれかの方法で View にアタッチできます。

Udacity コース:

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

このセクションでは、インストラクターが主導するコースの一環として、この Codelab に取り組む生徒の課題について説明します。教師は以下のことを行えます。

  • 必要に応じて課題を割り当てます。
  • 宿題の提出方法を生徒に伝える。
  • 宿題を採点します。

教師はこれらの提案を少しだけ使うことができます。また、他の課題は自由に割り当ててください。

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

次の質問に答えてください。

問題 1

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

  • View
  • LinearLayout
  • TextView
  • Button

質問 2

次の visibility 属性値のうち、ビューに値が設定されている場合、ビューが非表示になり、レイアウトのスペースを占有しないようにする値はどれですか。

  • visible
  • Invisible
  • gone
  • hide

問題 3

EditText ビューの場合、ヒントは入力フィールドの妨げになるため、ヒントを提供することはおすすめしません。正誤問題

  • 正しい
  • 誤り

問題 4

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

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

次のレッスンを開始する: 2.3: Layout Editor を使用した制約レイアウト

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