Androidアプリを作ってみる #8 – ボタンを押したら その1–

まずは基本のボタンを押したときの処理

前回は、Android studioが自動生成したものをただただ眺めただけでしたね。ここからいよいよプログラミングを徐々にやっていきます。

メリ
既についていけてませんけど。

前回は何もしていない

Androidアプリを作ってみる #7 - Activity その2 -

2016.09.25

さて、今回は基本中の基本とも言うべき「ボタン」を前回までのアプリにつけて、それを押したとき(タップ)したときに何かを表示する処理をやってみましょう。そんなに難しくないです。

まずはボタンを配置する。

前回も書いたようにUIデザインはXMLファイルというもので行います。それを開きます(activity_main.xml)。

Android Studio XML編集画面

Android Studio XML編集画面

この画像にも書いてありますが、左側の「Palette」から付けたい部品をドラッグ&ドロップするだけで勝手にXMLファイルの中身も書き換えてくれる優れものです。じゃ、やってみましょう。

部品一覧から「Button」を選んでスマホデザイン画面の中に、ドラッグ&ドロップします。

Butttonを配置する

Butttonを配置する

ボタンの上に書いてあるのが「New Button」ってのもなんだかなんで、変えてみましょう。これも簡単です。右下の「Properties」の中から「Text」という項目を見つけて「New Button」と書いてある部分を好きなものに変えましょう。本来はここで直接名前を変えてしまうのは一般的ではないのですが、話を簡単にするためにこれでやります。

(本来は前回ちょこっとだけ出てきたstring.xmlに定義して、その定義名をXMLファイルに書いていきます。こうすると後々アプリを多言語展開したい!!なんてときに役に立ちます。ま、やったことないんで役に立つかどうかはわかりませんが…)

ボタンの表示名を変える

ボタンの表示名を変える

この変更に連動して、activity_main.xmlも自動的に書き換わってます。

22~29行目に<Button>が追加されて、25行目もandroid:text=”押して!!”に変わってますね。

これでボタンの追加ができました。

ボタンを押したときに何をさせるか。

ただボタンを設置しただけだと、ボタンがあるだけです。ボタンを押したときに何をやるか、させるかを決めなければなりません。そして、まさにその独自で考えた処理をプログラミングしていくことで処理が実現することになります。

初めから文字を表示していたじゃないか。

前回のアプリでも「Hello World!」という文字列を表示していました。実はこの文字も「TextView」という部品なんですね。上のactivity_main.xmlを見ても<TextView>がありますよね。

それでは簡単に、ボタンを押したときに、この「TextView」の表示を「Hello World!」から違うものに変えてみましょう。

ボタンを押したときの処理を登録する。

ボタンを押したときにどういう動きをするのかは決まりました。次は実際にプログラミングしていくことになります。まずは「ボタンを押したときに実行されるメソッドの登録」しなければなりません。この登録はアプリが起動したときに一回だけ実行すればいいので、前回も登場した「onCreate()」というメソッドにその登録処理を入れればいいのです(ここはなぜ?と思わないで、そういうもんなんだという理解でいいです。まずは)。

onCreate()をAndroid Developersで調べてみましょう。

Called when the activity is first created. This is where you should do all of your normal static set up: create views, bind data to lists, etc. This method also provides you with a Bundle containing the activity’s previously frozen state, if there was one.
Always followed by onStart().

アクティビティが最初に作成されたときに呼び出されます。あなたが設定する通常の静的のすべてを行う必要があります場所です:1があった場合は、この方法はまた、アクティビティの以前に凍結状態を含むバンドルを提供しますなど、リストにビュー、バインドデータを作成します。常にONSTART()が続きます。

さすがGoogle先生、直球の直訳です。でもなんとなく分かりますね。アクティビティが最初に作成されたときに呼び出されるって書いてあります。他の説明は無視でいいでしょう。

にゃんこ
いいのかよ!!

「常にonStart()が続きます」とありますが、アクティビティにはライフサイクルってのがあってですね…。onCreateがアクティビティが作成されたときに呼ばれるように様々なアクティビティの状態があってそのときに呼ばれる(実行される)メソッドが色々あります。次の図のように…、こんなのを気にする必要はまだないですが。まあ、これを見てもonCreateは一番最初に呼ばれるってことは分かりますね。

ライフサイクル

ライフサイクル

引用: Android Developers

onCreateにボタンイベント処理を登録させる。

このonCreate内で、このアクティビティに対して”「押して!!」ボタンが押されたらどういう処理をする”ということを登録させます。最初はその処理さえ??でしょうけど、これはまずはこういうもんだと覚えるのがいいと思います。

にゃんこ
そんなのばっかだけど大丈夫か?

登録するにはクリックリスナーというものを使います。
まずは、onCreate内で、ボタンと文字を扱えるようにします。

MainActivity.javaの中のonCreateの中に以下を追加します。

この17、19行目で、ButtonとTextViewがこのアクティビティ内で操作できるようになりました。findViewById(R.id.button)findViewById(R.id.textView)にあるR.id.~の部分はactivity_main.xmlに書いてあるandroid:id=”@+id/textView”android:id=”@+id/button”に対応してます(PropertiesのIDも同様)。まさに呼び出して使えるようにしたのですね。

ちなみにメソッド名なんていちいち覚えられねえよ!!って思いますよね?でも、大丈夫です。Android Studioは優れもので途中まで文字を入力すると候補をあげてくれます。該当のものがあるならそれをクリックするだけでメソッドを書いてくれます。しかも、今現在使えるものしか表示しないので使いたいものが表示されていなかったら、まだそれを使うための”おまじない”が足りないということですね。

候補をあげてくれる優れもの

候補をあげてくれる優れもの

今回ButtonとTextViewを使えるようにした”おまじない”は6、7行目になります。ま、難しい話はなしにしましょう。さて、ButtonとTextViewを操作できるようになったので、ここにクリックリスナーを追加してみましょう。

こんな感じです。さっきの下にこれを追加します。

これだけです。これだけでボタンを押すと、最初に”Hello World!”と表示されいた部分が変化します。

メリ
な、なんか嫌な予感。

では、Android Studiodでアプリをエミュレータで動かしてみましょう。

エミュレータの起動方法はこちらを参照

Androidアプリを作ってみる #3 -Androidアプリを動かしてみる-

2016.07.15

起動後、最初は”Hello World!”ですね。

起動時は"Hello Wold!"

起動時は”Hello Wold!”

ここから”押して!!”ボタンを押すと表示が“メリの馬鹿”になりました!!。めでたしめでたし。

はい!! メリの馬鹿表示っと

はい!! メリの馬鹿表示っと

これが基本中の基本って感じでしょうか。難しいと感じるかもしれませんが、徐々に慣れてくると思います。JAVAに関してはおいおい簡単に触れていこうかと思います。(自分も勉強中なので(笑))

メリ
なんか突っ込むべきところがあるんですけどお。

次の記事

Androidアプリを作ってみる #9 -ボタンを押したら その2-

2016.10.09

前回の記事

Androidアプリを作ってみる #7 - Activity その2 -

2016.09.25





コメントを残す

メールアドレスが公開されることはありません。