この Codelab は、Android Kotlin の基礎コースの一部です。Codelab を順番に進めていくと、このコースを最大限に活用できます。すべてのコース Codelab は Android Kotlin の基礎 Codelab ランディング ページに掲載されています。
前提となる知識
- Kotlin で基本的な Android アプリを作成する。
- エミュレータまたはデバイスで Android アプリを実行する。
- Android Studio の Layout Editor を使用してリニア レイアウトを作成する。
LinearLayout
、TextView
、ScrollView
、クリック ハンドラ付きのボタンを使用する簡単なアプリを作成します。
学習内容
EditText
ビューを使用してユーザー入力を取得する方法。EditText
ビューのテキストを使用してTextView
ビューにテキストを設定する方法View
とViewGroup
の使用方法。View
の公開設定を変更する方法。
演習内容
- 前の Codelab で作成した AboutMe アプリにインタラクティブな機能を追加します。
- ユーザーがテキストを入力できるように
EditText
を追加します。 Button
を追加し、そのクリック ハンドラを実装します。
この Codelab では、AboutMe アプリを拡張してユーザー操作を追加します。ニックネーム フィールド、[完了] ボタン、テキストビューを追加して、ニックネームを表示します。ユーザーがニックネームを入力して [完了] ボタンをタップすると、テキストビューが更新され、入力したニックネームが表示されます。テキストビューをタップすると、ニックネームを再度更新できます。
このタスクでは、ユーザーがニックネームを入力できるように、EditText
入力フィールドを追加します。
ステップ 1: スタートガイド
- 前の Codelab の AboutMe アプリがない場合は、スターター コード AboutMeInteractive-Starter をダウンロードしてください。これは前の Codelab で終了したコードと同じです。
- Android Studio で AboutMeInteractive-Starter プロジェクトを開きます。
- アプリを実行します。スクロール テキストに名前のテキストビュー、スターの画像、長いテキスト セグメントが表示されます。
ユーザーはこれらのテキストを変更できません。
ユーザーがテキストを入力できるなど、ユーザーがアプリを操作することができると、アプリはより興味深いものになります。Android は、テキスト入力を受け入れるために、テキスト編集と呼ばれるユーザー インターフェース(UI)ウィジェットを備えています。編集テキストを定義するには、EditText
(TextView
のサブクラス)を使用します。編集テキストを使用すると、ユーザーは以下のスクリーンショットに示すように、テキスト入力を入力して変更できます。
ステップ 2: EditText を追加する
- Android Studio の [Design] タブで
activity_main.xml
レイアウト ファイルを開きます。 - [Palette] パネルで、[Text] をクリックします。
[Pal Text] ペインのテキスト要素のリストの上部に、TextView
である [Ab TextView] が表示されます。[Ab TextView] の下には複数のEditText
ビューがあります。
[Palette] ペインで、TextView
のアイコンにアンダー スコアのない文字 Ab が表示されています。ただし、EditText
アイコンの場合、Ab は下線付きです。下線は、ビューが編集可能であることを示します。
Android では、EditText
の各ビューに対してさまざまな属性が設定され、適切なソフト入力方法(画面キーボードなど)が表示されます。 - PlainText の編集テキストを [Component Tree] にドラッグし、
name_text
の下とstar_image
の上に配置します。 - [Attributes] ペインを使用して、
EditText
ビューで次の属性を設定します。
属性 | 値 |
|
|
|
|
|
|
- アプリを実行します。スターの画像の上に、デフォルトのテキスト「Name」を含む編集テキストが表示されます。
このタスクでは、EditText
ビューのスタイル設定として、ヒントの追加、テキストの配置の変更、スタイルの使用を NameStyle
に変更し、入力タイプを設定します。
ステップ 1: ヒントテキストを追加する
string.xml
ファイルに、ヒントの新しい文字列リソースを追加します。
<string name="what_is_your_nickname">What is your Nickname?</string>
- [Attributes] ペインを使用して、次の属性を
EditText
ビューに設定します。
属性 | 値 |
|
|
|
|
|
|
- [Attributes] ペインで、
text
属性からName
値を削除します。ヒントを表示するには、text
属性値が空である必要があります。
ステップ 2: inputType 属性を設定する
inputType
属性は、ユーザーが EditText
ビューに入力できる入力の種類を指定します。Android システムは、設定された入力タイプに応じて、適切な入力フィールドと画面キーボードを表示します。
使用可能なすべての入力タイプを表示するには、[属性] ペインで inputType
フィールドをクリックするか、フィールドの横にあるその他アイコン ... をクリックします。使用可能なすべての入力タイプのリストが表示されます。現在アクティブな入力タイプはオンになっています。複数の入力タイプを選択できます。
たとえば、パスワードには textPassword
値を使用します。テキスト フィールドはユーザー入力を非表示にします。
電話番号の場合は、phone
値を使用します。数字キーパッドが表示され、ユーザーは数字のみを入力できる。
ニックネーム フィールドに入力タイプを設定します。
nickname_edit
編集テキストのinputType
属性をtextPersonName
に設定します。- [Component Tree] ペインに
autoFillHints
警告が表示されます。この警告はこのアプリには適用されず、この Codelab の範囲外なので無視できます。(自動入力について詳しくは、自動入力用にアプリを最適化するをご覧ください)。 - [Attributes] ペインで、
EditText
ビューの次の属性の値を確認します。
属性 | 値 |
|
|
|
|
|
|
|
|
|
|
|
|
| (空白) |
Button
は、ユーザーがアクションを実行するための UI 要素です。ボタンは、テキスト、アイコン、またはテキストとアイコンの両方で構成されます。
このタスクでは、ユーザーがニックネームを入力して [完了] ボタンを追加します。このボタンは、EditText
ビューを、ニックネームを表示する TextView
ビューに切り替えます。ニックネームを更新するには、TextView
ビューをタップします。
手順 1: [完了] ボタンを追加する
- [Palette] パネルから [Component Tree] にボタンをドラッグします。
nickname_edit
の編集テキストの下にボタンを配置します。 done
という名前の新しい文字列リソースを作成します。文字列に値Done
を設定します。
<string name="done">Done</string>
- [Attributes] ペインを使用して、新しく追加した
Button
ビューで次の属性を設定します。
属性 | 値 |
|
|
|
|
|
|
|
|
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: [完了] ボタンのスタイルを設定する
- [Attributes] ペインで、[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>
ファイル エディタの左側の余白に、16 進数コードに対応する色が表示されます。
Design Editor のボタンの色が変更されています。
- アプリを実行すると、編集テキストの下にスタイル付き [完了] ボタンが表示されます。
ユーザーがニックネームを入力して [完了] ボタンをタップすると、TextView
ビューにニックネームが表示されます。このタスクでは、色付きのテキストビューを追加します。テキストビューには、star_image
の上にユーザーのニックネームが表示されます。
ステップ 1: ニックネームに TextView を追加する
- テキストビューを [Palette] ペインから [Component Tree] にドラッグします。テキストビューを
done_button
の下とstar_image
の上に配置します。 - [Attributes] ペインを使用して、新しい
TextView
ビューに次の属性を設定します。
属性 | 値 |
|
|
|
|
|
|
ステップ 2: TextView の表示設定を変更する
アプリ内のビューは、visibility
属性を使って表示または非表示にできます。この属性には次の 3 つの値のいずれかを指定します。
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
}
ボタンのクリック イベントにクリック リスナー関数を追加するには、次の 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: クリック リスナーを追加する
- 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
関数の最後で、visibility
プロパティをView.VISIBLE
に設定してニックネームTextView
ビューを表示します。
nicknameTextView.visibility = View.VISIBLE
ステップ 2: クリック リスナーを [完了] ボタンに接続する
[完了] ボタンをタップしたときに実行するアクションを定義する関数を、Button
ビューにアタッチする必要があります。
MainActivity.kt
で、onCreate()
関数の最後にある DONEButton
ビューへの参照を取得します。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 の Layout Editor は、ビジュアル デザイン エディタです。Layout Editor を使用すると、UI 要素をレイアウトにドラッグすることでアプリのレイアウトを作成できます。
EditText
は、ユーザーがテキストの入力や変更を行える UI 要素です。Button
は、ユーザーがアクションを実行するための UI 要素です。ボタンは、テキスト、アイコン、またはテキストとアイコンの両方で構成されます。
クリック リスナー
View
にクリック リスナーを追加することで、タップに反応させることができます。- クリック リスナーを定義する関数は、クリックされた
View
を受け取ります。
クリック リスナー関数は、次の 2 つのうちいずれかの方法で View
にアタッチできます。
- XML レイアウトで、
<
View
>
要素にandroid:onClick
属性を追加します。 - プログラムで、
Activity
でsetOnClickListener(View.OnClickListener)
関数を使用します。
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
ビューはクリック可能で、クリックすると、関連付けられたクリック リスナーがアクションを実行します。Button
はImageView
の拡張です。
次のレッスンを開始する:
このコースの他の Codelab へのリンクについては、Android Kotlin の基礎 Codelab ランディング ページをご覧ください。