今回は ボタンを配置しボタンをクリックしたときのイベントを実行させる ところまで進めてみます。
前提
以下のページを参考に、 最速でHelloWorldアプリケーションを作成 が終了していること
1) HelloWorldプロジェクトを起動
前回作成したプロジェクトを起動。
2) activity_main.xml を開く
app/src/main/res/layout/activity_main.xml をダブルクリックする。
アプリケーションは最低1つのActivity（アクティビティ）を持つ。ユーザーインターフェイズの1画面のこと。
Activityの下には、画面の構成要素である コンポーネント を配置する。
起動直後は Activity の中央に "Hello World!" と書かれた TextView コンポーネントが配置されている。
今回はこれは不要なので、クリックし Delete キーを押し削除。
ちなみに Activity を構成するコンポーネントは階層構造で入れ子にできる。
階層構造が現状どうなっているのかを確認するには、左隣にある 「コンポーネント・ツリー」 を見ると良い。
先程 TextView を削除したばかりなので、 ContraintLayout と呼ばれるものしか見えない。
3) Button コンポーネントを配置
左上にある 「パレット」 の欄から Button コンポーネントを Activity の中央辺りにドラッグ。
ドラッグ後は次のような状態になっている。
4) 現状を確認するために実行
ここで一旦実行してみる。
中央に配置したボタンが、左上に配置されてしまう。こちらのレイアウト崩れを解消してみる。
ConstraintLayout を使用する場合には、その上に配置するコンポーネントに多少属性の設定を追加する必要がある。
5) 「テキスト」 タブからボタンの属性を追記
画面下の方に「デザイン」と「テキスト」というタブがあるので、「テキスト」クリックする。
Activity のレイアウト情報はXMLで管理されている事がわかる。
以下のように内容を書き換えることで、中央に配置されるようになる。
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.genzouw.helloworld.MainActivity">
<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
以下の4つの属性が追記されることになるはず。
app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintLeft_toLeftOf="parent"app:layout_constraintRight_toRightOf="parent"app:layout_constraintTop_toTopOf="parent"
6) 現状を確認するために実行
再び実行してみる。
ボタンの配置が修正されていればOK。
試しにタップしてみると、ボタンの色が僅かに変わり、押されたことがわかるようにはなっている。
現時点では何も起きないため、イベントを割り当ててみる。
7) クリックイベントの割当
MainActivity.java を開き、 MainActivity#onCreate() メソッドに以下のような処理を追記する。
先程 Activity 上に配置した Button を取得し、 クリックリスナを登録する。
ひとまずの onClick() の中でログ出力してみる。
package com.genzouw.helloworld;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.widget.Button;
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Button button = this.findViewById(R.id.button);
button.setOnClickListener(new View.OnClickListener(){
@Override
public void onClick(View v) {
Log.d("debug", "ここまできたよ！");
}
});
}
}
再度起動し、ボタンを押下。
エミュレータ上は何も起こっていないが、 Android Studio の Logcat にはログが出力されている。
8) ダイアログ表示
最後に、イベントを書き換えて メッセージダイアログ を表示させてみる。
package com.genzouw.helloworld;
import android.os.Bundle;
import android.support.v7.app.AlertDialog;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.Button;
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Button button = this.findViewById(R.id.button);
button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
AlertDialog.Builder builder = new AlertDialog.Builder(v.getContext());
builder
.setTitle(R.string.dialog_title)
.setMessage(R.string.dialog_message)
.show();
}
});
}
}
メッセージダイアログ には、タイトルとメッセージを設定していますが、こちらの文言は res/values/strings.xml に登録してやる必要がある。
<resources>
<string name="app_name">Hello World</string>
<string name="dialog_title">たいとるですよ</string>
<string name="dialog_message">めっせーじですよ</string>
</resources>
これで、ボタン押下後に メッセージダイアログ が表示される。
