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

#初めてのAndroidアプリ開発ープログラミングの基本（その２）
東北TECH道場の参加者向けに作成したハンズオンのその２です。
その１は[こちら](http://qiita.com/ktaka/items/8cc997e464442aae4e18)

---
##睡眠導入アプリのつづき
引き続き睡眠誘導アプリを作っていきます。
これまでは画面に表示するのは文字だけでしたが、画像をを表示したり音を出すようにしてみます。
![sheep_1.png](https://qiita-image-store.s3.amazonaws.com/0/27559/e9d52e92-ee5c-b69d-f1f2-05f956eb0932.png)
（絵：イトナブ石巻 デザイナー ナナ）

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

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

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

![sheep_1.png](https://qiita-image-store.s3.amazonaws.com/0/27559/e9d52e92-ee5c-b69d-f1f2-05f956eb0932.png)
![sheep_2.png](https://qiita-image-store.s3.amazonaws.com/0/27559/4e92c4aa-3184-1121-00b8-c98e1c47dff2.png)

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

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

---

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

```xml: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 を次のように修正します。
（行の左端の+記号は入力しないでください）

```diff
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);
+           			 }
          		    }
            });
     }
```

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

---
##ソースコードの説明

```java
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 を次のように修正します。
（行の左端の+記号は入力しないでください）

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