【デモ作成①】現役SEがゼロから作るAndroidアプリ構築【onClick】

  • このエントリーをはてなブックマークに追加
  • LINEで送る

こんにちは、ふりいです。
今回は、デモアプリを作っていこうかと思います。

ひとまず、つぶやく機能と削除する機能を作ります。
ひとまずは見た目だけでも、それっぽくなればいいかな。

この前、Hello Worldと表示できることは確認しました。
今回は、ボタンを作り、そのボタンを押すとモーダルダイアログを表示させるようにします。
ちなみに予備知識としては、Androidアプリケーション技術者試験に合格したくらいです。

また、本業ではアプリ開発をしたことはありません。
とはいえ、Javaには本業で5年ほど触れているというような状態です。

Contents

ボタンを作ってみる

Androidアプリケーション技術者試験のテキストで、ソースの構成は学びました。
しかし、今のソース構成と比べると、結構違うんですよね。
というわけで、ひとまず自力でソースを手当たり次第見てみます。

この「activity_main.xml」が”Hello World!”を表示しているファイルみたいです。
デフォルトは、コード形式じゃなくてレイアウト形式になってるみたい。
ボタンを付けたいので、画面真ん中あたりにあるパレットってタブから選びます。

activity_main.xml

ボタンが候補がいくつかありますね。
直感で、Button – FloatingActionButtonを選択。
ドラッグ&ドロップで画面の右下に配置します。

FloatingActionButton

すると、「リソースの選択」というウィンドウが出てきます。
Drawable – androidから、それっぽいアイコンを選んでみます。
後々は、つぶやきボタンになる想定なので、プラスのアイコン(ic_menu_add)にしようかな。

リソースの選択

ライブラリが必要と言われたけど、ひとまずスルーな方向でいきます。

Add Project Dependency

ボタンが追加されているかと思いましたが、何も変わらない。
なんでだろう?

Adding FloatingActionButton

何回かやったら、作れました。なんでだったのか不明。
(3個目に作れた。1個目と2個目のボタンは削除)

Added FloatingActionButton

ボタンに対応する処理を用意する

次に、ボタンに対応する処理(メソッド)を用意していこうと思います。
おそらく、ボタンに対応するXMLファイルに何かを指定する必要がありそう。
作ったボタンを右クリックしたらXMLに移動できるようなので、ちょっと移動してみます。

XMLへ移動

エラーの解消

エラーが発生しているみたい。
英語ばかりで何をしたら解消するか、よくわかりませんね。

The view is not constrained

「The view is not constrained」でググったら、ボタン配置の指定方法がよろしくないとのこと。
さきほどのレイアウト形式の画面に戻りたい。
画面右上のデザインってアイコンから、デザインビュー?に戻れました。

デザインビュー

ボタンを右クリックして、位置を変えてくれそうな部分を2か所いじってみます。
(「縦方向と横方向の配置の指定がないよ」というエラーだったので、関連しそうな箇所を修正)

Constrain parent end中央 親に垂直

警告は残ったけど、エラーは消えたみたい。
デザインビューにも、以下のエラーが制約という部分にありましたが消えました。
・Not Horizontally Constrained
・Not Vertically Constrained

Not Vertically(Horizontally) Constrained

改めて処理を用意してみる

やっと本題の処理(メソッド)の用意ですね。
きっと、XMLをいじればいけるはず。
クリックした時の動作は、onClickだった気がしたので探してみたら発見しました。

xml onclick

どんな文字列を指定すればいいんだろう。
適当に文字列を入れてみると、何かを自動作成してくれるっぽいので作成してもらいます。

View in 'MainActivity'

「MainActivity.java」にメソッドが作られています。
クリックしたらこいつが動いてくれるものだと推測して先に進みます。

MainActivity.java

処理の中身を記述する

この「xxx」メソッドがモーダルダイアログを出してくれると嬉しいですね。
ダイアログを出したいので、単純にコード内に「dialog」と打って予測変換に頼ってみます。

dialog

どれも斜線が引かれてるし、全部違いそう。
「MainActivity ダイアログ」でググってみます。

一番最初に出てきたものを参考に作ってみましょう。
https://developer.android.com/guide/topics/ui/dialogs?hl=ja#CustomLayout

まず、res/layout配下に「dialog_signin.xml」を作って、参考にあるコードをコピペ。
エラーになってる箇所は、ひとまず削除します。

dialog_signin.xml

次に「MainActivity.java」をいじってみます。
これも参考に沿ってコピペ。
当然エラーは出ますが、試行錯誤してエラーなしにしました。

MainActivity.java builder

動作確認&修正

エラーなしになったけど、これでいけるのかな。
起動して動作確認してみましょう。(起動方法は【事始め】を参考にしてください)

emulator

なぜかボタンが左に寄っていますが、気にせずクリックします。
しかし微動だにせず。どういうことでしょうね。

xmlファイルを見ると、警告が出ていました。

xml warning

さっき作ったはずなのに、どうしてまた作りますと言われるんでしょう。
・・・そういえば、参考と同じにしようと思い、「xxx」メソッドの戻り値を変えていました。
「public Dialog xxx(View view)」の「Dialog」部分ですね。それがいけなかったのかも。

dialog return

元の通り、戻り値をvoidに戻してみます。
あと、return値も警告が出ていたので、それらしいものを変更します。
showメソッドあたりがそれらしい感じでしょうか。

dialog void

というわけで、再起動してボタンクリックしてみます。

emulator restart

お、来ました!!!
これでひとまずの目標は達成ですね。

色々ツッコミどころありそうだけど、今回はこのへんで終わります。
参考になれば幸いです。

  • このエントリーをはてなブックマークに追加
  • LINEで送る

SNSでもご購読できます。

コメントを残す

*