Androidのアプリ開発をはじめようと考えている方、もしくははじめたばかりの方向けにお届けしている 【はじめてのAndroidアプリ開発】 シリーズ。 今回は 『ポップアップ表示』の作り方をご紹介。
ポップアップ表示機能に合わせて、タップイベント（クリックイベント）についても学習できますよ。
★本稿はこんな方に役立ちます★
★このアプリ開発を通して習得できるスキル★
★今回使用するエミュレーター環境★
まずは今回ご紹介するポップアップアプリを作っている様子を見てみてください。
機能としては非常に簡単なのですが、作成にあたってはレイアウトのプログラムと実行プログラムの両方を編集しています。Androidアプリ開発初心者の方にとっては、十分やりごたえがある内容でしょう。
それでは一つずつのステップをご紹介していきますね。
まずはアプリを作っていくために Android Studio を起動して、新規プロジェクトを立ち上げましょう。
Empty Activity を選択。
アプリ名入力して、言語はデフォルトの Java のままプロジェクト作成。
プロジェクトの作成が完了したら早速 activity_main.xml を選択して、ボタンの項目があることを確認しましょう。
パレットにあるボタンを左クリックしてそのままストーリーボードの方にドラッグ&ドロップします。これでアプリにボタン機能が追加されたわけですが、レイアウトが整ってないのでエラーが出てますね。次はボタンのレイアウトを調整していきます。
今回はアプリを作成した時に最初からある Hello World を基準にボタンのレイアウトを整えてみました。
BUTTON ボタンを左クリックして、上側に表示される ● を左クリック。そしてそのまま Hello Worldの ● のところにドラッグで接続。
次は BUTTON ボタンの下側の ● を左クリックして、画面の一番下までドラッグ。
あとは水平方向のレイアウトを設定する必要がありますので、今回は上側のタブから Horizontally を選択し、中央表示に。
そしてボタンを適度な位置にドラッグします。
ボタンのレイアウトが完了したところで、 Component Tree のところに黄色いエラーが発生。 内容確認してみますと、 @string を使ってくださいとのこと。
これについては activity_main.xml の Text を開いて確認していきます。
ボタン設置で発生した黄色いエラーを確認するために、まずは activity_main.xml を開いて確認してみましょう。すると <Button ・・・・ のところの android.text= にエラーが。
エラー内容を読みますと、文字列（string）の Buttonのところでは @string を使ってくださいとのこと。
文字列の @string エラーの解消にはいくつかの方法があると思いますが、今回は発生している黄色いランプをクリックして対応したいと思います。黄色いランプマークを左クリックして、 Extract string resource を選択。
Extract Resourceダイアログが表示されますので、今回は 2段目の Resource value の部分を編集。Resource valueは画面上に表示される文字、 Resource nameはアプリ内に登録される文字となります。
基本的に activity_main.xml にテキスト（text）を設定する場合は、このように Resource value と Resource name をセットする必要が。また設定した Resource name と Resource value は、 Android App フォルダの中の resフォルダ → values → strings.xml の中に含まれます。
このような文字の登録手順を踏む理由としては、 Android アプリがローカリゼーションを前提として作られているため。 button という名称は、日本では「押してね」という意味で、アメリカでは「push」、中国では「推」という風に 一つのテキストを元に多言語化することが可能となってます。
エラーハンドリングで Resource value と Resource name セットした結果、上図のようにエラーが消えましたね。
ボタンの設置が整ったところで、一旦今の状態を画面で確認してみましょう。
画面右上のエミュレーター再生ボタン ▶ を押し、デバイスを選択して OK。なお今回のエミュレーターは、 Android Studio インストール時のデフォルト・エミュレーター Nexus 5x Android OS バージョン9 を選択してます。
アプリ起動後、設置したボタンをタップしてみても何も起きないと思います。次はこのボタンをタップするとポップアップ表示されるように、プログラムを作成していきましょう。
ポップアップ機能の Toast を表示する簡単なプログラムを組んでいきたいと思います。
まず始めに ativity_main.xml の Design 画面から ボタン（押してね）を左クリック。そして右側のボタンプロパティを設定する項目で、 onClick の空白に任意の名称を入力。今回は onTapEvent に設定しました。
ボタンのプロパティを変更したところ、再び Component Treeで今度は赤色のエラーが発生。内容は、「メソッドが何もないよー」というエラー。 これについては MainActivity.java にメソッドを書いていくという方法が鉄板と思いますが、今回はエラーハンドリングからメソッドを入力していきたいと思います。エラーハンドリングからメソッド入力する理由としては、簡単だからです。
activity_main.xml のテキストを開いたところ、 <Button・・・ の onClick でエラーが発生していることを確認できます。
左側に表示される赤色のランプを左クリックして、その中の 「Create 'on TapEvent(View)' in 'MainActivity'」 を選択。
すると画面が自動的に切り替わり、先ほどまでなかった onTapEvent のメソッドが自動的に記述。
public void onTapEvent(View view) {
Toast myToast = Toast.makeText(
getApplicationContext(),
"ポップアップ！！",
Toast.LENGTH_SHORT
);
myToast.show();
}
そしてボタンがタップされた時のプログラム内容は上記の通り。
ポップアップ表示 Toast のコードの書き方は決まっていますので、一度リファレンスを確認しておきましょう。
本プログラムのポイントは、 Toast.makeText() 内の
getApplicationContext()は、アプリケーション全体のコンテキストを返す機能。getApplicationContext以外には、 getContext() や getBaseContext() が存在。
"ポップアップ"は、ボタンがタップされたときに表示される文字。このテキストの長さは、複数行にわたる長文でも大丈夫です。
最後の LENGTH_SHORT は、ポップアップが表示される時間。 LENGTH_SHORT は 2秒、 LENGTH_LONG は3.5秒。なおこの表示時刻を任意の値に変更しようと思うと、複雑な処理をクリアする必要があります。
予定通りポップアップ表示されましたね。
最後に今回使用した最終的な actibity_main.xml と MainActivity.java のコードをご紹介。
<?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=".MainActivity">
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:onClick="onTapEvent"
android:text="@string/button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.498"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/textView"
app:layout_constraintVertical_bias="0.188" />
</android.support.constraint.ConstraintLayout>
package com.example.training0324;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Toast;
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
public void onTapEvent(View view) {
Toast myToast = Toast.makeText(
getApplicationContext(),
"ポップアップ！！",
Toast.LENGTH_SHORT
);
myToast.show();
}
}
＼Webサイト担当者としてのスキルが身に付く！！／
Android のアプリ開発をしたいけど何から始めればいいかわからない、そういった時に今回のようなタップイベントのサンプルは参考になると思います。
また実際にプログラムしてみると分かるのですが、こういった基本的なアプリの機能でもプログラム上ではメソッドやインスタンスなど、 Javaの基礎ができてないと分からないことが多数登場。
Android のアプリ開発と Java の両方を習得したいけど前に進まない。そんな時はプロに頼ってみるのもイイのではないでしょうか？
CodeCampでは、現役エンジニアによる Android のアプリレッスンを受けることが可能。そして何より「時」と「場所」の制約を極力減らしたオンライン型のプラットフォームで勉強することができます。
本気で Android のアプリ開発を考えているなら、まずは CodeCamp のオンラインレッスンを試してみませんか？詳しくは公式ページよりご参考ください。
