ビューとイベント２

ビューとイベント２ 5/25

前回の内容 • （インターフェイス） • （イベントとリスナ） • テキストの設定 • ボタン • チェックボックス • ラジオボタン • エディットテキスト

本日の内容 • リスト • スピナ • メニュー • ダイアログ

リストとは • リストとは、複数の項目の中から１つを選ぶ時に使われるビューです。 • まずはListTestActivity.javaをコピーして実行してみましょう

実行結果 実行して項目を選ぶと、<選んだ項目>ですね。と表示されます。では、ソースを見てみましょう

ソースの中身 TextViewtv; // リストビューの定義 ListView lv; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); LinearLayoutll = new LinearLayout(this); ll.setOrientation(LinearLayout.VERTICAL); setContentView(ll); tv = new TextView(this); tv.setText("趣味を選んでください"); // 初期化 lv = new ListView(this); // リストに表示する文字列の用意 String[] str= { "読書", "スポーツ", "旅行", "ゲーム", "映画", "音楽", "特にないよ"}; /** * リストの設定 ArrayAdapterを使って、リストに表示する方法や文字列を設定する * R.layout.simple_list_item_1は予め用意されてる表示方法 */ ArrayAdapter<String> ad = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, str); lv.setAdapter(ad); ① ② ③ 赤文字が新しい内容

ソースの中身 ll.addView(tv); ll.addView(lv); // リストの項目を選んだ時のリスナ登録 lv.setOnItemClickListener(new OnItemClickListener() { // イベント処理の中身 public void onItemClick(AdapterView<?> v, View iv, intpos, long id) { // 選んだ項目の文字列を取り出して表示する TextViewtmp = (TextView) iv; tv.setText(tmp.getText() + "ですね。"); } }); } ④ ⑤

①リストビューオブジェクトの生成 リストビューオブジェクトの生成は、他のオブジェクトと同様です。 ListViewlv; lv = new ListView(this);

②リストに表示する文字列の作成 リストビューオブジェクトが作成できたら、リストに表示する項目を作成します String[] str= { "読書", "スポーツ", "旅行", "ゲーム", "映画", "音楽", "特にないよ"}; ↓[]は配列を意味し、同じ型のデータをたくさん入れられる

③項目の設定 リストに表示する項目が作成できたら、ArrayAdapterを使ってリストビューオブジェクトにデザインや項目を設定します ArrayAdapter<String> ad = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, str); //ArrayAdapterで設定したものをリストビューオブジェクトに設定 lv.setAdapter(ad); 表示するActivityクラス AndroidSDKで予め用意された表示方法 ※android.R.layout.simple_list_item_1 で固定表示する文字列データ

④リスナの登録 ユーザーがイベントを起こした時になんらかの処理をしたい場合、イベント処理やリスナ登録が必要でしたリストの項目を選んだ時にイベント処理を起こすにはOnItemClickListenerを登録しonItemClickメソッドを実装します //リスナ登録 lv.setOnItemClickListener(new OnItemClickListener() { // イベント処理の中身 public void onItemClick(AdapterView<?> v, View iv, intpos, long id) { (略) } });

⑤イベント処理 項目の文字列データはView型のiv、順番はint型のposが持っています。ここでは、選んだ項目の文字列を取り出して表示しているので、ivをテキストビュー型にキャストし、getTextメソッドで文字列を取り出しています // イベント処理の中身 public void onItemClick(AdapterView<?> v, View iv, intpos, long id) { // 選んだ項目の文字列を取り出して表示する TextViewtmp = (TextView) iv; tv.setText(tmp.getText() + "ですね。"); }

練習 ListTestActivity.javaを書き換えて、右の図のように “X番目のYYYですね” と表示されるようにしてみましょう

スピナとは • スピナとはリストビューと同様に複数の項目から一つを選ぶためのビューですが、右端をタッチすると項目が現れます • まずはSpinnerTestActivity.javaをコピーして実行してみましょう

実行結果 実行してタッチすると右のようにして項目一覧が表示され、項目を選ぶと、<選んだ項目>ですね。と表示されます。では、ソースを見てみましょう

ソースの中身 TextViewtv; Spinner sp; public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); LinearLayoutll = new LinearLayout(this); ll.setOrientation(LinearLayout.VERTICAL); setContentView(ll); tv = new TextView(this); sp = new Spinner(this); String[] str= { "読書", "スポーツ", "旅行", "ゲーム", "映画", "音楽", "特にないよ"}; ArrayAdapter<String> ad = new ArrayAdapter<String>(this, android.R.layout.simple_spinner_item, str); ad.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item); sp.setAdapter(ad); sp.setPrompt("↓から選んでください"); ① ② 赤文字が新しい内容

ソースの中身 ll.addView(tv); ll.addView(sp); sp.setOnItemSelectedListener(new OnItemSelectedListener() { public void onItemSelected(AdapterView<?> v, View iv, intpos, long id) { TextViewtmp = (TextView) iv; tv.setText(tmp.getText() + "ですね。"); } public void onNothingSelected(AdapterView<?> arg0) { } }); } ④ ③

①スピナオブジェクトの生成 スピナオブジェクトの生成は、他のオブジェクトと同様です。 Spinner sp; sp = new Spinner(this);

②項目の設定 スピナに表示する項目が作成できたら、ArrayAdapterを使ってスピナオブジェクトにデザインや項目を設定します ArrayAdapter<String> ad = new ArrayAdapter<String>(this, android.R.layout.simple_spinner_item, str); ad.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item); //ArrayAdapterで設定したものをリストビューオブジェクトに設定 sp.setAdapter(ad); sp.setPrompt(“↓から選んでください”);//選択時に表示するメッセージ表示するActivityクラス AndroidSDKで予め用意された表示方法 ※ android.R.layout.simple_spinner_item android.R.layout.simple_spinner_dropdownで固定表示する文字列データ

③リスナの登録 ユーザーがイベントを起こした時になんらかの処理をしたい場合、イベント処理やリスナ登録が必要でしたリストの項目を選んだ時にイベント処理を起こすにはOnItemSelectedListenerを登録しonItemSelectedメソッドとonNothingSelectedメソッドを実装します //リスナ登録 sp.setOnItemSelectedListener(new OnItemSelectedListener() { // イベント処理の中身 public void onItemSelected(AdapterView<?> v, View iv, intpos, long id) { (略) public void onNothingSelected(AdapterView<?> arg0) { } });

④イベント処理 項目の文字列データはView型のiv、順番はint型のposが持っています。ここでは、選んだ項目の文字列を取り出して表示しているので、ivをテキストビュー型にキャストし、getTextメソッドで文字列を取り出しています // イベント処理の中身 public void onItemSelected(AdapterView<?> v, View iv, intpos, long id) { // 選んだ項目の文字列を取り出して表示する TextViewtmp = (TextView) iv; tv.setText(tmp.getText() + "ですね。"); } onNothingSelectedメソッドは何も選択されなかった時に呼び出されます

メニューとは • メニューとは、Menuボタンを押した時に表示されるものです • MenuTestActivityを実行してみましょう

実行結果 実行して、エミュレータの右側にあるMenuボタンを押すと、図のように項目が表示されます。項目をタッチすると、～が選択されましたと表示されます。では、ソースを見てみましょう

ソースの中身 TextViewtv; public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); TableLayouttl = new TableLayout(this); setContentView(tl); tv = new TextView(this); tv.setText("メニューのテスト"); tl.addView(tv); } public booleanonCreateOptionsMenu(Menu menu) { menu.add(Menu.NONE, 0, 0, "機能１"); menu.add(Menu.NONE, 1, 1, "機能２"); menu.add(Menu.NONE, 2, 2, "設定"); menu.add(Menu.NONE, 3, 3, "終了"); return super.onCreateOptionsMenu(menu); } ② ①

ソースの中身 public booleanonOptionsItemSelected(MenuItem mi) { String str = null; switch (mi.getItemId()) { case 0: str= "機能１"; break; case 1: str= "機能２"; break; case 2: str= "設定"; break; case 3: str= "終了"; break; } tv.setText(str+ "が選択されました。"); return true; } ④ ③

①メニューの作成 メニューの項目は、予め用意されたonCreateOptionsMenuメソッド内で設定します public booleanonCreateOptionsMenu(Menu menu) { (略) }

②項目の追加 • 項目の追加は、引数にあるmenuに表示場所や表示する文字を書いたものaddで追加します menu.add(Menu.NONE, 0, 0, "機能１"); 表示する文字列アイテム番号表示する順序グループ番号グループ番号・アイテム番号は、後で処理する時にどの項目が押されたかを判別するのに必要で、判別しない時はMenu.NONEとしてもいい

③イベント処理 メニューでは、リスナ登録は不要でonOptionsItemSelectedメソッド内に処理を書くだけでokです public booleanonOptionsItemSelected(MenuItem mi) { //ここに処理を書く return true; }

④押された項目による分岐 メソッドの引数miには押された項目の情報が入っているので、例えばアイテム番号によって分岐させる場合には以下のようにgetItemIdメソッドを使います switch (mi.getItemId()) { case 0: str = "機能１"; break; case 1: str = "機能２"; break; case 2: str = "設定"; break; case 3: str = "終了"; break; } miは押された項目の情報を持つアイテム番号によって分岐 ※getGourpIdメソッドでグループ番号による判別も可能です

練習 • 右の図のようにメニューの項目を増やしてみましょう。

ダイアログ • ダイアログとは、画面よりも前に表示されユーザーに入力を求めたり、警告などを出す小さいウィンドウのことで以下の工程が必要です DialogTestActivity.javaを実行してみましょう

実行結果 実行すると、右のようなダイアログが表示されますではソースを見てみましょう

ソースの中身 TextViewtv; public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); LinearLayoutll = new LinearLayout(this); ll.setOrientation(LinearLayout.VERTICAL); setContentView(ll); AlertDialog.Builderdlg = new AlertDialog.Builder(this); dlg.setTitle("ダイアログテスト"); dlg.setMessage("Hello"); dlg.setPositiveButton("OK", null); dlg.show(); tv = new TextView(this); tv.setText("こんにちは"); ll.addView(tv); } } ① ② ③

①ダイアログの生成 • ダイアログを生成するには、AndroidSDKで予め用意されているAlertDialog.Builderを使います。 AlertDialog.Builderdlg = new AlertDialog.Builder(this); 表示するActivityクラス

②ダイアログの設定 • ダイアログに表示するタイトル、文章等は、それぞれset～メソッドで設定できます dlg.setTitle("ダイアログテスト"); dlg.setMessage("Hello"); dlg.setPositiveButton("OK", null); 表示するタイトル表示する文章表示するボタンに表示する文章と押した時の動作。

③ダイアログの表示 • ダイアログの設定が完了したらshowメソッドを使って表示します • ダイアログを作成してもshowメソッドを呼び出さないと表示されません dlg.show();

ダイアログにイベントを付ける • 例のプログラムでは dlg.setPositiveButton("OK", null); としていましたが、nullの部分にリスナを指定することでボタンを押した時にイベント処理を発生させることが出来ます dlg.setPositiveButton("OK", new OnClickListener() { public void onClick(DialogInterface dialog, int which) { tv.setText("とじました"); } });

課題 • リスト又はスピナの項目を選択するとテキストの文字の色が変わるようにしてみましょう

課題 • 画面内にボタンを配置し、ボタンを押すとダイアログが表示されるようにしてみましょう

補足　ダイアログの種類 • 資料ではダイアログを作成するためにAlertDialog.Builderを使いましたが右のようなDaialogクラスも用意されています

補足　ダイアログの種類 • しかし、一般には目的に合わせてDialogを拡張したクラスを使います Dialog AlertDialog ProgressDialog DatepickerDialog TimePickerDialog

ビューとイベント２

ビューとイベント２

Presentation Transcript