初めてのAndroidアプリ開発ープログラミングの基本（その２）
東北TECH道場の参加者向けに作成したハンズオンのその２です。
その１はこちら
睡眠導入アプリのつづき
引き続き睡眠誘導アプリを作っていきます。
これまでは画面に表示するのは文字だけでしたが、画像をを表示したり音を出すようにしてみます。
（絵：イトナブ石巻 デザイナー ナナ）
画像を表示してみましょう。
画像ファイルのダウンロード
ここからダウンロードします。
https://goo.gl/1kYJmW
zipを展開すると、中に2つの画像ファイルが入っています。
画像ファイルをプロジェクトに登録する
Android Studio
drawableの下にコピーします。
activity_main.xml に ImageView を追加して src に画像を指定します。
<?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()という命令（メソッドと呼びます）を呼び出すことで音声の再生を開始します。