初めてのAndroidアプリ開発ープログラミングの基本（その２）

10421 ワード
Android 初心者向け Java ハンズオン Java テキストリンク

初めてのAndroidアプリ開発ープログラミングの基本（その２）

東北TECH道場の参加者向けに作成したハンズオンのその２です。
その１はこちら

睡眠導入アプリのつづき

引き続き睡眠誘導アプリを作っていきます。
これまでは画面に表示するのは文字だけでしたが、画像をを表示したり音を出すようにしてみます。

（絵：イトナブ石巻 デザイナー ナナ）

画像を表示してみましょう。

画像ファイルのダウンロード

ここからダウンロードします。
https://goo.gl/1kYJmW
zipを展開すると、中に2つの画像ファイルが入っています。


画像ファイルをプロジェクトに登録する

Android Studio
drawableの下にコピーします。

activity_main.xml に ImageView を追加して src に画像を指定します。

activity_main.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"
    android:id="@+id/rootLayout"
    tools:context="org.tohokutechdojo.test.sleeping.MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!" />
    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/sheep_1" />

</android.support.constraint.ConstraintLayout>

実行して画像が表示されることを確認してみましょう

TextViewとImageView

TextView ... 文字を表示するための部品
ImageView ... 画像を表示するための部品

アニメーション

ダウンロードした画像は2枚でした。
この2枚の画像をタップするたびに切り替えてアニメーションしているようにしてみます。

MainActivity.java を次のように修正します。
（行の左端の+記号は入力しないでください）

public class MyActivity extends AppCompatActivity {

    TextView textView;
    int sheepCount = 0;
+   ImageView imgView;

    @Override
protected void onCreate(Bundle savedInstanceState) {
           super.onCreate(savedInstanceState);
           setContentView(R.layout.activity_my);

        String greeting = "こんにちは";
        Date trialTime = new Date();
        Calendar calendar = new GregorianCalendar();
        calendar.setTime(trialTime);
        int hour = calendar.get(Calendar.HOUR_OF_DAY);
        if (hour > 0 && hour < 12) {
            greeting = "おはよう";
        } else if (hour > 15) {
            greeting = "こんばんは";
        }
        greeting += "。。。ねむれませんか？";
        textView = (TextView) findViewById(R.id.textview);
        textView.setText(greeting);

+        imgView = (ImageView)findViewById(R.id.imageView1);

         View view = findViewById(R.id.rootLayout);
         view.setOnClickListener(new View.OnClickListener() {
                  public void onClick(View v) {
                    sheepCount++;
                     String text = "ひつじが" + sheepCount + "匹";
                     textView.setText(text);

+                        if (sheepCount % 2 == 0) {
+                            imgView.setImageResource(R.drawable.sheep_1);
+                        } else {
+                             imgView.setImageResource(R.drawable.sheep_2);
+                        }
                    }
            });
     }

実行してみましょう

画面をタップすると数字が増えると同時に２枚の絵が交互に表示されて、羊が歩いているように見えると思います。

ソースコードの説明

if (sheepCount % 2 == 0) {
    imgView.setImageResource(R.drawable.sheep_1);
} else {
    imgView.setImageResource(R.drawable.sheep_2);
}

sheepCount % 2 は羊を数えた回数を2で割った余りを求めています。
== 0で余りが0の時は偶数、0以外の時は奇数となり、偶数の時は１枚目の羊の絵(sheep_1)、奇数の時は2枚目の羊の絵(sheep_2)をimgViewにセットして表示を切り替えています。

音を出してみましょう

音声ファイルをダウンロードします。
https://goo.gl/b37aEp
ダウンロードしたらzipファイルを解凍しておきます。

音声ファイルを組み込む

プロジェクトに音声ファイルを組み込みます。

res で右クリック ⇒ New ⇒ Android Resource Directory と辿ります。
開いたダイアログで、Resource Type から raw を選択してrawという名前のフォルダを作成します。
この raw の中に音声ファイルを入れます。

MainActivity.java を次のように修正します。
（行の左端の+記号は入力しないでください）

package test.org.ktaka.myapplication;

import android.media.MediaPlayer;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;

import java.util.Calendar;
import java.util.Date;
import java.util.GregorianCalendar;

public class MainActivity extends AppCompatActivity {
    TextView textView;
    ImageView imgView;
+   MediaPlayer mp;
    int sheepCount = 0;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        String greeting = "こんにちは";

        Date trialTime = new Date();
        Calendar calendar = new GregorianCalendar();
        calendar.setTime(trialTime);
        int hour = calendar.get(Calendar.HOUR_OF_DAY);
        if (hour > 0 && hour > 12) {
            greeting = "おはよう";
        } else if (hour > 15) {
            greeting = "こんばんは";
        }

        greeting += "。。。ねむれませんか？";

        textView = (TextView)findViewById(R.id.textview);
        textView.setText(greeting);

        textView.setText(greeting);
        View view = findViewById(R.id.activity_main);

        imgView = (ImageView)findViewById(R.id.imageView);
+       mp = MediaPlayer.create(getApplicationContext(), R.raw.sheep_cry1);

        view.setOnClickListener(new View.OnClickListener() {
            public void onClick(View v) {
                sheepCount++;
                String text = "ひつじが" + sheepCount + "匹";
                textView.setText(text);
                if (sheepCount % 2 == 0) {
                    imgView.setImageResource(R.drawable.sheep_1);
+                       mp.start();
                } else {
                    imgView.setImageResource(R.drawable.sheep_2);
                }
            }
        });

    }
}

実行してみましょう

画面をタップすると「めぇ～」と羊の鳴き声の音が出るはずです。
（音が聞こえないときは端末のボリュームを確認してみてください）

ソースコードの説明

MediaPlayer mp;

Androidで音声ファイルを再生する方法は幾つかありますが、ここではMediaPlayerというクラス（部品）を使います。この行ではMediaPlayerのオブジェクトを保持するための変数を定義しています。

mp = MediaPlayer.create(getApplicationContext(), R.raw.sheep_cry1);

res/rawの下に登録した音声ファイル（sheep_cry1)を使ってMediaPlayerのオブジェクトを生成します。これ以降、このmpを使って再生のコントロールができるようになります。

mp.start();

MediaPlayerのオブジェクトのstart()という命令（メソッドと呼びます）を呼び出すことで音声の再生を開始します。