[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軸に値を設定すればよいです。
Comments are currently closed.