AndroidでAnimation終了後にViewを削除する

動的に追加したViewに対してアニメーションを実行して、アニメーションが終了したらそのViewを完全に削除してしまいたい、というケースがあってハマったのでメモ。


基本的にはアニメーションの終了後に何かをするには、前もってAnimationListenerをセットしておけば良いはず。

AnimationListener の onAnimationEnd というメソッドをオーバーライドして処理を書く事になる。 

この onAnimationEnd の中でアニメーション対象のViewを親のViewから削除しようとして、次の様に書いたら parentView.removeView の所で エラーで落ちた。

	final ScaleAnimation scale = new ScaleAnimation(1.0f, 0.1f, 1.0f, 0.1f,
	Animation.RELATIVE_TO_SELF, 0.5f,
	Animation.RELATIVE_TO_SELF, 0.5f);
	final AlphaAnimation alpha = new AlphaAnimation(0.9f, 0.1f);
	final AnimationSet set = new AnimationSet(true);
	set.addAnimation(scale);
	set.addAnimation(alpha);
	set.setFillAfter(true);
	set.setDuration(1500);
	set.setAnimationListener(new AnimationListener() {
	@Override
	public void onAnimationEnd(final Animation animation) {
	parentView.removeView(imgView);
	});
	}
	});
	imgView.setAnimation(animation);

view raw AndroidAnimationRemoveViewError.java hosted with ❤ by GitHub

調べてみると、どうやら onAnimationEnd 内でUIの処理をするとまずいみたいだ。parentView.post() を呼んでUIスレッドに処理をRunnableの形で渡せば問題なく実行出来る様になった。

	final ScaleAnimation scale = new ScaleAnimation(1.0f, 0.1f, 1.0f, 0.1f,
	Animation.RELATIVE_TO_SELF, 0.5f,
	Animation.RELATIVE_TO_SELF, 0.5f);
	final AlphaAnimation alpha = new AlphaAnimation(0.9f, 0.1f);
	final AnimationSet set = new AnimationSet(true);
	set.addAnimation(scale);
	set.addAnimation(alpha);
	set.setFillAfter(true);
	set.setDuration(1500);
	set.setAnimationListener(new AnimationListener() {
	@Override
	public void onAnimationEnd(final Animation animation) {
	parentView.post(new Runnable() {
	@Override
	public void run() {
	parentView.removeView(imgView);
	}
	});
	}
	});
	imgView.setAnimation(animation);

view raw AndroidAnimationViewRemove.java hosted with ❤ by GitHub

 　

jQueryのイベントで return false はしない方が良い

前回の記事を書いている時に検索にヒットしたリンクでちょっと「へぇ～っ」となったものがあったのでメモ。

　javascript - event.preventDefault() vs. return false - Stack Overflow

イベントのハンドラを書く時に、jQueryのイベントと通常のDOMのイベントでは

return false;

の意味が違うらしい。まずい、今まで気にしていなかった。。。


jQueryのイベント：

• 　　デフォルト動作を抑止。
• 　　イベントバブリングを中止する。

通常のDOMのイベント：　

• 　　デフォルト動作を抑止。（但しブラウザのバージョンに依存）
• 　　イベントバブリングの中止はしない。

という事らしい。


jQueryのイベントハンドラで return false; をしてしまうと、イベントバブリングまで中止されてしまう。これはあまり好ましくない事だ。

なぜイベントバブリングを中止する事が好ましくない（or やってはいけない）のかは、下の記事を読めばよく分かる。

jQuery Events: Stop (Mis)Using Return False | Fuel Your Coding


jQueryのバブリングと、「return false;」「e.stopPropagation();」「e.preventDefault();」について | ふじこのプログラミング奮闘記


JavaScriptのイベント伝播について覚書 | Linuxで自宅サーバ構築

結論

jQueryのイベントハンドラでは、

1. デフォルト動作を抑止するには、event.preventDefault() を 使う。

2. バブリングを中止する必要がある場合は、event.stopPropagation() もしくは
event.stopImmediatePropagation() を場面に応じて使い分ける。

3. return false は親要素にもイベントハンドラがアタッチされている場合などにバグの原因になり得るので、使う場合は十分に注意する。（もしくは使わない。）

というのが良いみたいだ。







 　

[jQuery] Enterキーでフォーカスを移動するには

Enterキーでフォームを送信したくない時は

あるWebアプリケーションのフォームで、Enterキーを押してもSubmitされない様にする必要があって、ちょっと調べた。

リターン（Enterキー）でフォームを送信しない方法: 小粋空間

とりあえずこの記事の「４．押されたキーを判定して抑止する」の所に書いてある方法で対応出来た。

	$(function(){
	$("input[type=text]").keypress(function(e) {
	var c = e.which ? e.which : e.keyCode;
	return c != 13;
	});
	});

view raw PreventSubmitByEnterKey hosted with ❤ by GitHub

Enterキーで次のフィールドにフォーカスを移動するには

次に、どうせならEnterキーで次のフィールドにフォーカスを自動で移動させたいな～、という事になった。やってみたら、jQueryのおかげでこんな感じで割りと簡単に出来た。

	$(function(){
	var elements = "input[type=text]";
	$(elements).keypress(function(e) {
	var c = e.which ? e.which : e.keyCode;
	if (c == 13) {
	var index = $(elements).index(this);
	$(elements + ":gt(" + index + "):first").focus();
	e.preventDefault();
	}
	});
	});

view raw PreventSubmitAndMoveFocusByEnterKey hosted with ❤ by GitHub

Enterキーが押された時にfalseを返すのではなくて e.preventDefault() を使う様に変えた。その理由はこちらを参照。

Shift＋Enterキーにも対応するには

さらについでにShift+Enterキーでの逆順の移動にも対応させてみた。

	$(function(){
	var elements = "input[type=text]";
	$(elements).keypress(function(e) {
	var c = e.which ? e.which : e.keyCode;
	if (c == 13) {
	var index = $(elements).index(this);
	var criteria = e.shiftKey ? ":lt(" + index + "):last" : ":gt(" + index + "):first";
	$(elements + criteria).focus();
	e.preventDefault();
	}
	});
	});

view raw PreventSubmitAndMoveFocusWithEnterKey2 hosted with ❤ by GitHub

もっとキーイベントを細かく制御するには

こんな感じで作りだすと、欲が出てきてさらにファンクションキーや矢印キーにも対応したくなってくる。でも、自分で作らなくても何かあるんじゃないかな～という気もする。

探してみたら次の様なjQueryプラグインが見つかった。

Enter/Tab項目移動とFunctionKey制御をplugin化 - せかにゃ～

これで機能的には申し分無さそうだ。ただソースコードを見ると対象のフォームがdocument.forms[0]に固定されていたりするので場合によっては少し変更する必要があるかも知れない。


キーイベントを拾って独自の関数を実行するだけならこういうのもあった。（フォーカス移動の処理は自分で書く必要があるみたいだ。）

jQuery.gpKeyでキー操作が楽々に。 | Ginpen.com

最近はWindowsアプリケーションをWebに置き換える案件も多いので、きっとこの様なプラグインは役に立つと思う。