2012年3月21日水曜日

[Android]TextViewタッチで表裏を裏返す方法




TextViewをタッチしたときに表と裏を切り替えるときの方法です。
アニメーションを使って裏返したように見せます。

レイアウトはFrameLayout または、RelativeLayoutに
TextView textCard1;         // 表
TextView textCard2;         // 裏
の2つを配置します。
裏となるtextCard2は表示しない(View.INVISIBLE or View.GONE)ようにしておきます。

タッチしたときに以下のようにアニメーションを設定します。

    int h = textCard1.getHeight();
    int w = textCard1.getWidth();
    anim = new ScaleAnimation(1, 0, 1, 1, w/2, h/2);
    anim.setDuration(500);
    anim2 = new ScaleAnimation(0, 1, 1, 1, w/2, h/2);
    anim2.setDuration(500);
    if(viewMode) {
    anim.setAnimationListener(new AnimationListener() {
@Override
public void onAnimationStart(Animation animation) {
}
@Override
public void onAnimationRepeat(Animation animation) {
}
@Override
public void onAnimationEnd(Animation animation) {
    textCard2.setVisibility(View.VISIBLE);
    textCard1.setVisibility(View.INVISIBLE);
view.startAnimation(anim2);
}
});
    view.startAnimation(anim);
    } else {
    anim.setAnimationListener(new AnimationListener() {
@Override
public void onAnimationStart(Animation animation) {
}
@Override
public void onAnimationRepeat(Animation animation) {
}
@Override
public void onAnimationEnd(Animation animation) {
    textCard1.setVisibility(View.VISIBLE);
    textCard2.setVisibility(View.INVISIBLE);
    view.startAnimation(anim2);
}
});
    view.startAnimation(anim);
    }
        viewMmode = !viewMode;


ここから説明。
ScaleAnimationを使用しています。

     ScaleAnimation(fromX, toX, fromY, toY, pivotX, pivotY)

anim は表示中のView(表)を消すアニメです。
     anim = new ScaleAnimation(1, 0, 1, 1, w/2, h/2);

fromXは開始時のScaleサイズ(X方向)
toXは終了時のScaleサイズ(X方向)

1が等倍で、0で表示されません。
表示されているものをだんだん表示しなくする設定にしています。

pivotX / pivotYは中心点をどこに置くかです。
今回はViewの中心にしています。



anim2は逆に表示されていないView(裏側)を表示するアニメです。
     anim2 = new ScaleAnimation(0, 1, 1, 1, w/2, h/2);
fromX / toXのみ変更しています。
0からだんだん表示する設定。


今回は横方向しか設定していないので、
縦方向に裏返すようにする場合はY軸に値を設定すればよいです。






0 件のコメント:

コメントを投稿