まずはHello World(3)
平日はなかなか時間が取れませんね・・・。
さて、日が空いてしまいましたが続きをやっていきます。
前回までの実装はこちら。
1. デザインのボタンを追加
今回は、ボタンを追加するところからやっていきたいと思います！
前回の記事で確認しましたが、アプリ起動時に最初に表示される画面は
activity_main.xmlで定義されていましたね。
なので、このxmlをいじって初期画面にボタンを置いてみましょう。
画面下部にあるデザインタブをクリックすると、
xml形式ではなく画面のデザインが表示されました！
左上にある様々なパーツからドラッグ＆ドロップで配置ができるようです！
さっそく、「Button」を画面中央に配置しました。
2. ボタンの属性を変えてみる
今度はボタン内のテキストを変えてみます。
画面右側の[宣言された属性] -> [text]がボタン内のテキストですね！
今回は「PUSH HERE!」に変更してみました！
このあと[id]の部分も使うので覚えておきましょう。
今回は変更せずにbuttonのままとします。
レイアウトの修正はこれで終わりですね。
3. クリックイベントのリスナーを実装
次はこのボタンを押した際の処理を実装していきます！
（やっとプログラミングっぽくなりましたね。笑）
実装する対象はMainActivity.javaですね。
「ボタンを押す」などの画面から伝わる動作はイベントとして管理されます。
このイベントをキャッチする役割を担うのが「イベントリスナー」になります。
今回は「クリック」イベントをキャッチする「イベントリスナー」である、
OnClickListenerを追加していく必要があります。
それを追加したのがこちらです。
修正箇所は以下です。
- [8行目] インタフェース OnClickListenerを追加
- [16行目] findViewById(R.id.button).setOnClickListener(this)を追加
- [22行目] onClick(view v)メソッドを追加
少し解説を加えておきます。
- さきほど書いたとおり、OnClickListenerの追加ですね。
- findViewByIdはidの名前でレイアウト内のものを探してくれます。配置したボタンのidは「button」なので、R.id.buttonとします。setOnClickListenerはボタンに対して、イベントリスナーを追加します。この引数には、OnClickListenerインタフェースを実装したクラスを入れるので、今回はthis（当クラス）になります。
- onClickメソッドの中身が実際にクリック後に動く処理ですね。ここにやりたいことを書いていきます。
4. クリックされた際の処理を実装
やっと ここまで来ました。
ボタンが押されたらHello Worldを出す処理を書いてみます。
書いた処理がこちら！
追加したのは26行目だけですね。
簡単なメッセージを表示するのにToastを使うみたいです。
パン？と思いましたが、Toastとは祝杯や祝辞という意味らしい。
Toast#makeTextの引数を簡単に解説します。
第一引数はContext。自分自身を指定するのでthisを入れます。
第二引数は表示したいメッセージ内容。
第三引数は表示している時間ですね。定数としてLENGTH_SHORT、LENGTH_LONGが用意されていますね。
最後にToast#showメソッドを忘れずに！これでHello Worldが表示されるでしょう！！
5. 実際に動かしてみよう
それでは実際に動かしてみましょう！
初期画面がこちら！
ボタンが表示され、テキストも「PUSH HERE!」に変わっていますね！
ただ、位置は置いた場所とは違いますね。中央寄せは今度やってみましょう。
ではボタンをクリック！
Hello Worldが表示されました！
位置は中央下段。この位置がデフォルトのようですね。
とりあえず1つ目の目標は達成です！
お疲れさまでした！
