2012年01月11日

割り勘アプリでAndroidアプリ開発を体験、その6 ボタンの動作を作る。


前回(その5)までは簡単に画面レイアウトを作成しました。色や大きさ配置などの、細かな見た目のデザインは、おおまかにアプリの動作確認を終えた後にじっくりと考えてデザインします。これがアプリ開発のコツです。

今回はボタンを押すと、合計支払額を人数で割り、その結果を表示する動作をプログラミングします。ここからはJAVAの言語で作成していきます。

Androidアプリを開発する際、Javaプログラミングでは、いくつかの約束ごとがあります。

基礎知識として3つほどの概念を覚えましょう。プログラミングコードはコピーして貼り付ければ十分です。コードまで覚える必要はありませんし、Eclipseでは自動的にコードが表示されるようになっています。初めは概念だけ覚えれば十分です。

アプリ開発の基本パターン


Sponsored Link


ボタンを押す時の動作を書く場合を例とします。

1.最初にレイアウト画面で使用するパレット部品(ボタン)の宣言を書きます。

Button ○○btn;

ボタンを宣言(これから○○という名のボタンを使いますという意味)


2.レイアウト画面とプログラミングの関連(レイアウトの部品の名前を決めます。)

○○btn = (Button)findViewById(R.id.Button01);

main画面のボタンButton01を○○btnという名前で使用するという意味


3.ボタン(レイアウト画面の部品)の動作(マウスがクリックされたなど)の反応を捕らえます。

○○btn.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
//ボタンがクリックされた時の処理を書く
}
});

この3つのパターンを使う例が多いです。クリックして何か動作(計算や何かを表示するなど)させる時の決まり文句です。(最初のうちは、覚える必要はなくコピーでOK)

それでは、いよいよ実際にプログラミングします。


部品を宣言する



Eclipseでmain.xmlを開きます。(前回まででmain.xmlが開いていると思います。)

パッケージエクスプローラで
Warikan → res → layout → main.xml をダブルクリックします。

右側のアウトラインを見ると、現在配置している部品の一覧が表示されています。この部品のうちボタンを押した時の処理(動作)に関係する部品の宣言をします。

処理の流れは

ボタンを押すと、合計支払額の数値を取ってきて、人数の数値で割り算を行い、その結果をTextViewに表示するということになります。

見出し部分(合計支払額と人数)は処理に関係ないのでプログラムする必要はありません。すでに前回までで見出し部分が表示されることは確認されていますから。

わかりやすい用に画面に表示されている順番に書きます。

dousa10.JPG

JAVAではひとつの処理命令の終わりは ; です。
そしてコメントは // の右側部分1行です。

最初に必要な部品の宣言です。

EditText goukei;//合計支払額の数値を入れる
EditText ninzu; //人数の数値を入れる
TextView kekka; //割り算の結果を表示する

ここで goukei ninzu kekka は自由に自分で理解しやすい文字にします。

それでは、これをコピーしてEclipseに入れましょう。

Eclipseのパッケージエクスプローラーから

Warikan → src com.test.warikan → WarikanActivity.javaをダブルクリックします。

すると、真ん中の画面に WarikanActivity.java が表示されます。これがプログラミングの入力画面になります。ここにいろいろとプログラミングします。

dousa11.JPG

それでは、上記の宣言部分を追加します。追加する位置は、

setContentView(R.layout.main); ←この行の終わりで改行する。

の下に入れますので、Enterを2回ほど押してスペースを作ります。そして上記コードを貼り付けます。

dousa12.JPG

すると、エラー(赤バツマークと赤の下線)が表示されます。このエラーはEditTextとTextViewの部品を使う用意がされていないのでエラーとして表示されます。部品が使えるようにします。

赤い下線のEditTextにマウスを乗せると、「EditTextをインポートします」という表示が現れるので、それをクリックします。するとEditTextのエラーが消えました。

次に赤い下線のTextViewを同じようにマウスをのせインポートします。

これでエラーが消えました。黄色の警告が表示されていますが、これはこの後プログラミングで修正されますので、今は問題ありません。

レイアウト部品の関連付け(参照)



宣言が終わりましたので、次に画面レイアウトの部品と上記宣言の部品を関連付けます。

goukei = (EditText)findViewById(R.id.editText1);//合計
ninzu = (EditText)findViewById(R.id.editText2);//人数
kekka = (TextView)findViewById(R.id.textView2);//結果表示

最初の goukei 行の意味は、これからのプログラミングでレイアウト画面の部品editText1をgoukeiとして使いますという意味です。レイアウト画面 main.xmlをクリックして右のアウトラインに部品の名前が表示されています、それと関連付けてプログラミングを始めます。

それでは、上記3行をコピーしてWarikanActivity.javaに追加しましょう。追加位置は先ほどの下ですが見やすいように改行しましょう。

dousa13.JPG

では、ボタンを押した時の動作を書きましょう。ボタンは未だ宣言を書いてませんので、宣言とレイアウト部品の名前を決めます。

Button keisanbtn;//計算ボタンの宣言

keisanbtn = (Button)findViewById(R.id.button1);//計算ボタン

上記のボタンの宣言とレイアウト画面の関連付けを追加します。
すると、Button の下線部が赤くなりエラーが表示されるので、マウスをあててButoonをインポートしてエラーを消します。

dousa14.JPG

ボタンの動作



そして、クリックされた時の動作を追加して書きます。

keisanbtn.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
//ボタンがクリックされた時の処理を書く
}
});

dousa15.JPG

すると、今度は3箇所ほどエラーが表示されました。プログラミングはこのようにエラーをつぶしていく作業で時間を費やされます。逆に言うと、いかにエラーを解決する方法を知っているかどうかが技術力の差にもなります。

ここでは、View にマウスをあててViewをインポートしてください。

すると前のエラー部分 setOnClickListener のエラーも消えます。エラーを解決する場合、いつも書いてある順番どおりではなく、後ろのエラーを解決すると前の部分のエラーが解決できることもあります。エラーを消していく手順としては、赤の下線が出ている部分にマウスを乗せて、最初にインポートでエラーを消してしまうのがコツです。

ボタンがクリックされた時の処理として次のコードを入力してください。「//ボタンがクリックされた時の処理を書く」の下にEnterを2回ほど押してコピーしてください。

kekka.setText("押されたよ");

このコードは、計算結果を表示する部分に、押されたよ と表示するコードです。

追加すると、今度は kekka の下部に赤いエラーが表示され、マウスを乗せると、「修飾子をfinalに変更します」と表示が出るので、それをクリックします。

dousa16.JPG

クリックすると、kekka の宣言部分が次のように自動で変更されます。

final TextView kekka; //割り算の結果を表示する

エラーがないことを確認してから、ここで動作確認してみましょう。
(finalとかの意味はプログラミングを続けていくうちに感覚的に理解できます。最初はあまり気にせずに 「エラーを潰して動作させる」 ことを考えましょう。)

動作確認



パッケージエクスプローラのWarikanを右クリックして実行してください。

ボタンを押して、「押されたよ」と表示されればOKです。後は割り算をプログラミングすれば完成です。

dousa17.JPG

割り算を行う



ボタンを押して動作することが確認できましたので、割り算の計算に移ります。アプリ開発のコツはこのように部分的に動作を検証して作り上げていきます。

計算を行う場合には数値として扱いますので、(プログラミングでは数値と文字は別のもので取り扱い方法が異なります。)最初に数値を入れる変数(箱のようなイメージ)を宣言します。

int kingaku=0;//合計支払額を数値として入れる。
int nin=0; //人数を数値として入れる。
int kaihi=0; //割り算の結果を数値として入れる。

int というのは数値を入れる変数を意味しJAVAで決められています。 kingaku や nin や kaihi は自分で理解しやすい名前を自由につけます。初期値として数値の0を入れておきます。

合計支払額を kingaku という変数へ数値として入れるコードは次のようになります。

kingaku=Integer.valueOf(goukei.getText().toString());

これはむずかしいですね。深く考えずにコードをコピーしましょう。
このコードの意味は、kingaku という変数(数値を入れる箱)へ goukei (最初の宣言部分で書いた部品EditText)に入力された文字を数値に変換してから入れるという意味です。

Integer.valueOf()は文字を数値に変換すること。

getText().toString() は部品EditTextから文字をとってくる。

ということですが、これらは決まっている書き方なのでコピーして使いましょう。長いコードですが、プログラムする時に変更する場所は、kingaku と goukei の二つの部分だけです。これは使っていくうちに慣れてきます。

このように頻繁に使うコードは、メモ帳などにコピーして残しておくと、いろいろなプログラミングの時に役立ちます。Android Tips.txt などの名前で自分専用のコード集を持つと便利ですね。

上記のコードはインターネットの検索サイトYahooなどで「Android EditText 文字列を数値に変換」などで調べることが出来ます。JAVAのコードですね。

同じように人数を数値としてとってくるコードは次のようになります。

nin=Integer.valueOf(ninzu.getText().toString());

上記コードを見てもらうとわかりますが、変更する部分は、nin と ninzu の2箇所だけですので、コピーして使いましょう。

ここまでで、kingaku に合計支払額が数値として入り、 nin に人数が数値として入りましたので、割り算を行う準備が出来ました。

割り算の式をコードとして書きます。

kaihi=kingaku/nin;

割り算は / です。JAVAなどのプログラミングで決められています。掛け算は * です。

コードの意味は、kaihi という変数(箱)に kingaku ÷ nin の結果を入れるということになります。

最後に計算結果 kaihi を表示します。

kekka.setText(String.valueOf(kaihi));

このコードの意味は、kekka (最初の宣言部分で表示用にTextViewを使っていますね。)に文字列として表示するという意味です。

setText() は、TextViewに文字を表示します。

String.valueOf(kaihi)は、数値 kaihi を文字列に変換します。

なぜ、こんなややこしいコードになるかというと、プログラミングでは文字列と数字を厳格に区分しており、数値用の変数には文字列は入れられませんし、文字列用の変数には数値は入らないのが原則となっています。

以上の割り算のコードをまとめると次のようになります。

//数値を入れる変数(箱)を宣言する、初期値を0
int kingaku=0;
int nin=0;
int kaihi=0;

//数値を取り出す
kingaku=Integer.valueOf(goukei.getText().toString());
nin=Integer.valueOf(ninzu.getText().toString());

//割り算を行い、結果を表示
kaihi=kingaku/nin;
kekka.setText(String.valueOf(kaihi));

この部分を追加してください。追加する際には、次のコードの最初にコメントマーク // を入れて動作しないようにして、コードの終わりで改行2回して追加します。

//kekka.setText("押されたよ");

次のようになります。

warizan10.JPG

それでは、ここで動作確認を行います。パッケージエクスプローラのWarikanを右クリックして実行 → Androidアプリケーションでエミュレータで動作します。

合計支払額と人数に数字を入力してボタンを押して計算が行われるか確認しましょう。ただし、気をつけなければならないのは、数字を入れないでボタンを押すとエラーが起きます。強制終了されてしまった場合には、エミュレータの中には、すでに Warikanアプリがインストールされていますので、再度起動させて動作を確認してください。

warizan11.JPG

いろいろと数値を入れて動作確認していると、エラーの起きる状況がわかってきます。そのエラー処理は次回書きましょう。

どうやら次のエラーは数値を入れずにボタンを押した場合や人数欄が0の場合に発生するようです。

err10.JPG

Sponsored Link
posted by Kunihiko at 17:34 | Comment(0) | TrackBack(0) | 割り勘アプリの開発を体験 | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

この記事へのトラックバックURL
http://blog.seesaa.jp/tb/245550884

この記事へのトラックバック


現在、このブログは更新を停止しています。
最新の内容は次のブログでお願いします。


新ブログ
趣味は長生きと秘密
http://home.mynsworld.com/