こんにちは。
キャスレーコンサルティングSI(システム・インテグレーション)部の瀧下です。
電卓にメモリストが付いたAndroidアプリ開発で、
GUIコンポーネントの一つであるListViewを使ってみたので、説明していきたいと思います。
●メモ機能付き電卓アプリ機能
・計算処理
・メモリスト作成
・メモリストタップでメモ追加時の計算結果出力
※eclipseまたはAndroid Studio、Android SDKのインストール方法については
ネットに多数記載されているので、割愛させていただきます。
ListViewとは？
Androidアプリ開発では、アプリのパーツを簡単に追加できる
GUIコンポーネントが数多く用意されていますが、ListViewはその中の一つです。
配列やデータをスクロール可能なリストで表示させることができ、
リスト行タップ時に、それに対応する動作を行うことができるため非常に便利です。
実装前にライフサイクルを知る
いざアプリ作成を始めようと、プロジェクト作成すると自動生成されたのが、
下のソースのonCreateメソッドです。
public class MainActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
}
onCreate()メソッドとは何なのか？
早速、onCreate()メソッドの調査から始めました。
onCreateメソッドは、ライフサイクル(状態遷移)のフローの一つのようです。
では次にライフサイクルとは何なのか？
ライフサイクルとは、アプリケーション起動、実行、終了という
アクティビティの一連の動作をライフサイクルと呼びます。
上の図は、アクティビティのライフサイクル図ですが、
一番上に存在していることから分かるように、起動時にはonCreateメソッドから呼び出されます。
以下で、各メソッドの呼ばれるタイミングについて説明します。
・onStart()、onResume()・・・onCreate()から順に呼ばれて、「実行中」状態に遷移する。
・onPause()・・・別アクティビティの開始時。
・onStop()・・・アクティビティが非表示になった場合。
・onDestroy()・・・アクティビティの終了時。
AndroidアプリはonCreate()がないことには始まらないのですね。。。
onCreate()メソッドに電卓機能を実装していきます。
電卓機能で実装漏れしていた箇所
アプリ作成後に実装漏れがあったことに気付きました。
演算子の連続入力です。
btnPlus.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// 既に演算子が含まれている場合は計算処理を行う
if (mFormulaFlg) {
number = rs.equal(number);
rs.calculation(number, 1);
formula = number + "+";
number = "";
counter_text.setText(formula + number); // 数値をストリングに変換して表示
上のソースは、電卓の「+」タップ時に呼び出される処理です。
既に「9+7」を入力していた場合、「＋」タップ時に「16+」と電卓に表示させるように
実装していますが、もし「16+」が入力されているところに「+」を入力すると、
「16++」で加算処理を行ってしまうので、アプリが落ちてしまいます。
実機動作確認でアプリが落ちるときは、アラームが鳴るので、
あの音を聞くと結構力が抜けるのは、Android開発あるあるではないでしょうか。
対応としては、substringで計算式の末尾文字を取得して条件分岐すれば、
連続で演算子が入力された場合、スルーさせたり演算子の置換等ができますね。
動作確認がタップで簡単なので、今後はランダムテスト的に行うように注意します。
メモ機能の実装
ではメモ機能の実装について説明させていただきます。
①「メモ追加」ボタンをレイアウトに追加するため、xmlファイルにボタンタグを追加します。
<Button android:id="@+id/btnMemo" style="?android:attr/buttonStyleSmall" android:layout_width="80dp" android:layout_height="65dp" android:layout_marginLeft="510dp" android:layout_marginTop="15dp" android:background="@drawable/tegaki" />
エミュレーターでは、以下のボタンにあたります。
※ボタンは背景画像をつけています。
②①のボタン押下時にメモダイアログを表示させます。
③ダイアログを表示させるために、AlertDialogを使用します。
AlertDialog.Builder dialog = new AlertDialog.Builder(MainActivity.this);
④テキストボックスを作成するEditTextを準備します。
setTitleでダイアログのタイトル部に表示させたい文字列、setViewでViewをセットできるので、今回はテキストボックスをセットします。
final EditText editView = new EditText(MainActivity.this);
dialog.setTitle("Memo");
dialog.setView(editView);
AlertDialog、EditText、どちらもGUIコンポーネントです。
⑤ダイアログ内にボタンを設置します。
そのためにBuilderクラスで用意されているsetPositiveButtonメソッドを使います。
メソッド内で、計算結果と入力テキストをデータクラスに格納しています。
dialog.setPositiveButton("追加", new DialogInterface.OnClickListener() {
public void onClick(DialogInterface dialog, int whichButton) {
// データ格納クラスのインスタンス生成
Memo mm = new Memo();
// 追加ボタンをタップ時の処理
String text = editView.getText().toString();
// メモと数値をセット
mm.setMemo(text);
mm.setNum(number);
// リストにメモと数値を格納
memoList.add(mm);
// アダプターにテキストをセット
adapter.add(editView.getText().toString());
}
});
上の画像は、アダプターに入力テキストを格納していますが、
アダプターは、ListView実装時に重要なものになるので、後述でListViewと併せて説明させていただきます。
// アダプターにテキストをセット adapter.add(editView.getText().toString());
アダプターは事前にメンバ変数で定義しておきます。
// ArrayAdapterオブジェクト生成 adapter = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1);
アダプターにも種類がありますが、今回はSDKが標準で用意しているArrayAdapterを使いました。
⑥最後にshowメソッドでダイアログ表示です。
dialog.show();
次は、いよいよListViewについて説明していきます。
ListViewを使ってみる
①xml内でListViewを定義します。
<ListView android:id="@+id/list_view" android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_alignParentTop="true" android:layout_marginLeft="450dp" android:layout_marginTop="125dp" > </ListView>
②xmlで定義したListViewをJavaで使う準備です。
// ListViewオブジェクトの取得 ListView listView = (ListView) findViewById(R.id.list_view);
③ListViewのアイテムクリック時の処理を記述します。
実装も簡単で、ボリュームは以下の通りです。
// ListViewのアイテムクリック時処理
listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
public void onItemClick(AdapterView<?> adapterView, View view, int position, long id) {
// 取得した数値を表示
counter_text.setText(memoList.get(position).getNum());
}
});
ここでは、「リスト表示されるアイテムクリック時のイベント」を定義しますが、
それを実現するインタフェースが、onItemClickメソッドです。
onItemClick(AdapterView<?> adapterView, View view, int position, long id)
上記のように、このように引数が多いので、具体的な役割について以下で説明します。
adapterView・・・クリックした項目のAdapterViewです。今回はListViewになります。
view・・・クリックアイテムのViewです。
position・・・クリックした項目のListView内でのpositionです。Indexで0から始まっています。
id・・・クリックした項目にセットされているIDです。
ListViewの実装時に、疑問に思ったのは
「項目にメモリストを表示したいのに、その実装はどうやって行うのか？」という事です。
ListViewに登録データを項目として表示させたい。
そんな時に利用するのが、アダプターです。
Adapterとはデータを担当するListと、UIを担当するListViewの橋渡しをするコンポーネントです。
そして、実際に関連付けが行われるのがsetAdapterメソッドです。
// ListViewとAdapterの紐付け listView.setAdapter(adapter);
これで、ListViewにメモリストを表示させる準備は完了です。
つまり、メモ機能で実装しているアダプターにセットさせるものは、
ListViewの項目で表示させたいデータという事になります。
// アダプターにテキストをセット adapter.add(editView.getText().toString());
④選択アイテム取得処理です。
// ListViewのアイテムクリック時処理
listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
public void onItemClick(AdapterView<?> adapterView, View view, int position, long id) {
// 取得した数値を表示
counter_text.setText(memoList.get(position).getNum());
}
});
クリックして取得したいのは、メモに関連付いた計算結果なので、
setTextメソッドにメモデータ格納クラスのオブジェクトをセットしていた
memoListから選択位置であるposition(index)を利用して、クリックアイテムに紐付く計算結果を取得します。
自分のアプリでは利用しませんでしたが、選択アイテムを取得するために、
ListViewにはgetItemAtPositionというメソッドが用意されています。
記述すると、こんな感じです。
// 選択アイテムを取得 ListView listView = (ListView) adapterView; String selectItem = (String) listView.getItemAtPosition(position);
getItemAtPositionではListの表示内容を取得することができるため、
本来はデータ格納クラスのオブジェクトを用意せずに、選択項目のデータ取得ができます。
完成イメージ(エミュレーター画面)
最後に
今回は、GUIコンポーネントのListViewをピックアップして説明させていただきましたが、
上記のアプリ紹介の説明だけでも、アラートダイアログやエディットテキストなどのGUIコンポーネントが登場しています。
他にも様々な種類のGUIコンポーネントが存在しており、
パレットが用意されていることで、配置もドラッグ＆ドロップでレイアウト作成が可能なので
画面レイアウトを見ながら、実装できることもandroid開発の魅力の一つです。
私は、iphoneなのでエミュレーターで動作確認しましたが、
androidをお持ちの方は、ぜひ実機確認でandroid開発を楽しんでみてください。
ご一読頂き、ありがとうございました。
