Androidアプリ開発の教材に最適と言われているAndroid Developersサイト内の開発セクションを読み解きながらの学習に挑戦してます。
API Guides > User Interface > Input Controls > Text Fieldsを今回は学習します。
TextFieldとはAppへ文字入力手段として使用されるコンポーネントのことで、EditText
クラスが使用されます、レイアウトXML上では<EditText>タグで指定します。
Input Controlとしては以下のものが挙げられてます。
- Buttons ←前回の記事
- Text Fields ←今回の記事
- Checkboxes
- Radio Buttons
- Toggle Buttons
- Spinners
- Pickers
では記事の内容に従い書き進めて行きます。
1. キーボード・タイプの指定
AndroidではTextフィールド入力時にはOS側でソフトキーボードが画面上に自動表示されるようになっており、そしてこのキーボードは一種類ではなく入力データ種別に適したものが何種類か用意されてます。
レイアウトXMLファイル内のEditTextタグにてandroid:inputType属性でどのキーボードを表示させるかが指定できます。
1) キーボード・タイプ設定例
inputTypeに”textEmailAddress”を設定した場合のサンプルです。
リスト(1)[res/layout/activity_main.xml]
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <EditText android:id="@+id/email_address" android:layout_width="fill_parent" android:layout_height="wrap_content" android:hint="@string/email_hint" android:inputType="textEmailAddress"/> </LinearLayout>
リスト(2)[res/values/strings.xml]
<resources> <string name="app_name">TextField</string> <string name="email_hint">Enter Mail Address</string> <string name="menu_settings">Settings</string> <string name="title_activity_main">Text Field</string> </resources>
レイアウトファイルのandroid:hint属性に相対する文字列を指定。(hint属性は、TxetFieldに何も入力されて無い時に表示されるプロンプト文字列を設定。)
2) 実行結果
textEmailAddress/text/phoneの三種を実行させてみましたが、キーボードが英数用ではないためかAPI Guide内の説明とは異なってます。例えば、API Guideの説明では、textEmailAddress属性値では@マークキーが独立して存在するようになってますが、textEmalAddressでは通常の英数キーボード、textではひらがなキーボードという様にデバッグに使用した端末(HTC Evo)に搭載されているソフトキーボード種に依存するようです。
でも、実際問題として数ある端末すべてにうまく対応できるようにできるのかと心配になりますね、実際にアプリを作るときに再考するつもりで、とりあえずここではそのまま受け入れて行くことにします。
以下は、そのデバッグ用に使用したHTC Evoでのスクリーンショットです。
1) android:inputType=”textEmailAddress”
3) android:inputType=”phone”
3) 複数のキーボード・タイプ設定例
前記の場合はデータ種別に適したものを選ぶようにしてみましたが、inputTypeにはそれ以外にもinput時の動作補助的なものもあります、例えば、AutoComplete、単語の頭の大文字化、Password非表示などです。
これらは、データ種別の選択との合わせ技になります。下記にサンプルを示しますが、各選択肢を”|”記号で連結して行きます。
リスト(3)[res/layout/activity_main.xml]のEditTextタグ部のみ抽出
<EditText android:id="@+id/email_address" android:layout_width="fill_parent" android:layout_height="wrap_content" android:hint="@string/email_hint" android:inputType="text|textCapWords|textNoSuggestions"/>
このサンプルでは、通常文字入力+単語の頭の大文字化+スペル補助無しという設定になってます。
どのような属性があるのかは、リファレンスandroid:inputType属性を見ると判りますが、かなりありますね。
2. キーボード・アクションの指定
次にキーボードアクション指定に入ります。これは、android:imeOptions属性で指定するものでキーボードのEnterキー(CRキー)の役割をSendキー、Serchキーなどに変えるものです。
この説明だけですと、なんだかよくわからないと思いますのでサンプルを見てもらった方が理解しやすいと思いますのでサンプルの話に進みます。
1) imeOptions設定例
例によって、レイアウトファイルのEditTextタグ内のandroid:imeOptions属性指定を変えて行きます。
リスト(4)[res/layout/activity_main.xml]のEditTextタグ部のみ抽出
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <EditText android:id="@+id/search" android:layout_width="fill_parent" android:layout_height="wrap_content" android:hint="@string/search_hint" android:inputType="text" android:imeOptions="actionSend"/> </LinearLayout>
ここではactionSend属性値にしてますので、CRキー部分がSend表示に変わるはずですが、Emulatorでは変わってるけど、実機デバッグ(HTC)では変わってませんね。
ここでも、端末搭載のソフト・キーボードに依存すると言うことらしいです。
1) android:imeOptions=”actionSend” (Emulator)
2) android:imeOptions=”actionSend” (HTC Evo)
2) Event応答
ActionButton(右下の「CR確定ボタン」とか「Sendボタン」のことです)クリック時のイベントリスナーの設定方法になります。
EditTextの場合のイベントリスナーはTextView.OnEditorActionListener
メソッドになります、以下にサンプルソースを記述します。
リスト(5)[MainActivity.java]
import android.app.Activity; import android.content.Context; import android.os.Bundle; import android.view.KeyEvent; import android.view.Menu; import android.view.inputmethod.EditorInfo; import android.view.inputmethod.InputMethodManager; import android.widget.EditText; import android.widget.TextView; import android.widget.Toast; import android.widget.TextView.OnEditorActionListener; public class MainActivity extends Activity { @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); EditText editText = (EditText) findViewById(R.id.search); editText.setOnEditorActionListener(new OnEditorActionListener() { @Override public boolean onEditorAction(TextView v, int actionId, KeyEvent event) { boolean handled = false; if (actionId == EditorInfo.IME_ACTION_SEND) { // sendMessage();コメントアウト // ソフトキーボードを隠す InputMethodManager imm = (InputMethodManager) getSystemService(Context.INPUT_METHOD_SERVICE); imm.hideSoftInputFromWindow(v.getWindowToken(), InputMethodManager.HIDE_NOT_ALWAYS); // EditText入力文字列をToast表示 Toast.makeText(getApplicationContext(), v.getText().toString(), Toast.LENGTH_LONG).show(); handled = true; } return handled; } }); } @Override public boolean onCreateOptionsMenu(Menu menu) { getMenuInflater().inflate(R.menu.activity_main, menu); return true; } }
20行~40行がイベントリスナー部分です。
- 20行:レイアウトファイルからfindViewByIDメソッドを使用してeditTextインスタンスを取得。
- 21行:取得editTextインスタンスに対し、setOnEditorActionLitenerメソッドでリスナーを組込む。
- 23,24行:イベント処理用メソッドをここから記述。
- 27行:APIガイド記事中のsendMessage()メソッドは使用しないのでコメントアウト。
- 30-32行:ソフトキーボードを隠す。(Toast表示を見やすくするためにしたのですが必須ではないです。)
- 35,36行:ActionButtonクリックでEditText入力内容をそのままオウム返しのようにToast表示。
3) 実行結果
他にも、このAPIガイドの記事にはTopicsがありますが、今回はSKIPします。
(少々、疲れ気味なのでまた別の機会で記事にアップします。)