知識ゼロからの Kotlin Android アプリリリースへの軌跡 / Day7【Codelabs 2-2編】

前回に続き、今回は Codelabs2-2 をやっていきたいと思います👨‍💻

学ぶこと

EditText view を使用してユーザ入力を取得する方法
EditText view のテキストを使用して、TextView にテキストを設定する方法
View および ViewGroup の操作方法
View の可視性を変更する方法

すること

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

アプリの概要

このコードラボでは、AboutMe アプリを拡張してユーザインタラクションを追加します。ニックネームフィールド、Done ボタン、TextView を追加して、ニックネームを表示します。ユーザがニックネームを入力して Done ボタンをタップすると、TextView が更新され、入力したニックネームが表示されます。ユーザーは TextView をタップして、ニックネームを再度更新できます。

|||

テキストを入力するための EditText を追加する

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

初めに

以前の AboutMe アプリを開きます。以前のコードラボプロジェクトがない場合はこちらからダウンロードしてください。
アプリを実行します。name TextView、star image およびテキストの長いセグメントが ScrollView に表示されます。

ユーザがテキストを変更できないことに注意してください。

ユーザがアプリを操作できる場合、例えばユーザがテキスト入力できる場合、アプリはより面白いものになります。テキスト入力を受け入れるために、Android は edit text と呼ばれる UI widget を提供しています。

EditText は、TextView のサブクラスである EditText を使用して定義します。次のスクリーンショットに示すように、edit text を使用すると、ユーザはテキストを入力および変更できます。

EditText を追加する

activity_main.xml で Design タブを開きます。
Palette ペインで Text をクリックします。

TextView である Ad TextView は、Palette ペインのテキスト要素のリストの一番上に表示されます。Ad TextView の下には、複数の EditText view があります。

Palette ペインで、TextView のアイコンに、アンダースコアなしの Ad という文字が表示されていることに注目してください。ただし、EditText アイコンは Ad に下線が表示されます。下線は、View が編集可能であることを示します。

Android は EditText View ごとに異なる属性を設定し、システムは適切なソフト入力メソッド(画面キーボードなど)を表示します。

PlainText Eidt Text を Component Tree にドラッグし、name_text の下で star_image の上に配置します。

Attributes ペインを使用して、EditText View に次の attributes を設定します。

Attribute	Value
id	nickname_edit
layout_width	match_parent(default)
layout_height	wrap_content(default)

アプリを実行します。star image の画像の上に、デフォルトテキスト "Name" の Edit text が表示されます。

EditText のスタイル

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

ヒントテキストを追加する

ヒントの新しい文字列リソースを string.xml ファイルに追加します。

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

Tip: 各 EditText にヒントを表示して、ユーザが編集可能なフィールドに必要な入力を把握できるようにすることをお勧めします。

Attributes ペインを使用して、次の属性を Edit Text view に設定します。

Attribute	Value
style	NameStyle
textAlignment	center
hint	@string/what_is_your_nickname

Attributes ペインで、text attribute から Name の値を削除します。ヒントを表示するには、text attribute の値を空にする必要があります。

inputType attribute を設定する

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

可能なすべての inputType を表示するには、Attributes ペインで inputType フィールドをクリックします。使用可能なすべての入力タイプを示すリストが開き、現在アクティブな入力タイプがチェックされています。複数の入力タイプを選択できます。

例えば、パスワードの場合は、textPassword value を使用します。テキストフィールドはユーザの入力を隠します。

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

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

nickname_edit Edit Text の input_type attribute 属性を textPersinName に設定します。
Component Tree ペインで、autoFillHints 警告に注意してください。この警告はこのアプリには適用されず、このコードラボの範囲外であるため、無視してかまいません。(autofill の詳細については、Optimize your app for autofill をご覧ください。)

Attribute ペインで、EditText View の以下の attributes の値を確認します。

Attribute	Value
id	nickname_edit
layout_width	match_parent(default)
layout_height	wrap_content(default)
style	@style/NameStyle
inputType	textPersonName
hint	"@string/what_is_your_nickname"
text	(empty)

ボタンを追加してスタイルを設定する

Button は、ユーザがタップしてアクションを実行できる UI 要素です。ボタンは、テキスト、アイコン、またはテキストとアイコンの両方で構成できます。

このタスクでは、ユーザがニックネームを入力した後にタップする Done ボタンを追加します。ボタンは、Edit Text view をニックネームを表示する TextView に入れ替えます。

ニックネームを更新するには、ユーザは Text View をタップします。

DONE ボタンを追加する

button を Palette ペインから Component Tree にドラッグします。nickname_edit テキストの下にボタンを配置します。

done という名前の新しい文字列リソースを作成し、Done という値を与えます。

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

Attribute ペインを使用して、新しく追加された Button view に次の attribute を設定します。

Attribute	Values
id	done_button
text	@string/done
layout_gravity	center_horizontal
layout_width	wrap_content

layout_gravity attribute は、View をその親レイアウトである LinearLayout の中央に配置します。

スタイルを Widget.AppCompat.Button.Colored に変更します。これは、Android が提供する事前定義されたスタイルの１つです。ドロップダウンまたは Resources window からスタイルを選択できます。

このスタイルは、ボタンの色を 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>

DONE button のスタイル

Attributes ペインで、Layout_Margin > Top を選択して上余白を追加します。上マージンを dimens.xml ファイルで定義されている layout_margin に設定します。

ドロップダウンメニューから fontFimily attribute を 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" />

Color Resource を変更する

このステップでは、Activity のアプリバーに合わせてボタンのアクセントカラーを変更します。

res/values/colors.xml を開き、colorAccent の値を #76bf5e に変更します。

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

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

デザインエディタのボタンの色が変わっていることに注目してください。

アプリを実行します。edit text の下にスタイル付きの DONE ボタンが表示されます。

ニックネームを表示する TextView を追加します。

ユーザがニックネームを入力して DONE ボタンをタップすると、ニックネームが TextView に表示されます。このタスクでは、色付きの background を持つ TextView を追加します。star_image の上にこの text view のニックネームが表示されます。

ニックネームの TextView を追加する

text view を Palette ペインから ComponentTree にドラッグします。text view を done_button の下に配置します。

Attribute ペインを使用して、新しい TextView に次の attributes を設定します。

Attribute	Value
id	nickname_text
style	NameStyle
textAlignment	center

TextView の可視性を変更する

アプリで View を表示または非表示にするには、visibility attribute を使用します。この attribute は、次の３つの値のいずれかをとります。

visible: View が表示されます。
Invisible: View を非表示にしますが、View は依然としてレイアウトのスペースを占有します。
gone: View を非表示にします。View はレイアウトのスペースを占有しません。
最初にアプリにこの TextView を表示させたくないため、Attributes ペインで、nickname_text text view の表示を設定します。

Attributes ペインで属性を変更すると、nickname_text view がデザインエディターから消えます。View は layout preview で非表示になります。

nickname_text view の text attribute の値を空の文字列に変更します。

この 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="" />

layout preview は次のようになります。

クリックリスナーを DONE ボタンに追加する

Button オブジェクト(または any view) のクリックハンドラーは、button(view) がタップされた時に実行されるアクションを指定します。クリックイベントを処理する関数は、button(view) でレイアウトをホストする Activity に実装する必要があります。

クリックリスナーには一般的にこの形式があり、渡された view はクリックまたはタップを受け取った view です。

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

クリックリスナー機能をボタンクリックイベントに添付するには、次の２つの方法があります:

XML レイアウトでは、android:onClick attribute を <Button> 要素に追加できます。 ex:

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

実行時に setOnClickListener を呼び出すことにより、Activity の onCreate() でプログラム的に実行できます。 ex:

myButton.setOnClickListener {
   clickHanderFunction(it)
}

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

addNickname と呼ばれるクリックリスナー関数は、次のことを行います。

nickname_edit edit text からテキストを取得します。
nickname_text text view でテキストを設定します。
edit text と button を非表示にします。
ニックネーム TextView を表示します。

クリックリスナーを追加する

Android Studio の java フォルダーで、MainActivity.kt ファイルを開きます。
MainActivity.kt の MainActivity クラス内に、addNickname という関数を追加します。タイプ View の View と呼ばれるパラメータを含めます。View パラメータは、関数が呼び出される View です。この場合、View は DONE ボタンのインスタンスになります。

private fun addNickname(view: View) {
}

addNickname 関数内で、findViewById を使用して、nickname_edit edit text と nickname_text text view への参照を取得します。

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

nicknameTextView text view のテキストを、ユーザが eidtText に入力したテキストに設定し、text プロパティから取得します。

nicknameTextView.text = editText.text

editText の visibility プロパティを View.GONE に設定して、ニックネーム EditText view を非表示にします。

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

editText.visibility = View.GONE

visibility プロパティを View.GONE に設定して、DONE ボタンを非表示にします。関数の入力パラメータ view としてボタンの参照が既にあります。

view.visibility = View.GONE

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

nicknameTextView.visibility = View.VISIBLE

クリックリスナーを DONE ボタンに接続する

これで、DONE ボタンがタップされた時に実行されるアクションを定義する関数ができたので、その関数を Button view にアタッチする必要があります。

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

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

it で button への参照を引数に渡しています。

アプリを実行し、ニックネームを入力して、DONE ボタンをタップします。edit text と button がニックネーム text view に置き換えられていることに注目してください。

||| |---|---|

ユーザが DONE ボタンをタップした後でも、キーボードが表示されていることに注目してください。この動作がデフォルトです。

キーボードを非表示にする

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

MainActivity.kt の addNickname() 関数の最後に、次のコードを追加します。このコードの機能の詳細については hideSoftInputFromWindow) のドキュメントをご覧ください。

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

アプリをもう一度実行します。DONE をタップすると、キーボードが非表示になることに注目してください。

||| |---|---|

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

クリックリスナーをニックネーム TextView に追加する

このタスクでは、クリックリスナーをニックネーム text view に追加します。クリックリスナーは、ニックネーム text view を非表示にし、edit text を表示し、DONE ボタンを表示します。

クリックリスナーを追加する

MainActivity で、ニックネームの text view に updateNickname(view: View) というクリックリスナー関数を提供します。

private fun updateNickname (view: View) {
}

updateNickname 関数内で、nickname_edit edit text への参照を取得し、DONE ボタンへの参照も取得します。これらを行うには findViewById メソッドを使用します。

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

updateNickname 関数の最後に、edit text を表示し、DONE ボタンを表示し、text view を非表示にするコードを追加します。

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

MainActivity.kt の onCreate() 関数の最後で nickname_text text view の setOnClickListener を呼び出します。クリックリスナー関数への参照を渡します。これは、updateNickname() です。

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

アプリを実行します。ニックネームを入力し、DONE ボタンをタップしてから、ニックネームの TextView をタップします。ニックネーム View が消え、edit text と DONE ボタンが表示されます。

デフォルトでは、EditText view にはフォーカスがなく、キーボードは表示されていないことに注目してください。ニックネームの TextView がクリック可能であることをユーザが理解するのは困難です。次のタスクでは、フォーカスとスタイルをニックネーム TextView に追加します。

フォーカスを EditText View に設定し、キーボードを表示する

updateNickname 関数の最後で、requestFocus でフォーカスを EditText view に設定します。

// 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)

ニックネームの TextView に背景色を追加する

nickname_text text view の背景色を @color/colorAccent に設定し、@dimen/small_padding で bottom padding を追加します。これらの変更は、ニックネーム text view がクリック可能であることをユーザに示すヒントとして機能します。

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

アプリを実行します。

||| |---|---|

まとめ

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

Click Listeners

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

クリックリスナー機能は、次の２つの方法のいずれかで View にアタッチできます:

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

その他の記事

yamato8010.hatenablog.com

iOSエンジニアのつぶやき

毎朝8:30に iOS 関連の技術について１つぶやいています。まれに釣りについてつぶやく可能性があります。

知識ゼロからの Kotlin Android アプリリリースへの軌跡 / Day7【Codelabs 2-2編】

学ぶこと

すること

アプリの概要

テキストを入力するための EditText を追加する

初めに

EditText を追加する

EditText のスタイル

ヒントテキストを追加する

inputType attribute を設定する

ボタンを追加してスタイルを設定する

DONE ボタンを追加する

DONE button のスタイル

Color Resource を変更する

ニックネームを表示する TextView を追加します。

ニックネームの TextView を追加する

TextView の可視性を変更する

クリックリスナーを DONE ボタンに追加する

クリックリスナーを追加する

クリックリスナーを DONE ボタンに接続する

キーボードを非表示にする

クリックリスナーをニックネーム TextView に追加する

クリックリスナーを追加する

フォーカスを EditText View に設定し、キーボードを表示する

ニックネームの TextView に背景色を追加する

まとめ

その他の記事