1 / 63

ビューとイベント１

ビューとイベント１. 2012/05/10. ０．目次. テキストの設定 ボタン チェックボックス ラジオボタン エディットテキスト ダイアログ. １ ．テキストの設定. 画面に表示する文字列のデザインは専用のメソッドを使うことで簡単に設定できます. １－１．文字色を変える. 文字色を変えるには setTextColor メソッドを 使います setTextColor ( int color) 　→文字列を color で指定した色にする ※color は Color クラス内で用意されたものを使うか自分で指定します. １－１．文字色を変える.

jolie
Download Presentation

ビューとイベント１

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. ビューとイベント１ 2012/05/10

  2. ０．目次 • テキストの設定 • ボタン • チェックボックス • ラジオボタン • エディットテキスト • ダイアログ

  3. １．テキストの設定 • 画面に表示する文字列のデザインは専用のメソッドを使うことで簡単に設定できます

  4. １－１．文字色を変える • 文字色を変えるにはsetTextColorメソッドを使います setTextColor(int color) 　→文字列をcolorで指定した色にする ※colorはColorクラス内で用意されたものを使うか自分で指定します

  5. １－１．文字色を変える 新しくプロジェクトを作成し、onCreateメソッド内を以下のように書き換えてみましょう public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); LinearLayoutll = new LinearLayout(this); ll.setOrientation(LinearLayout.VERTICAL); TextViewt1 = new TextView(this); TextViewt2 = new TextView(this); TextViewt3 = new TextView(this); t1.setText("こんにちは"); t2.setText("こんにちは"); t3.setText("こんにちは"); t1.setTextColor(Color.BLUE); t2.setTextColor(Color.MAGENTA); t3.setTextColor(Color.YELLOW); setContentView(ll); ll.addView(t1); ll.addView(t2); ll.addView(t3); }

  6. １－１．文字色を変える • 用意されている色は、()の中でColor.と入力すると一覧が出ます

  7. １－２．背景色を変える • 背景色を変えるにはsetBackgroundColorメソッドを使います setBackgroundColor(int color) 　→文字列をcolorで指定した色にする ※colorはColorクラス内で用意されたものを使うか自分で指定します

  8. １－２．背景色を変える さっきのプログラムに書き加えてみましょう TextViewt1 = new TextView(this); TextViewt2 = new TextView(this); TextViewt3 = new TextView(this); t1.setText("こんにちは"); t2.setText("こんにちは"); t3.setText("こんにちは"); t1.setTextColor(Color.BLUE); t2.setTextColor(Color.MAGENTA); t3.setTextColor(Color.YELLOW); t1.setBackgroundColor(Color.GRAY); t2.setBackgroundColor(Color.DKGRAY); t3.setBackgroundColor(Color.LTGRAY); setContentView(ll); ll.addView(t1); ll.addView(t2); ll.addView(t3); } ※文字色と同様に用意されている色は、()の中でColor.と入力すると一覧が出ます

  9. １－３．大きさを変える • 文字色を変えるにはsetTextSizeメソッドを使います setTextSize(int size) 　→文字列の大きさをsizeで指定した大きさにする ※sizeは自分で指定します

  10. １－３．大きさを変える さっきのプログラムに書き加えてみましょう TextViewt1 = new TextView(this); TextViewt2 = new TextView(this); TextViewt3 = new TextView(this); t1.setText("こんにちは"); t2.setText("こんにちは"); t3.setText("こんにちは"); t1.setTextColor(Color.BLUE); t2.setTextColor(Color.MAGENTA); t3.setTextColor(Color.YELLOW); t1.setBackgroundColor(Color.GRAY); t2.setBackgroundColor(Color.DKGRAY); t3.setBackgroundColor(Color.LTGRAY); t1.setTextSize(14); t2.setTextSize(16); t3.setTextSize(18); setContentView(ll); ll.addView(t1); ll.addView(t2); ll.addView(t3);

  11. ２．ボタンとは • ボタンとは、押すことで何かを処理するものです。 これ

  12. ２．ボタンとは • しかし、ただ生成するだけでは押しても何も起きません 前回の課題より

  13. ２－１．ボタンによる処理 • Androidアプリでは、ボタンを押すなどのユーザーの操作をイベントといい、リスナで処理されます イベント リスナ イベントソース (ボタンなど)

  14. ２－２．イベント処理の書き方 • ボタンを押した時にイベントを起こすには、以下の手順が必要 • イベントソースとなるビューの設計 • リスナクラスの設計 • イベントソースにリスナを登録 • リスナクラス内でイベント処理を書く

  15. ２－３．イベントソースとなるビューの設計 • イベントソース（ボタンなど）を設計します Button bt; bt= new Button(this); bt.setText("ここを押してね");

  16. ２－４．リスナクラスの設計 class SampleClickListenerimplements OnClickListener { public void onClick(View v) { } } リスナクラスに必要なもの ソースが押された時に呼び出されるメソッド

  17. ２－５．イベントソースにリスナを登録 • イベントソースにリスナを登録します。登録しないとリスなクラスがあっても何も起こりません bt.setOnClickListener(new SampleClickListener()); 前のスライドで作成したリスナクラス

  18. ２－６．リスナクラス内でイベント処理を書く２－６．リスナクラス内でイベント処理を書く • ２－４で作成したリスナクラスにイベント処理を記述します class SampleClickListener implements OnClickListener { public void onClick(View v) { tv.setText("押されました"); } }

  19. ２－７．イベント処理のプログラム import android.app.Activity; import android.os.Bundle; import android.view.View; import android.view.View.OnClickListener; import android.widget.Button; import android.widget.LinearLayout; import android.widget.TextView; public class ButtonTestActivity extends Activity { TextViewtv; public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); LinearLayoutll = new LinearLayout(this); ll.setOrientation(LinearLayout.VERTICAL); setContentView(ll); Button bt; tv= new TextView(this); tv.setText("いらっしゃいませ。"); bt= new Button(this); bt.setText("ここを押してね"); ll.addView(tv); ll.addView(bt); bt.setOnClickListener(new SampleClickListener()); } class SampleClickListener implements OnClickListener { public void onClick(View v) { tv.setText("押されました"); } } }

  20. ２－７．イベント処理のプログラム • 実行してボタンを押すと、表示されているテキストが“押されました”に変化します

  21. ３．チェックボックス • チェックボックスとは設定画面などでよく使用されるもので、ある項目に対して“はい／いいえ”を選ぶときによく使用されます。

  22. ３－１．チェックボックスの作り方 • ボタン等と同じです import android.widget.CheckBox; ～省略～ CheckBoxcb = new CheckBox(this); cb.setText("チェックボックス"); ll.addView(cb);

  23. ３－１．チェックボックスの作り方 新しくプロジェクトを作って、以下のコードを書いて実行してみましょう import android.app.Activity; import android.os.Bundle; import android.widget.CheckBox; import android.widget.LinearLayout; import android.widget.TextView; public class ButtonTestActivity extends Activity { TextViewtv; public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); LinearLayoutll = new LinearLayout(this); ll.setOrientation(LinearLayout.VERTICAL); setContentView(ll); tv= new TextView(this); tv.setText("チェックボックスのテスト"); CheckBoxcb = new CheckBox(this); cb.setText("チェックボックス"); ll.addView(cb); ll.addView(tv); } } ↑実行結果 ただし、おしても何も起こらない

  24. ３－２．チェックボックスのイベント処理 • ボタンと同様に、チェックボックスでイベント処理を行うときは以下の工程が必要です • イベントソースとなるビューの設計 • リスナクラスの設計 • イベントソースにリスナを登録 • リスナクラス内でイベント処理を書く ※ただしボタンの時とはリスナの名前などが異なる

  25. ３－３．イベントソースとなるビューの設計 • チェックボックスを作成します CheckBoxcb = new CheckBox(this); cb.setText("チェックボックス"); ll.addView(cb);

  26. ３－４．リスナクラスの設計 class SampleCheckedChangedListenerimplements OnCheckedChangedListener { public void onCheckedChanged(CompoundButtonbuttonView,booleanisChecked) { } } リスナクラスに必要なもの ソースが押された時に呼び出されるメソッド

  27. ３－５．イベントソースにリスナを登録 • イベントソースにリスナを登録します。 cb.setOnCheckedChangedListener(new SampleCheckedChangedListener()); 前のスライドで作成したリスナクラス

  28. ３－６．リスナクラス内でイベント処理を書く３－６．リスナクラス内でイベント処理を書く • ３－４で作成したリスナクラスにイベント処理を記述します public void onCheckedChanged(CompoundButtonbuttonView, booleanisChecked) { //isCheckedはチェックされてる時にtrueになります if (isChecked==true) { tv.setText("チェックされました"); } else { tv.setText("チェックされてません"); } }

  29. ３－７．イベント処理のプログラム import android.app.Activity; import android.os.Bundle; import android.widget.CheckBox; import android.widget.CompoundButton; import android.widget.CompoundButton.OnCheckedChangeListener; import android.widget.LinearLayout; import android.widget.TextView; public class ButtonTestActivity extends Activity { TextViewtv; public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); LinearLayoutll = new LinearLayout(this); ll.setOrientation(LinearLayout.VERTICAL); setContentView(ll); tv= new TextView(this); tv.setText("チェックボックスのテスト"); CheckBoxcb = new CheckBox(this); cb.setText("チェックボックス"); ll.addView(cb); cb.setOnCheckedChangeListener(new SampleCheckedChangeListener()); ll.addView(tv); } 次のスライドに続く

  30. ３－７．イベント処理のプログラム 前のスライドからの続き class SampleCheckedChangeListener implements OnCheckedChangeListener { public void onCheckedChanged(CompoundButtonbuttonView,booleanisChecked) { if (isChecked) { tv.setText("チェックされました"); } else { tv.setText("チェックされてません"); } } }

  31. ３－８．テキストの取得 • チェックボックスに設定したテキストを使うにはgetTextメソッドを使います public void onCheckedChanged(CompoundButtonbuttonView, booleanisChecked) { if (isChecked) { tv.setText(buttonView.getText()+"を選びました"); } else { tv.setText(buttonView.getText()+"をやめました"); } }

  32. ３－９．練習 • 以下の図になるようにコードを書き換えてみましょう ※チェックを入れた時と入れない時で表示する文字列が変わるようにすること

  33. ３－９．練習 • 以下の図のようにチェックボックスを増やしてみましょう ※チェックボックス毎にリスナクラスを作成する必要はありません。さっき作ったリスナクラスを登録することが可能です

  34. ４．ラジオボタン • ラジオボタンはチェックボックスと同様に設定画面などでよく使用されるものですが、複数の選択肢の中から１つを選ぶ際に使用されます。

  35. ４－１．ラジオボタンの作り方 • ボタン等と同じです import android.widget.RadioButton; ～省略～ RadioButtonrb1 = new RadioButton(this); rb1.setText("綾鷹"); ll.addView(rb1);

  36. ４－１．ラジオボタンの作り方 新しくプロジェクトを作って、以下のコードを書いて実行してみましょう import android.app.Activity; import android.os.Bundle; import android.widget.LinearLayout; import android.widget.RadioButton; import android.widget.TextView; public class RadioButtonTestActivity extends Activity { TextViewtv; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); LinearLayoutll = new LinearLayout(this); ll.setOrientation(LinearLayout.VERTICAL); setContentView(ll); RadioButtonrb1 = new RadioButton(this); rb1.setText("綾鷹"); ll.addView(rb1); tv = new TextView(this); tv.setText("ラジオボタンのテスト"); ll.addView(tv); } } ↑実行結果 おしても何も起こらないし、一度チェックを入れると外せない

  37. ４－２．ラジオボタンのイベント処理 • ラジオボタンの場合、複数の選択肢を管理するラジオグループの作成が必要です • イベントソースとなるビューの設計 • ラジオグループの設定 • リスナクラスの設計 • イベントソースにリスナを登録 • リスナクラス内でイベント処理を書く

  38. ４－３．イベントソースとなるビューの設計 • ラジオボタンを複数個作成します RadioButtonrb1 = new RadioButton(this); rb1.setText("綾鷹"); RadioButtonrb2 = new RadioButton(this); rb2.setText("生茶"); ※addViewは不要です

  39. ４－４．ラジオグループの設定 • ラジオグループを作成し、対象の選択肢を追加します RadioGrouprg = new RadioGroup(this); rg.addView(rb1); rg.addView(rb2); //レイアウトにはラジオグループを追加する ll.addView(rg);

  40. ４－５．リスナクラスの設計 class SampleClickListenerimplements OnClickListener{ public void onClick(View v) { } } リスナクラスに必要なもの ソースが押された時に呼び出されるメソッド

  41. ４－６．イベントソースにリスナを登録 • イベントソースにリスナを登録します。 //リスナの登録はラジオボタン rb1.setOnClickListener(new SampleClickListener()); rb2.setOnClickListener(new SampleClickListener()); 前のスライドで作成したリスナクラス

  42. ４－７．リスナクラス内でイベント処理を書く４－７．リスナクラス内でイベント処理を書く • ４－５で作成したリスナクラスにイベント処理を記述します • onClickメソッドの引数Viewではラジオボタンの文字列を取り出せないのでキャストします public void onClick(View v) { RadioButtonr = (RadioButton) v; tv.setText("選ばれたのは"+ r.getText() + "でした"); }

  43. ４－８．イベント処理のプログラム import android.app.Activity; import android.os.Bundle; import android.view.View; import android.view.View.OnClickListener; import android.widget.LinearLayout; import android.widget.RadioButton; import android.widget.RadioGroup; import android.widget.TextView; public class RadioButtonTestActivity extends Activity { TextViewtv; public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); LinearLayoutll = new LinearLayout(this); ll.setOrientation(LinearLayout.VERTICAL); setContentView(ll); RadioButton rb1 = new RadioButton(this); rb1.setText("綾鷹"); RadioButton rb2 = new RadioButton(this); rb2.setText("生茶"); RadioGrouprg = new RadioGroup(this); rg.addView(rb1); rg.addView(rb2); ll.addView(rg); 次のスライドに続く

  44. ４－８．イベント処理のプログラム //前のスライドからの続き rb1.setOnClickListener(new SampleClickListener()); rb2.setOnClickListener(new SampleClickListener()); tv= new TextView(this); tv.setText("ラジオボタンのテスト"); ll.addView(tv); } class SampleClickListener implements OnClickListener { public void onClick(View v) { RadioButton r = (RadioButton) v; tv.setText("選ばれたのは" + r.getText() + "でした"); } } }

  45. ４－９．練習 • ４－８のプログラムに書き加えてラジオボタンの数を増やしてみましょう

  46. ５．エディットテキスト • エディットテキストとは、ユーザーに文字を入力してもらうためのテキストボックスです

  47. ５ー１．エディットテキストの作り方 • ボタン等と同じです import android.widget.RadioButton; ～省略～ EditText et = new EditText(this); et = new EditText(this); ll.addView(et);

  48. ５－１．エディットテキストの作り方 新しくプロジェクトを作って、以下のコードを書いて実行してみましょう import android.app.Activity; import android.os.Bundle; import android.widget.EditText; import android.widget.LinearLayout; import android.widget.TextView; public class Sample6 extends Activity { TextViewtv; EditText et; public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); LinearLayoutll = new LinearLayout(this); ll.setOrientation(LinearLayout.VERTICAL); setContentView(ll); tv = new TextView(this); tv.setText(“こんにちは"); et = new EditText(this); ll.addView(tv); ll.addView(et); } } ↑実行結果 文字は入力できるが 何も起こらない

  49. ５－２．エディットテキストのイベント処理 • エディットテキストのイベント処理では以下の工程が必要です • イベントソースとなるビューの設計 • リスナクラスの設計 • イベントソースにリスナを登録 • リスナクラス内でイベント処理を書く ※ただしボタンの時とはリスナの名前などが異なる

  50. ５－３．イベントソースとなるビューの設計 • エディットテキストを作成します EditText et = new EditText(this); et = new EditText(this); ll.addView(et);

More Related