#初めての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()という命令（メソッドと呼びます）を呼び出すことで音声の再生を開始します。