こんにちは。
キャスレーコンサルティング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メソッドは、ライフサイクル(状態遷移)のフローの一つのようです。
では次にライフサイクルとは何なのか?

ライフサイクルとは、アプリケーション起動、実行、終了という
アクティビティの一連の動作をライフサイクルと呼びます。

メモ機能付き電卓アプリについて.xlsx

上の図は、アクティビティのライフサイクル図ですが、
一番上に存在していることから分かるように、起動時には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開発の魅力の一つです。

comp

私は、iphoneなのでエミュレーターで動作確認しましたが、

androidをお持ちの方は、ぜひ実機確認でandroid開発を楽しんでみてください。

ご一読頂き、ありがとうございました。


こんにちは、キャスレーコンサルティングのSI(システム・インテグレーション)部:藤沢です。

前回のブログ「Xamarinでマルチデバイス開発(インストール編)」ではXamarinのインストール を行いましたので、
今回はAndroidの実機でデバッグを行いたいと思います。 (続きを読む…)


こんにちは、キャスレーコンサルティングのSI(システム・インテグレーション)部:藤沢です。

今回は、XamarinをインストールしてAndroidアプリを作成したいと思います。
XamarinはネイティブのiOS、Android、Windowsのアプリを一般的なC#/.NETコードベースから構築するための
モバイルアプリ開発プラットフォームです。(MSDNより) (続きを読む…)


はじめに

こんにちは。SD(システム・デザイン)部の青木です。
今回は簡単なGoogleMapsアプリの作成についてご紹介します。
具体的には、Googleマップにマーカーを立て、クリックした地点とマーカーをつなぐという動きを実現する方法となります。 (続きを読む...)

こんにちは。SD部の小田切です。
今回はAndroid Studioを使い、手軽にAndroid開発を始める方法をご紹介したいと思います。

まずは準備編と位置づけ、Android Studioのインストール・サンプルプロジェクトの作成・エミュレータでの動作確認までをご紹介します。

始めに

Android Studioとは、Androidプラットフォームに対応する統合開発環境(IDE)です。

Android開発をやってみよう! ~準備編~_01

2014年12月8日に正式バージョン1.0.0が公開さた後、頻繁にバージョンアップを伴い、2015年11月現在、最新バージョンは1.4.1となっています。
Android Studioの公開に伴い、それまでの一般的なAndroid開発手法であったEclipseとADT(Android Developer Tools)は非推奨とされ、Android Studioが公式のIDEとされています。 (続きを読む…)


こんにちは。

田中(邦)です。

今回はAmazon Simple Queue Service(Amazon SQS)Amazon Simple Notification Service(SNS)を使ってAndroid端末にプッシュ通知を送信する仕組みを実装していきます。

(続きを読む…)



  • Profile
    キャスレーコンサルティングの技術ブログです。
    当社エンジニアが技術面でのTips、技術系イベント等についてご紹介いたします。
  • CSV社長ブログ
  • チーム・キャスレーブログ