スマホアプリの自習帳

iPhoneSDKのサンプルMoveMeをAndroidに移植してみた。ソースはこちら

左がオリジナル（iPhone版）、右が移植したもの。

（ならべて見ると・・・大きさが違い過ぎだが・・・気にしない・・・ ）

MoveMeというプログラムは、次のような簡単なプログラムである。

• 最初に画面中央にメッセージ（短い挨拶文）が書かれたボタンが表示される。
• ボタンをタッチすると少し膨らみ、ボタンの中心はタッチされた位置に移動する。
• ボタンはドラッグして移動され、指を離すと中央に戻る。中央に戻ったとき、勢いでボタンがはねるような動きをする。
• ボタン以外の部分をダブルクリックすると、メッセージの言語が変わる。

Viewの構成

iPhone版ではメインの親であるMoveMeView上のタッチされた位置に、子であるPlacardView（ボタン）を表示する。PlacardViewは親画面内の座標で位置指定される。Androidで小画面（コントロールも含む）の位置指定はLayoutManagerに依存する。LayoutManagerもViewを継承するので、これが親画面といえる。座標で位置指定するにはLayoutManagerとしてAbsoluteLayoutを使用する必要があるが、実はこのAbsoluteLayoutの使用は推奨されていない。これはAndroid（だけでなく一般的なJavaプログラムにもいえることだが）ではデバイスにより画面サイズが異なるため、位置を座標で指定すると画面からはみ出たり、逆に小さ過ぎたりする可能性があるため。一般にLayoutManagerは親画面に対する小画面の相対位置を指定し、デバイスの画面サイズにあわせて、小画面やコントロールを自動的に最適な場所に配置する。ただしこのプログラムでは、小画面は画面のタッチで位置指定されるので、画面サイズの影響を気にする必要はなく、AbsoluteLayoutでも問題なかった。

クラスの構成

iPhone版で定義されたClassと、Android版のClassの対応は以下のようになった。

• MoveMeAppDelegate　→　なし（Delegateの仕組みがない）
• MoveMeView（メインの画面）　→　MoveMe内で使用されるAbsoluteLayoutクラス。
• PlacardView（ボタン）　→　PlacardView

Animationの使用

ボタンを最初にクリックした際にボタンがふくらむ動作と、ドラッグされたボタンから指を離すと中心に戻り、反動で少し揺れる動作はアニメーションを使用した。SDKのサンプルではXMLファイルで定義するアニメーションの例が多いが、今回はアニメーションの位置が動的に変わるため、XMLだけでなく、プログラムによる定義も使用した。

↓↓↓Animation定義のコード↓↓↓

	//animate moving to center
	final long DURATION_ANIM1 = 300;
	TranslateAnimation move_center = new TranslateAnimation(
			TranslateAnimation.ABSOLUTE, x - mCenter.x,
			TranslateAnimation.RELATIVE_TO_SELF, 0,
			TranslateAnimation.ABSOLUTE, y - mCenter.y,
			TranslateAnimation.RELATIVE_TO_SELF, 0);
	move_center.setDuration(DURATION_ANIM1);
	move_center.setStartTime(Animation.START_ON_FIRST_FRAME);
	move_center.setInterpolator(new LinearInterpolator());
	//animate bouncing
	TranslateAnimation bounce = new TranslateAnimation(
			(float)0,
			(float)(mCenter.x - (mPtEnd.x + WIDTH/2))/20,
			(float)0,
			(float)(mCenter.y - (mPtEnd.y + HEIGHT/2))/20);
	bounce.setDuration(200);
	bounce.setStartTime(Animation.START_ON_FIRST_FRAME);
	bounce.setStartOffset(DURATION_ANIM1);
	bounce.setInterpolator(new CycleInterpolator((float) 2.75));
	//AnimationSet consist of above two animation
	AnimationSet go_center_bounce = new AnimationSet(false);
	go_center_bounce.addAnimation(move_center);
	go_center_bounce.addAnimation(bounce);
	this.setAnimation(go_center_bounce);
	go_center_bounce.startNow();

イベントハンドラ

iPhone版では親画面であるMoveMeViewにイベントハンドラが定義されているが、Android版では、親画面となるAbsoluteLayoutにListenerを追加し、そのListener内にイベントハンドラを定義することになる。１つよくわからないのが、ダブルクリックの判定方法で、今回は前回クリックされてから何ms以内に次のクリックがあればダブルクリックと判定している。あまりスマートでない感じがするので、もっといい判定方法を調べなければ。

AbsoluteLayoutによるボタンの位置指定

AbsoluteLayoutのLayoutParamsが位置の属性を持つ。ということは、このLayoutParamsの参照を保持しておき、属性を変更することで位置を変更できるかと思いきや、位置を指定するたびにAbsoluteLayoutのsetLayoutParams()を呼び出す必要があった。

まとめ

今回のサンプルは非常に簡単だったので、アニメーションの使用を除けば、一般的なJavaプログラムとそれほど変わらず、Androidだからということで特別に意識するところはなかった。Javaが使えるので、iPhoneよりは敷居が低そうだ。

This entry was posted on 2011年3月6日 at 8:16 午後 and is filed under Android apps, Dev. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.