例題 3-2 ボタンをクリックしたらタイトルバーにテキストを表示します activity_main.xml <LinearLayout xmlns:android=" android:layout_height="

Transcription

1 3-2 ボタン (Button) とクリック リスナー ボタンにクリック リスナーを付け ボタンのクリック ( タップ ) で何かの処理を行う 方法を説明します 1. OnClickListener リスナーのインプリメント Button bt=(button)findviewbyid(r.id.button); で取得したボタン bt がクリックされたときの処理を行うクリック リスナーを付けるにはまず implements OnClickListener で OnClickListener インターフェースを Activity クラスに追加します public class Widget1 extends Activity implements OnClickListener{ こうしておいてから bt.setonclicklistener(this); でボタン bt にクリック リスナー を設定します 2. インターフェース C++ では複数のクラスを継承する多重継承を認めていますが Java はこれを認めていません その代わりにインターフェースという概念により追加機能をクラスに実装できるようにしました インターフェースはクラスと同じようなものですが データ部やコンストラクタのない特別な小規模なクラスと考えることができます インターフェースは implements によりクラスに追加します 複数のインターフェースを追加したい場合はコンマで区切ります 3. onclick メソッド OnClickListener を追加した場合 そのクラス内に onclick メソッドが必要となります そしてこの onclick メソッド内にクリックが生じたときの処理内容を記述します onclick メソッドの引数 view にはクリックしたウイジェットの View クラスのオブジェクトが渡されます public void onclick(view view) { クリックが生じたときの処理 4. タイトルバーへのテキストの表示 タイトルバーにテキストを表示するには settitle メソッドを使って以下のようにします settitle(" テキスト ");

2 例題 3-2 ボタンをクリックしたらタイトルバーにテキストを表示します activity_main.xml <LinearLayout xmlns:android=" android:layout_height="fill_parent" android:orientation="vertical" > <Button android:layout_height="wrap_content" android:text=" クリックしてね " /> </LinearLayout> MainActivity.java package com.example.button1; import android.app.activity; import android.os.bundle; import android.view.view; import android.view.view.onclicklistener; import android.widget.button; public class MainActivity extends Activity implements public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_main); Button bt=(button)findviewbyid(r.id.button); bt.setonclicklistener(this); public void onclick(view view) { settitle(" クリックしました!");

3 5. 複数のボタンの判定 複数のボタンに同じクリック リスナーを設定した場合は onclick メソッドの view 引 数を使って view.getid() でクリックされたボタンの ID を判定します public void onclick(view view) { if (view.getid()==r.id.button1) // ボタン 1 の処理 else if (view.getid()==r.id.button2) // ボタン 2 の処理 練習問題 3-2 ボタンを 2 つ配置し クリックされたボタンをタイトルバーに表示します activity_main.xml <LinearLayout xmlns:android=" android:layout_height="fill_parent" android:orientation="vertical" > <Button android:id="@+id/button1" android:layout_height="wrap_content" android:text=" ボタン1" /> <Button android:id="@+id/button2" android:layout_height="wrap_content" android:text=" ボタン2" />

4 </LinearLayout> MainActivity.java package com.example.button2; import android.app.activity; import android.os.bundle; import android.view.view; import android.view.view.onclicklistener; import android.widget.button; public class MainActivity extends Activity implements public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_main); Button bt1=(button)findviewbyid(r.id.button1); bt1.setonclicklistener(this); Button bt2=(button)findviewbyid(r.id.button2); bt2.setonclicklistener(this); public void onclick(view view) { if ( 1 ) settitle(" ボタン1をクリック "); else if ( 2 ) settitle(" ボタン2をクリック ");

5 3-3 テキストビュー (TextView) TextView はテキスト表示用のウィジェットで <TextView> タグで定義します テキストビューにテキストを表示するには settext メソッドを使います TextView text1=(textview)findviewbyid(r.id.text1); text1.settext(" クリックしました "); テキストの表示色は settextcolor で設定できます text1.settextcolor(color.green); 例題 3-3 ボタンをクリックしたら TextView にテキストを表示します activity_main.xml <LinearLayout xmlns:android=" android:layout_height="fill_parent" android:orientation="vertical" > <TextView android:layout_height="wrap_content" /> <Button android:layout_height="wrap_content" android:text=" クリックしてね " /> </LinearLayout> MainActivity.java package com.example.textview1; import android.app.activity;

6 import android.os.bundle; import android.view.view; import android.view.view.onclicklistener; import android.widget.*; public class MainActivity extends Activity implements public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_main); Button bt=(button)findviewbyid(r.id.button1); bt.setonclicklistener(this); public void onclick(view view) { TextView text1=(textview)findviewbyid(r.id.text1); text1.settext(" クリックしました "); 練習問題 3-3 ボタン 1 をクリックしたら緑で ボタン 2 をクリックしたら赤で TextView にテキストを表示しなさい activity_main.xml <LinearLayout xmlns:android=" android:layout_height="fill_parent" android:orientation="vertical" > <TextView

7 android:layout_height="wrap_content" /> <Button android:layout_height="wrap_content" android:text=" ボタン1" /> <Button android:layout_height="wrap_content" android:text=" ボタン2" /> </LinearLayout> MainActivity.java package com.example.textview2; import android.app.activity; import android.graphics.color; import android.os.bundle; import android.view.view; import android.view.view.onclicklistener; import android.widget.*; public class MainActivity extends Activity implements public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_main); Button bt1=(button)findviewbyid(r.id.button1); bt1.setonclicklistener(this); Button bt2=(button)findviewbyid(r.id.button2);

8 bt2.setonclicklistener(this); public void onclick(view view) { TextView text1=(textview)findviewbyid(r.id.text1); if (view.getid()==r.id.button1){ text1.settextcolor( 1 ); text1.settext(" ボタン1をクリック "); else if (view.getid()==r.id.button2){ text1.settextcolor( 2 ); text1.settext(" ボタン2をクリック ");

9 3-5 チェックボックス (CheckBox) CheckBox は項目のクリックのたびにチェック状態 (ON) と非チェック状態 (OFF) を交互に繰り返すウイジェットで <CheckBox > タグで定義します チェックボックスは個々に次のように取得します CheckBox cb=(checkbox)findviewbyid(r.id.check1); この cb を用いて cb.ischecked() が true ならチェック状態 false なら非チェック状 態と判定できます チェックボックスの項目のテキストは cb.gettext() で取得できます 例題 3-5 ボタンのクリックでりんご みかん いちごのチェックされている項目をタイトルバーに表示します チェックボックスが 3 個あるので CheckBox cb[]=new CheckBox[3]; のような CheckBox 型配列を用意し cb[0],cb[1],cb[2] で 3 個のチェックボックスを管理します activity_main.xml <LinearLayout xmlns:android=" android:layout_height="fill_parent" android:orientation="vertical" > <CheckBox android:id="@+id/check1" android:layout_height="wrap_content" android:text=" りんご " /> <CheckBox android:id="@+id/check2" android:layout_height="wrap_content" android:text=" みかん " /> <CheckBox android:id="@+id/check3"

10 android:layout_height="wrap_content" android:text=" いちご " /> <Button android:layout_height="wrap_content" android:text=" クリックしてね " /> </LinearLayout> MainActivity.java package com.example.checkbox1; import android.app.activity; import android.os.bundle; import android.view.view; import android.view.view.onclicklistener; import android.widget.*; public class MainActivity extends Activity implements public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_main); Button bt1=(button)findviewbyid(r.id.button1); bt1.setonclicklistener(this); public void onclick(view view) { CheckBox cb[]=new CheckBox[3]; cb[0]=(checkbox)findviewbyid(r.id.check1); cb[1]=(checkbox)findviewbyid(r.id.check2); cb[2]=(checkbox)findviewbyid(r.id.check3); String msg=""; for (int i=0;i<3;i++){ if (cb[i].ischecked())

11 msg+=cb[i].gettext()+":"; settitle(msg); 練習問題 3-5 CheckBox のチェックの判定に配列を使わずに個々に判定しなさい activity_main.xml 例題 3-5 と同じ MainActivity.java package com.example.checkbox2; import android.app.activity; import android.os.bundle; import android.view.view; import android.view.view.onclicklistener; import android.widget.*; public class MainActivity extends Activity implements public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate);

12 setcontentview(r.layout.activity_main); Button bt1=(button)findviewbyid(r.id.button1); bt1.setonclicklistener(this); public void onclick(view view) { String msg=""; CheckBox cb; cb=(checkbox)findviewbyid(r.id.check1); if (cb.ischecked()) msg+=cb.gettext()+":"; cb=(checkbox)findviewbyid( 1 ); if (cb.ischecked()) msg+=cb.gettext()+":"; cb=(checkbox)findviewbyid( 2 ); if (cb.ischecked()) msg+=cb.gettext()+":"; settitle(msg);

13 3-6 ラジオボタン (RadioGroup と RadioButton) RadioButton は RadioGroup でグループ化された各項目の中で クリックされた 1 つをチェック状態 (ON) に 他を非チェック状態 (OFF) にするウイジェットです グループ単位で動作するため < RadioGroup > タグの中にそのグループに属するラジオボタンを <RadioButton> タグで定義します 初期設定でチェック状態にしておきたいラジオボタンに android:checked="true" を指定します この指定がいずれかのラジオボタンになければ 初期状態はどのラジオボタンもチェック状態にありません <RadioGroup > グループの定義 <RadioButton /> グループ内の個々のラジオボタン <RadioButton /> </RadioGroup> グループ内でチェックされている項目は 1 つです この項目を取得するには次のように します rg.getcheckedradiobuttonid() でグループ内でチェックされているラジオボタン の ID を取得できます RadioGroup rg=(radiogroup)findviewbyid(r.id.radiogroup); RadioButton rb=(radiobutton)findviewbyid(rg.getcheckedradiobuttonid()); rb.gettext(); 例題 3-6 ボタンのクリックで ON になっているラジオボタンの内容をタイトルバーに 表示します activity_main.xml <LinearLayout xmlns:android=" android:layout_height="fill_parent" android:orientation="vertical" > <RadioGroup android:id="@+id/radiogroup" android:layout_height="wrap_content" > <RadioButton

14 android:layout_height="wrap_content" android:checked="true" android:text=" 男 " /> <RadioButton android:layout_height="wrap_content" android:text=" 女 " /> </RadioGroup> <Button android:layout_height="wrap_content" android:text=" クリックしてね " /> </LinearLayout> MainActivity.java package com.example.radiobutton1; import android.app.activity; import android.os.bundle; import android.view.view; import android.view.view.onclicklistener; import android.widget.*; public class MainActivity extends Activity implements public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_main); Button bt1=(button)findviewbyid(r.id.button1);

15 bt1.setonclicklistener(this); public void onclick(view view) { RadioGroup rg=(radiogroup)findviewbyid(r.id.radiogroup); RadioButton rb=(radiobutton)findviewbyid(rg.getcheckedradiobuttonid()); settitle(rb.gettext()); 練習問題 3-6 Android ios Windows という 3 項目のラジオボタンを作り チェック されているものをタイトルバーに表示しなさい activity_main.xml <LinearLayout xmlns:android=" android:layout_height="fill_parent" android:orientation="vertical" > <RadioGroup android:id="@+id/radiogroup" android:layout_height="wrap_content" > <RadioButton android:id="@+id/radio1"

16 android:layout_height="wrap_content" android:checked="true" android:text= 1 /> <RadioButton android:id="@+id/radio2" android:layout_height="wrap_content" android:text= 2 /> <RadioButton android:id="@+id/radio3" android:layout_height="wrap_content" android:text= 3 /> </RadioGroup> <Button android:id="@+id/button1" android:layout_height="wrap_content" android:text=" クリックしてね " /> </LinearLayout> MainActivity.java package com.example.radiobutton2; import android.app.activity; import android.os.bundle; import android.view.view; import android.view.view.onclicklistener; import android.widget.*; public class MainActivity extends Activity implements

17 public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_main); Button bt1=(button)findviewbyid(r.id.button1); bt1.setonclicklistener(this); public void onclick(view view) { RadioGroup rg=(radiogroup)findviewbyid(r.id.radiogroup); RadioButton rb=(radiobutton)findviewbyid(rg.getcheckedradiobuttonid()); settitle(rb.gettext());

18 3-7 スピナー (Spinner) Spiner はスピナーの ボタンのクリックでスピナーに登録されている項目をポップアップ画面に表示し その項目の中から1つを選択するウイジェットで <Spiner> タグで定義します 表示される各項目はラジオボタンと同様な動作をします スピナーに登録する項目は android:entries 属性に指定します <Spinner は res/values フォルダの string.xml に次のように定義した内容を指します <resources> <string-array name="items"> <item> 学生 </item> <item> 会社員 </item> <item> 主婦 </item> </string-array> </resource> スピナーの選択されている項目の内容は以下のようにして取得できます Spinner sp=(spinner)findviewbyid(r.id.spinner); sp.getselecteditem(); 取得したデータは Object 型なので 項目の内容を取得するには (String) sp.getselecteditem() または sp.getselecteditem().tostring() とします 選択されている項目の番号 (0 スタート ) は sp.getselecteditemposition() で取得で きます

19 例題 3-7 スピナーの ボタンのクリックでスピナーに登録されている項目の中から 1 つ を選択します ボタンのクリックで スピナーで選択されている項目の番号と内容をタイ トルバーに表示します activity_main.xml <LinearLayout xmlns:android=" android:layout_height="fill_parent" android:orientation="vertical" > <Spinner android:id="@+id/spinner" android:layout_height="wrap_content" android:entries="@array/items" /> <Button android:id="@+id/button1" android:layout_height="wrap_content" android:text=" 選択した後でクリックしてね " /> </LinearLayout> res/values/string.xml <?xml version="1.0" encoding="utf-8"?> <resources> <string name="app_name">spinner1</string> <string name="hello_world">hello world!</string> <string name="menu_settings">settings</string> <string-array name="items"> <item> 学生 </item> <item> 会社員 </item> <item> 主婦 </item> </string-array> </resources>

20 MainActivity.java package com.example.spinner1; import android.app.activity; import android.os.bundle; import android.view.view; import android.view.view.onclicklistener; import android.widget.*; public class MainActivity extends Activity implements public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_main); Button bt1=(button)findviewbyid(r.id.button1); bt1.setonclicklistener(this); public void onclick(view view) { Spinner sp=(spinner)findviewbyid(r.id.spinner); settitle(sp.getselecteditemposition()+":"+(string)sp.getselecteditem());

21 注 Android 4.0 以後は Spinner はデフォルトでドロップダウン形式 android:spinnermode="dropdown" となります ダイアログ形式にするには android:spinnermode="dialog" とします 練習問題 3-7 スピナーの項目を Android ios Windows Linux の 4 項目にしなさい activity_main.xml,spinner2.java 例題 3-7 と同じ res/values/strings.xml <?xml version="1.0" encoding="utf-8"?> <resources> <string name="app_name">spinner2</string> <string name="hello_world">hello world!</string> <string name="menu_settings">settings</string> <string-array name="items"> </string-array> </resources>

22

23 3-8 リストビュー (ListView) ListView は項目の一覧をリスト形式で表示するウイジェットで <ListView> タグで定義 します リスト項目の登録の仕方はスピナーの場合と同じです <ListView /> 1. OnItemClickListener リストビューでは通常 リスト項目の選択というイベントで処理を行います そこでリ ストビューには次のようにして OnItemClickListener を設定します ListView lv=(listview)findviewbyid(r.id.listview); lv.setonitemclicklistener(new ItemClick()); class ItemClick implements OnItemClickListener { public void onitemclick(adapterview<?> parent, View view,int position, long id) { リスト項目が選択されたときの処理 選択された項目は onitemclick メソッドの parent と position 引数を使って次のように取 得します String item=(string)((listview)parent).getitematposition(position); 注 ラジオボタン チェックボックス スピナーはクリックしたときの選択状態を保持しているので これらのウイジェットの直接のクリックイベントでなく ボタンのクリックイベントで これらのウイジェットの選択状態を取得できました ところがリストビューは項目をクリックしたとき 選択状態などを保持できません そのためリストビュー自体にイベントリスナーを設定します

24 2. ジェネリッククラスクラス名の右に <T> という 型パラメーター を指定したクラスをジェネリッククラスと呼びます たとえば List クラスは Integer String などのデータ要素をリストとして扱うことができるジェネリッククラスです 使用する場合は <> 内にデータ型を指定します List<String> list = new ArrayList<String>(); list.add(new String("Ann")); String x =list.get(0); ListView Spinner は AdapterView のサブクラスです このため onitemclick メソッドの第 1 引数は AdapterView<?> parent です (ListView) parent のように実際のクラスにキャストしてから使います さてここで AdapterView はジェネリッククラスですが 型パラメータは <?> となっています <?> はワイルドカードで無名のオブジェクト型を示します コンパイル時には型を特定せず 実行時に渡された型を適用することを意味します 例題 3-8 リストビューで選択された項目の内容をタイトルバーに表示します activity_main.xml <LinearLayout xmlns:android=" android:layout_height="fill_parent" android:orientation="vertical" > <ListView android:id="@+id/listview" android:layout_height="wrap_content" android:entries="@array/items" /> </LinearLayout> strings.xml <?xml version="1.0" encoding="utf-8"?> <resources> <string name="app_name">listview1</string> <string name="hello_world">hello world!</string> <string name="menu_settings">settings</string>

25 <string-array name="items"> <item> 学生 </item> <item> 会社員 </item> <item> 主婦 </item> </string-array> </resources> MainActivity.java package com.example.listview1; import android.app.activity; import android.os.bundle; import android.widget.*; import android.widget.adapterview.onitemclicklistener; import android.view.view; public class MainActivity extends Activity public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_main); ListView lv=(listview)findviewbyid(r.id.listview); lv.setonitemclicklistener(new ItemClick()); class ItemClick implements OnItemClickListener { public void onitemclick(adapterview<?> parent, View view,int position, long id) { String item =(String) ((ListView) parent).getitematposition(position); settitle(item);

26 練習問題 3-8 学生 会社員 主婦 の次に 男 女 のリストビューを追加しなさい 各リストビューの選択項目は TextView に表示しなさい activity_main.xml <LinearLayout xmlns:android=" android:layout_height="fill_parent" android:orientation="vertical" > <TextView android:layout_height="wrap_content" /> <ListView android:layout_height="wrap_content" /> <TextView android:layout_height="wrap_content" />

27 <ListView android:layout_height="wrap_content" android:entries= 1 /> </LinearLayout> strings.xml <?xml version="1.0" encoding="utf-8"?> <resources> <string name="app_name">listview2</string> <string name="hello_world">hello world!</string> <string name="menu_settings">settings</string> <string-array name="items1"> <item> 学生 </item> <item> 会社員 </item> <item> 主婦 </item> </string-array> <string-array 2 > <item> 男 </item> <item> 女 </item> </string-array> </resources>v MainActivity.java package com.example.listview2; import android.app.activity; import android.os.bundle; import android.widget.*; import android.widget.adapterview.onitemclicklistener; import android.view.view; public class MainActivity extends Activity

28 public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_main); ListView lv1=(listview)findviewbyid(r.id.listview1); lv1.setonitemclicklistener(new ItemClick1()); ListView lv2=(listview)findviewbyid(r.id.listview2); lv2.setonitemclicklistener(new ItemClick2()); class ItemClick1 implements OnItemClickListener { public void onitemclick(adapterview<?> parent, View view,int position, long id) { String item =(String) ((ListView) parent).getitematposition(position); TextView text1=(textview)findviewbyid(r.id.text1); text1.settext(item); class ItemClick2 implements OnItemClickListener { public void onitemclick(adapterview<?> parent, View view,int position, long id) { String item =(String) ((ListView) parent).getitematposition(position); TextView text2=(textview)findviewbyid(r.id.text2); text2.settext(item);

29

30 6-2 ビュー画面への描画 1. invalidate メソッドタッチイベントの発生で呼び出されるメソッド内では直接ビュー画面への描画を行うことができません このため GView クラスの gv をメンバ変数として宣言しておき gv.invalidate メソッドを使って ondraw メソッドを呼び出すことでビュー画面への描画を行います 2. ビュー画面のトップ位置 Android の通常の画面構成は画面上端からステータスバー タイトルバーがあり その下にビュー画面があります タッチイベントの event.gety(); で取得した y 座標の原点は画面の上端を原点にした値ですので この値を元にビュー画面に表示する場合は補正が必要になります この補正をする値はステータスバーとタイトルバーの高さの合計です これらの高さを求める方法はいくつかありますが ステータスバーとタイトルバーの高さを個々に求める代わりに画面上端からビュー画面のトップ位置までの距離は以下で得られます なお この値は oncreate メソッド内や Gview コンストラクタ内では画面構成が完成していないため 0 となってしまいますので ondraw メソッド内で取得しています float top=getwindow().findviewbyid(window.id_android_content).gettop(); したがってタッチイベントで得らられる event.gety(); からこの top を引いた値をビュ ー画面の y 座標として使えばよいことになります なお ステータスバー タイトルバー を消してフルスクリーンモードにすればこのような補正は必要ありません 例題 6-2 ビュー画面の左上隅からタッチムーブ位置に直線を描きます (px,py) がタッチ 位置です MainActivity.java package com.example.touch3; import android.app.activity; import android.content.context; import android.graphics.*; import android.os.bundle; import android.view.*;

31 public class MainActivity extends Activity { private float px=0,py=0; private GView public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); gv=new GView(this); setcontentview(gv); private class GView extends View { private Paint paint; public GView(Context context) { super(context); paint=new Paint(); protected void ondraw(canvas canvas) { float top=getwindow().findviewbyid(window.id_android_content).gettop(); paint.setcolor(color.blue); canvas.drawline(0,0,px,py-top,paint); public boolean ontouchevent(motionevent event) { if (event.getaction()==motionevent.action_move){ px=event.getx(); // タッチ位置をメンバ変数に格納 py=event.gety(); gv.invalidate(); // 再描画 return super.ontouchevent(event);

32 練習問題 6-2 タッチムーブ位置にイメージを追従して移動しなさい MainActivity.java package com.example.touch4; import android.app.activity; import android.content.context; import android.graphics.*; import android.os.bundle; import android.view.*; public class MainActivity extends Activity { private float px=0,py=0; private GView public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); gv=new GView(this); setcontentview(gv); private class GView extends View { private 1 public GView(Context context) { super(context); img=bitmapfactory.decoderesource(getresources(),r.drawable.sai); protected void ondraw(canvas canvas) { float

33 top=getwindow().findviewbyid(window.id_android_content).gettop(); canvas.drawbitmap( 2,null); public boolean ontouchevent(motionevent event) { if (event.getaction()==motionevent.action_move){ px=event.getx(); py=event.gety(); gv.invalidate(); return super.ontouchevent(event);

34 6-3 画面サイズ 画面の幅と高さは ondraw メソッドの canvas 引数を使って canvas.getwidth() と canvas.getheight() で取得できます 得られる高さにはステータスバーとタイトルバーの高さの合計が含まれていますので 描画できる画面の高さは以下のように top を引いた値となります top=getwindow().findviewbyid(window.id_android_content).gettop(); h=canvas.getheight()-top; 例題 6-3 画面中央に羅針盤を置き タッチ位置から北東 南東 南西 北西の 4 方向を 判定します MainActivity.java package com.example.touch5; import android.app.activity; import android.content.context; import android.graphics.*; import android.os.bundle; import android.view.*; public class MainActivity extends Activity { private float w,h,top; private GView public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); gv=new GView(this); setcontentview(gv); private class GView extends View { private Bitmap img; public GView(Context context) { super(context); img=bitmapfactory.decoderesource(getresources(),r.drawable.compass);

35 protected void ondraw(canvas canvas) { top=getwindow().findviewbyid(window.id_android_content).gettop(); w=canvas.getwidth(); h=canvas.getheight()-top; canvas.drawbitmap(img,w/2-img.getwidth()/2,h/2-img.getheight()/2,null); public boolean ontouchevent(motionevent event) { if (event.getaction()==motionevent.action_move){ float px=event.getx(); float py=event.gety()-top; if (px>w/2 && py<h/2) settitle(" 北東 "); else if (px>w/2 && py>h/2) settitle(" 南東 "); else if (px<w/2 && py>h/2) settitle(" 南西 "); else if (px<w/2 && py<h/2) settitle(" 北西 "); return super.ontouchevent(event); 注 画面の幅と高さは View クラスの getwidth メソッド getheight メソッドで取得できます これらのメソッドは Gview コンストラクタ内では幅と高さが確定していないので値を取得できません ondraw メソッド内で取得します int w=getwidth(); int h=getheight(); Canvas クラスの getwidth メソッド getheight メソッドを使って次のように取得することもできます ただしこの場合 幅は View クラスの getwidth メソッドと同じですが 高さはステータスバーとタイトルバーの高さも含んでいます int w=canvas.getwidth(); int h=canvas.getheight();

36 画面サイズを別の方法で求めるには 11 章 ブラウザ (WebView) の 注 Display クラスの getwidth() と getheight() を参照 練習問題 6-3 1~8 のイメージを画面中央を中心とする半径 160 の円周上に配置します タッチ位置を元にタッチしたイメージを判定しなさい MainActivity.java package com.example.touch6; import android.app.activity; import android.content.context; import android.graphics.*; import android.os.bundle; import android.view.*;

37 public class MainActivity extends Activity { private int[] imageid={ R.drawable.num1,R.drawable.num2,R.drawable.num3,R.drawable.num4, R.drawable.num5,R.drawable.num6,R.drawable.num7,R.drawable.num8 ; private float public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(new GView(this)); private class GView extends View { public GView(Context context) { super(context); protected void ondraw(canvas canvas) { top=getwindow().findviewbyid(window.id_android_content).gettop(); w=canvas.getwidth(); h=canvas.getheight()-top; for (int i=0;i<8;i++){ Bitmap img=bitmapfactory.decoderesource(getresources(),imageid[i]); float x=(float)(160*math.cos(45*i*math.pi/180)); float y=(float)(160*math.sin(45*i*math.pi/180)); iw=img.getwidth(); ih=img.getheight(); canvas.drawbitmap(img, 1,h/2-y-ih/2,null); public boolean ontouchevent(motionevent event) { if (event.getaction()==motionevent.action_down){ float px=event.getx(); float py=event.gety()-top; for (int i=0;i<8;i++){ float x=(float)(160*math.cos(45*i*math.pi/180));

38 float y=(float)(160*math.sin(45*i*math.pi/180)); if ( 2 && px<w/2-x+iw/2 && h/2-y-ih/2<py && py<h/2-y+ih/2) settitle("no"+(i+1)); return super.ontouchevent(event); 注 Bitmap img=bitmapfactory.decoderesource(getresources(),imageid[i]); は ondraw メソッド内に置いているので 2-1 の 注 Android Lint Checks と 2-4 の 注 Android Lint Checks で示した理由により警告エラーとなります ondraw メソッド外でリソースを作成すればよいのですが 煩雑になるため ここでは ondraw 内に置きました

39 応用サンプル羅針盤の針を回す タッチムーブ位置の方向を指すように針を回転させます 羅針盤 compass と針 needle を画面中央に描画します 画面の中央位置を (w,h) に取得し canvas.translate(w,h); で画面中央に座標移動します 針の角度 angle はタッチ位置 (x,y) からアークタンジェントを使って Math.atan(y/x)*180/Math.PI で求め canvas.rotate(angle); で座標回転します MainActivity.java package com.example.compass; import android.app.activity; import android.os.bundle; import android.content.context; import android.graphics.*; import android.view.*; public class MainActivity extends Activity { private GView gv; private int w,h; private float public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); gv=new GView(this); setcontentview(gv); private class GView extends View { private Bitmap needle,compass; public GView(Context context) { super(context); needle=bitmapfactory.decoderesource(getresources(),r.drawable.needle); compass= BitmapFactory.decodeResource(getResources(),R.drawable.compass);

40 protected void ondraw(canvas canvas) { top=getwindow().findviewbyid(window.id_android_content).gettop(); w=getwidth()/2; h=getheight()/2; canvas.drawcolor(color.white); canvas.translate(w,h); canvas.drawbitmap(compass,-compass.getwidth()/2, -compass.getheight()/2, null); canvas.rotate(angle); canvas.drawbitmap(needle,-needle.getwidth()/2, -needle.getheight()/2, null); public boolean ontouchevent(motionevent event) { if (event.getaction()==motionevent.action_move){ float x=event.getx()-w; float y=event.gety()-top-h; angle=(float)(math.atan(y/x)*180/math.pi); if (x<0) angle+=180; gv.invalidate(); return super.ontouchevent(event);

41

42 7-2 アラート ダイアログ AlertDialog はユーザに何らかの処理に対する問い合わせ (OK や CANCEL など ) を行 うダイアログクラスです 1. AlertDialog.Builder AlertDialg のコンストラクタには直接アクセスできませんので 以下のように AlertDialog.Builder クラスのオブジェクト builder を使ってアラート ダイアログの内容を設定します AlertDialog.Builder builder=new AlertDialog.Builder(this); builder.settitle(" 確認 "); builder.setmessage(" 処理してよいですか "); 2. ボタンのリスナーの設定 AlertDialog の OK ボタンをクリックしたときのリスナーは setpositivebutton メソッドを使って以下のように設定します 同様に CANCEL ボタンのリスナーは setnegativebutton メソッドを使って設定します builder.setpositivebutton("ok",new DialogInterface.OnClickListener() { public void onclick(dialoginterface dialog, int which) { OK ボタンがクリックされたときの処理 ); 3. ダイアログの表示 上の 1 2 で設定したアラートダイアログ ビルダーの builder を使って AlertDialg ク ラスのオブジェクト dialog を生成し show メソッドで表示します AlertDialog dialog=builder.create(); dialog.show(); 4. アイコン builder.seticon(r.drawable.tab1); でアイコンを指定できます サイズは mdpi で とします

43 5. Neutral ボタン ボタンは NegativeButton,NeutralButton,PositiveButton の順に並びます builder.setneutralbutton("neutral",new DialogInterface.OnClickListener() { public void onclick(dialoginterface dialog, int which) { settitle("neutral"); ); 注 Android 2.x ではボタンは PositiveButton NeutralButton NegativeButton の順 に並びます 例題 7-2 画面のタッチでアラート ダイアログを表示します OK CANCEL ボタンの クリックでどちらのボタンがクリックされたのかのメッセージをタイトルバーに表示しま す MainActivity.java package com.example.alert1; import android.app.activity; import android.app.alertdialog; import android.content.dialoginterface; import android.os.bundle; import android.view.motionevent; public class MainActivity extends Activity public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_main); public boolean ontouchevent(motionevent event) { if (event.getaction()==motionevent.action_down){ AlertDialog.Builder builder=new AlertDialog.Builder(this); builder.settitle(" 確認 "); builder.setmessage(" 処理してよいですか ");

44 builder.setpositivebutton("ok",new DialogInterface.OnClickListener() { public void onclick(dialoginterface dialog, int which) { settitle("ok"); ); builder.setnegativebutton("cancel", new DialogInterface.OnClickListener() { public void onclick(dialoginterface dialog, int which) { settitle("cancel"); ); AlertDialog dialog=builder.create(); dialog.show(); return super.ontouchevent(event);

45 練習問題 7-2 例題 7-2 にアイコンと Neutral ボタンを追加しなさい MainActivity.java package com.example.alert2; import android.app.activity; import android.app.alertdialog; import android.content.dialoginterface; import android.os.bundle; import android.view.motionevent; public class MainActivity extends Activity public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_main); public boolean ontouchevent(motionevent event) { if (event.getaction()==motionevent.action_down){ AlertDialog.Builder builder=new AlertDialog.Builder(this); builder.settitle(" 確認 "); builder.setmessage(" 処理してよいですか "); builder.seticon( 1 ); builder.setpositivebutton("ok",new DialogInterface.OnClickListener() { public void onclick(dialoginterface dialog, int which) { settitle("ok"); ); builder.setnegativebutton("cancel", new DialogInterface.OnClickListener() { public void onclick(dialoginterface dialog, int which) { settitle("cancel"); );

46 builder. 2 ("Neutral",new DialogInterface.OnClickListener() { public void onclick(dialoginterface dialog, int which) { settitle("neutral"); ); AlertDialog dialog=builder.create(); dialog.show(); return super.ontouchevent(event);

47 応用サンプル食文化判定 質問項目を示す 2 分木の項目ノードが node[ ] に 左 右へのポインタが left[ ],right[ ] に格納されています ノード位置を p で示し ルートノード (p=0) から初めて left[p] または right[p] が -1 になるまで木を進みます 質問項目はアラート ダイアログで表示し Yes ボタンで左の木へ進み No ボタンで右の木へ進みます MainActivity.java package com.example.tree1; import android.app.activity; import android.app.alertdialog; import android.content.dialoginterface; import android.os.bundle; import android.view.motionevent; public class MainActivity extends Activity { private String node[]={ " お米が好きですか ", " 味噌汁が好きですか ", " パスタが好きですか ", " あなたは和食派です ", " あなたは中華派です ", " あなたはイタリアンです ",

48 " あなたはフレンチです "; private int left[]={1,3,5,-1,-1,-1,-1; private int right[]={2,4,6,-1,-1,-1,-1; private static int public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_main); public boolean ontouchevent(motionevent event) { if (event.getaction()==motionevent.action_down){ final AlertDialog.Builder builder = new AlertDialog.Builder(this); builder.settitle(" 食文化判定 "); builder.setpositivebutton("yes",new DialogInterface.OnClickListener() { public void onclick(dialoginterface dialog, int which) { p=left[p]; if (p==-1){ p=0; else { builder.setmessage(node[p]); builder.create().show(); ); builder.setnegativebutton("no", new DialogInterface.OnClickListener() { public void onclick(dialoginterface dialog, int which) { p=right[p]; if (p==-1){ p=0; else { builder.setmessage(node[p]); builder.create().show();

49 ); builder.setmessage(node[p]); builder.create().show(); return super.ontouchevent(event);

50 10-3 イメージを画面上で移動する 一定時間ごとの処理の具体例として イメージを画面上で移動します 1. ボールの移動ボールのイメージファイルは ball.png サイズは ピクセル 1 回にボールが進む距離は 10 ピクセルとします ボールの位置 ( 左上隅 ) を x,y 移動量を dx,dy とすると ボールを左右に移動するには x+=dx ボールを上下に移動するには y+=dy とします 斜めに移動する場合は x+=dx と y+=dy の両方を行います 2. 壁にボールがあたったときの判定 ボールが左右壁にあたったときに dx の値の符号を反転するには次のようにします w は 画面の幅です 10 はボールのサイズです if (x<=0 w-10<=x) dx=-dx; ボールが上下壁にあたったときに dy の値の符号を反転するには次のようにします h は 画面の高さです if (y<=0 h-10<=y) dy=-dy; 例題 10-3 ボールを 100 ミリ秒単位で横方向に移動し 左右壁でボールを跳ね返します MainActivity.java package com.example.handler5; import android.app.activity; import android.content.context; import android.os.bundle; import android.os.handler; import android.view.*; import android.graphics.*; public class MainActivity extends Activity implements Runnable{

51 private int x=60,dx=10,w; private Handler hd=new Handler(); private GView public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); gv=new GView(this); setcontentview(gv); hd.post(this); public void run() { x+=dx; if (x<=0 w-10<=x) dx=-dx; gv.invalidate(); hd.postdelayed(this,100); class GView extends View { private Bitmap ball; public GView(Context context) { super(context); ball=bitmapfactory.decoderesource(getresources(),r.drawable.ball); public void ondraw(canvas canvas){ w=getwidth(); canvas.drawcolor(color.white); canvas.drawbitmap(ball,x,60,null);

52 練習問題 10-3 ボールを 100 ミリ秒単位で斜めに移動し 上下壁 左右壁でボールを跳 ね返しなさい MainActivity.java package com.example.handler6; import android.app.activity; import android.content.context; import android.os.bundle; import android.os.handler; import android.view.*; import android.graphics.*; public class MainActivity extends Activity implements Runnable{ private int x=60,y=60,dx=10,dy=10,w,h; private Handler hd=new Handler(); private GView public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); gv=new GView(this); setcontentview(gv); hd.post(this); public void run() { x+=dx;y+=dy; if (x<=0 w-10<=x)

53 dx=-dx; if ( 1 ) dy=-dy; gv.invalidate(); hd.postdelayed(this,100); class GView extends View { private Bitmap ball; public GView(Context context) { super(context); ball=bitmapfactory.decoderesource(getresources(),r.drawable.ball); public void ondraw(canvas canvas){ w=getwidth(); h= 2 canvas.drawcolor(color.white); canvas.drawbitmap(ball,x,y,null);

54 応用サンプルラケットゲーム 1 タッチムーブイベントでラケットを移動し ボールを跳ね返します 練習問題 10-3 を元にラケットの移動処理とボールをラケットで跳ね返す処理を追加します ボールがラケットに当たったを判定するのに y 座標に関する等価比較を行うため ラケットの y 座標はボールの移動量の 10 の倍数とします 画面の高さを元に以下で計算します ry=(getheight()/10)*10-100; ボールとラケットのイメージのサイズは以下で計算します ボールの高さと幅は同じと仮定しています ballw=ball.getwidth(); barw=bar.getwidth(); MainActivity.java package com.example.racket1; import android.app.activity; import android.content.context; import android.os.bundle; import android.os.handler; import android.view.*; import android.graphics.*; public class MainActivity extends Activity implements Runnable{ private int x=100,y=100,dx=10,dy=10,rx=100,ry,w,ballw,barw; private GView gv; private Handler hd=new public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); gv=new GView(this); setcontentview(gv); hd.post(this); public void run() { x+=dx;y+=dy;

55 if (x<=0 w-ballw<=x) dx=-dx; if (y<=0) dy=-dy; if (rx-ballw<=x && x<=rx+barw && y+ballw==ry) // ラケットで跳ね返す dy=-dy; gv.invalidate(); hd.postdelayed(this,100); class GView extends View { private Bitmap ball,bar; public GView(Context context) { super(context); ball=bitmapfactory.decoderesource(getresources(),r.drawable.ball); bar=bitmapfactory.decoderesource(getresources(),r.drawable.bar); ballw=ball.getwidth(); barw=bar.getwidth(); public void ondraw(canvas canvas){ w=getwidth(); ry=(getheight()/10)*10-100; canvas.drawcolor(color.white); canvas.drawbitmap(ball,x,y,null); canvas.drawbitmap(bar,rx,ry,null); public boolean ontouchevent(motionevent event) { // ラケットの移動 if (event.getaction()==motionevent.action_move){ rx=(int)event.getx()-barw/2; if (rx<barw/2) rx=0; if (rx>w-barw) rx=w-barw; gv.invalidate(); return super.ontouchevent(event);

56

57 17-2 複数のテキストを読み上げる txt[ ] 配列の読み上げテキストが行単位で格納されているとき 行間に 1 秒のサイレントを入れるには以下のようにします なお 複数のテキストを連続して読み上げる場合は QUEUE_ADD モードにします QUEUE_FLUSH モードだと最後のテキストしか読み上げられません for (int i=0;i<n;i++){ ts.speak(txt[i],texttospeech.queue_add,null); ts.playsilence(1000,texttospeech.queue_add,null); 例題 17-2 複数のテキストを 行間に 1 秒のサイレントを入れて読み上げます MainActivity.java package com.example.speech2; import java.util.locale; import android.app.activity; import android.os.bundle; import android.speech.tts.texttospeech; import android.speech.tts.texttospeech.oninitlistener; import android.view.motionevent; import android.widget.*; public class MainActivity extends Activity implements OnInitListener{ private TextToSpeech public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_main); ts=new TextToSpeech(this,this); public boolean ontouchevent(motionevent event) { if (event.getaction()==motionevent.action_down){ String txt[]={"good morning","hello","good night";

58 if (ts.isspeaking()) ts.stop(); ts.setspeechrate(1.0f); for (int i=0;i<txt.length;i++){ ts.speak(txt[i],texttospeech.queue_add,null); ts.playsilence(1000,texttospeech.queue_add,null); return super.ontouchevent(event); public void oninit(int status) { if (status==texttospeech.success){ Locale locale=locale.english; if (ts.islanguageavailable(locale)>=texttospeech.lang_available) ts.setlanguage(locale); else Toast.makeText(this," この言語は未サポートです ",Toast.LENGTH_LONG).show(); else Toast.makeText(this," 音声合成できません ",Toast.LENGTH_LONG).show(); protected void ondestroy(){ super.ondestroy(); if (ts!=null) ts.shutdown();

59 17-3 通訳アプリ 音声合成機能を使って簡単な通訳アプリを作ることができます 例題 17-3 ListView に登録した日本語に対応する英語を読み上げます activity_main.xml <LinearLayout xmlns:android=" android:orientation="vertical" android:layout_height="fill_parent" > <ListView android:layout_height="wrap_content" /> </LinearLayout> MainActivity.java package com.example.speech3; import java.util.locale; import android.app.activity; import android.os.bundle; import android.speech.tts.texttospeech; import android.speech.tts.texttospeech.oninitlistener; import android.view.*; import android.widget.*; public class MainActivity extends Activity implements OnInitListener{ private TextToSpeech ts; private String[] Japanese={ " おはよう "," こんにちは "," おやすみ "," ありがとう ", " お名前は "," お値段は "," すみません "," 美味しいです ", " 何時ですか "," 友達になってください "," 何をお求めですか ",

60 " 病院はどこですか "," お茶を飲みましょう "," もう一度言って下さい "; private String[] English={ "Good morning","hello","good night","thank you", "What is the name?","how much is a price?","i'm sorry","i am delicious", "What time is it?","please make friends","what is it a request in?", "Where is the hospital?","let's drink tea","please say once public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_main); ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, android.r.layout.simple_list_item_1); for (int i=0;i<japanese.length;i++) adapter.add(japanese[i]); ListView lv=(listview)findviewbyid(r.id.listview); lv.setadapter(adapter); lv.setonitemclicklistener(new AdapterView.OnItemClickListener() { public void onitemclick(adapterview<?> parent, View view,int position, long id) { if (ts.isspeaking()) ts.stop(); ts.setspeechrate(1.0f); ts.speak(english[position],texttospeech.queue_flush,null); ); ts=new TextToSpeech(this,this); public void oninit(int status) { if (status==texttospeech.success){ Locale locale=locale.english; if (ts.islanguageavailable(locale)>=texttospeech.lang_available) ts.setlanguage(locale); else Toast.makeText(this," この言語は未サポートです ", Toast.LENGTH_LONG).show();

61 else Toast.makeText(this," 音声合成できません ", Toast.LENGTH_LONG).show(); protected void ondestroy(){ super.ondestroy(); if (ts!=null) ts.shutdown();

62