2010年10月29日金曜日

MapView でアニメーション (AnimationDrawable編)

MapView を使って、Google マップを表示させている上に、
画像をアニメーションさせるサンプル・プログラムを2パターン作成してみました。

まずは1つ目。

<設計方針>

画面のレイアウトは、FrameLayout にして、
FrameLayout 一杯に MapView と ImageView を順番に表示します。
そして、ImageView を AnimationDrawable でアニメーションさせます。

<問題点>

画像を表示させる位置が、Google Map 上の位置 (GeoPoint) に対応させることができません。
(というか分かりません。ひょっとしたら何らかの方法があるのかもしれません。。)

そのため、画面の左上のすみっこ等、Google Map の座標(緯度/経度)とは関係なく表示させればよい、
というときくらいには使えるかな~という方法です。


以下にポイントとなるソースを貼り付けます。

まずはレイアウトです。
FrameLayout に対し、MapView、ImageView の順で表示させます。

main.xml
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
<com.google.android.maps.MapView
 android:id="@+id/mapview"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
 android:enabled="true"
 android:clickable="true"
 android:apiKey="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
 />

<ImageView
 android:id="@+id/imageview"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 />

</FrameLayout>


次は、AnimationDrawable に読み込ませるアニメーション・リストです。
drawable フォルダには、person_01.png ~ person_60.png まで 60 の画像ファイルを配置しています。

animation.xml
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
 android:oneshot="false">
 <item android:drawable="@drawable/person_01" android:duration="50" />
 <item android:drawable="@drawable/person_02" android:duration="50" />
 <item android:drawable="@drawable/person_03" android:duration="50" />
 <item android:drawable="@drawable/person_04" android:duration="50" />

  (途中省略)

 <item android:drawable="@drawable/person_58" android:duration="50" />
 <item android:drawable="@drawable/person_59" android:duration="50" />
 <item android:drawable="@drawable/person_60" android:duration="50" />

</animation-list>


最後は Activity (MapActivity継承) クラスです。

MapTestActivity.java
package jp.kochi.test;

import com.google.android.maps.MapActivity;
import com.google.android.maps.MapView;
import android.graphics.drawable.AnimationDrawable;
import android.os.Bundle;
import android.util.Log;
import android.widget.ImageView;

public class MapTestActivity extends MapActivity {
 /** Called when the activity is first created. */
 AnimationDrawable mAnimationDrawable;
 ImageView mImageView;

 @Override
 public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.main);

  MapView mapView = (MapView) findViewById(R.id.mapview);

  mapView.setBuiltInZoomControls(true);

  mImageView = (ImageView) findViewById(R.id.imageview);
  mImageView.setBackgroundResource(R.anim.animation);
  mAnimationDrawable = (AnimationDrawable) mImageView.getBackground();

 }

 @Override
 public void onWindowFocusChanged(boolean hasFocus) {
  super.onWindowFocusChanged(hasFocus);

  mAnimationDrawable.start();
 }

 @Override
 protected boolean isRouteDisplayed() {
  // TODO Auto-generated method stub
  return false;
 }
}


以下は実行画面です。
分かりにくいですが、左上の画像が変化(アニメーション)しています。