Help us understand the problem. What is going on with this article?

Androidアプリケーション開発入門(ボタンの配置とイベントの設定)

More than 1 year has passed since last update.

今回は ボタンを配置しボタンをクリックしたときのイベントを実行させる ところまで進めてみます。

前提

以下のページを参考に、 最速で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 StudioLogcat にはログが出力されている。

8) ダイアログ表示

最後に、イベントを書き換えて メッセージダイアログ を表示させてみる。

MainActivity.java
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 に登録してやる必要がある。

strings.xml
<resources>
    <string name="app_name">Hello World</string>
    <string name="dialog_title">たいとるですよ</string>
    <string name="dialog_message">めっせーじですよ</string>
</resources>

これで、ボタン押下後に メッセージダイアログ が表示される。

genzouw
## Job Programmer ## Good at language Java, Groovy, PHP, Bash, JavaScript ## Other language C, C++, C#, Objective-C, VB, Delphi, HTML, CSS, SQL, Ruby
https://genzouw.com
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした