Android Kotlin基礎講座 02.2: ユーザー対話型にする

目次

タスク:EditTextをスタイリングする

このタスクではEditTextに何を入力するべきなのか利用者へのヒントテキストの追加、ビューの位置の調整、スタイルをNameStyleに変更、インプットタイプの設定などを行っていきます。

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

  1. strings.xmlファイルにヒント用のstringリソースを追加します。
<string name="what_is_your_nickname">What is your Nickname?</string>

Tip: ユーザーが何を入力するべきなのかわかりやすくするために、それぞれのEditTextビューにヒントを表示することはユーザビリティの向上において重要です。

  1. EditTextビューのアトリビュートパネルから以下の表のようにそれぞれの属性を設定してください。
    Use the Attributes pane to set the following attributes to the EditText view:
属性
styleNameStyle
textAlignment(center)
hint@string/what_is_your_nickname
  1. アトリビュートパネルからtext属性の”Name”を削除してください。text属性はヒントが表示されるために空白である必要があります。

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

inputyType属性はユーザーがEditTextビューに入力できる文字の型(インプットタイプ)を指定するものです。Androiシステムはインプットタイプに応じて適切な入力フィールドとスクリーンキーボードを表示します。

アトリビュートパネルで全てのインプットタイプを確認するために、inputTypeフィールドをクリックするか、このフィールドの隣にある三つの点をクリックしてください。現在のインプットタイプがチェックされており、他の利用可能なインプットタイプが全て表示されたリストが表示されます。2つ以上のインプットタイプを選択することもできます。

例えば、パスワード入力用にtextPasswordに設定してみましょう。テキストフィールドがユーザーの入力を隠すようになります。

電話番号用のphoneという値にしてみてください。数字キーパッドが表示され、ユーザーは数字のみを入力できるようになります。

ニックネームフィールドのインプットタイプを設定していきます:

  1. nickname_editのinputType属性をtextPersonNameに設定してください。
  2. コンポーネントツリーを見るとautoFillHintsという警告が表示されていると思います。これは自動入力に関する警告ですが、今回はアプリに適用しません。またこの記事で学習する範囲を超えていますので、今回は無視していただいて構いません。(もし自動入力について詳しく知りたい場合は、自動入力用にアプリを最適化するをご覧ください)


  3. アトリビュートパネルから以下の表のように属性を設定してください。
属性
idnickname_edit
layout_widthmatch_parent (デフォルト)
layout_heightwrap_content (デフォルト)
style@style/NameStyle
inputTypetextPersonName
hint“@string/what_is_your_nickname”
text(空白)