ViewFlipperでページめくり ～動作編

前回からの続き. ようやくページめくりのお話.

B. コード上で動きを指定

とりあえず

ViewFlipper flipper = (ViewFlipper) findViewById(R.id.flipper)

で ViewFlipperを取得.
ページを送る/戻す処理は

flipper.showNext()/flipper.showPrevious()

これだけ.
これをボタンのクリックイベントだったり画面のフリックイベントだったりに呼ぶようにしてやれば, それだけで次の/前の子ビューを表示してくれる.便利!

ただこれだけだと一瞬でページが切り替わる非常に味気ないページめくりに…
なので折角だしアニメーションを仕込んでみる.

手順は
① アニメーションの情報を仕込んだxmlを作成
② ①を基にflipperにアニメーションをセット
の2本立てでお送りします

①xmlを作成

まずはres/animを作成. 基本自動生成はされていないので自作のはず.
ここにAndroid XML File を作成します. RootElementは「translate」.
内容は,

<?xml version="1.0" encoding="utf-8"?>
<translate
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="500"
    android:fromXDelta="-100%p"
    android:toXDelta="0%p"
    android:fromYDelta="0%p"
    android:toYDelta="0%p">
</translate>

ためしに左からページが画面に入ってくるアニメーション.

android:durationがアニメーションに書ける時間(ミリ秒)
XDelta, YDeltaはそれぞれViewの左上の座標の位置を指定. 0%pで今写っている画面の左上を指す.
fromがアニメーション開始時の位置, toがアニメーション終了時の位置を指す.
のでこのアニメーションは,
画面外ちょうど画面1枚分左から, 500ミリ秒かけて画面ぴったりに収まるように入ってくる
アニメーションとなる.
ちょっと指定を変えれば出ていく, 逆方向の動きはもちろん, 斜めからスライドイン/アウトだって指定できちゃう(ﾟ∀ﾟ)ﾗｸﾁﾝ!

これを,
1. 左から入ってくる
2. 右へ出て行く
3. 左へ出て行く
4. 右から入ってくる
の4タイプ分用意します.

②flipperにアニメーションをセット

xmlを用意できたらいざセット

Animation slideInFromLeft = AnimationUtils.loadAnimation(this, R.anim.slide_in_from_left);
Animation slideOutToRight = AnimationUtils.loadAnimation(this, R.anim.slide_out_to_right);
flipper.setInAnimation(slideInFromLeft);
flipper.setOutAnimation(slideOutToRight);

slide_in_from_leftがちょうど①に挙げたxml. 同様にAnimation を作成し, InとOutそれぞれflipperにセットしてやる.
新しいページの入り方と古いページの出方…のはず(・ω・`)
これでOK.
ただしIn, Outそれぞれアニメーションは1個ずつしか登録できないため, 上記のコード全部で右にページを送る処理ひとつ.
左にページを送る逆向きの処理を同じ flipperにセットしたい場合, 処理を呼び出すごとにセットしてやらないと, 最後にセットしたアニメーションのみ実行することになります.
なので1ページ戻るアニメーションを実現するなら,

 flipper.setInAnimation(slideInFromLeft);
 flipper.setOutAnimation(slideOutToRight);
 flipper.showPrevious();

これ全部を「戻る」ボタンあたりのonClickで呼んでやる必要がある.逆もまた然り.


これで一応アニメーションしながらページめくりはできる. できるけど…なんか違う.
やっぱりフリックでページをめくりたい！


なのでさらに続けてみます.







あともうちょっとだけ続くんじゃ('A`)