ViewFlipper で画面スライド

2011/04/20

画面を指で横にスライドさせる方法。 ScrollView あたりを使うのかな?と調べてみると、ViewFlipper なるものがある。

画面作成

layout/ に first.xml、second.xml、third.xml を作成し、main.xml に ViewFlipper として追加する。




    
        
        
        
    

アニメーションカスタマイズ

アニメーションは、R.anim に定義されているが、スライドを表現するには実現できないのでカスタマイズが必要となる。

以下の4ファイルを res/anim/ に作成する。 ■move_in_left.xml





■move_in_right.xml





■move_out_left.xml





■move_out_right.xml





ViewFlipper のアニメーション

[java] import android.app.Activity; import android.os.Bundle; import android.view.MotionEvent; import android.view.View; import android.view.animation.AnimationUtils; import android.widget.ViewFlipper;

public class FlipperTestActivity extends Activity implements View.OnTouchListener { private ViewFlipper viewFlipper; private float firstTouch; private boolean isFlip = false;

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);

    viewFlipper = (ViewFlipper) findViewById(R.id.flipper);
    viewFlipper.setAutoStart(false);
    findViewById(R.id.firstlayout).setOnTouchListener(this);
    findViewById(R.id.secondlayout).setOnTouchListener(this);
    findViewById(R.id.thirdlayout).setOnTouchListener(this);
}

public boolean onTouch(View v, MotionEvent event) {
    int x = (int)event.getRawX();
    switch(v.getId()) {
    case R.id.firstlayout:
    case R.id.secondlayout:
    case R.id.thirdlayout:
        switch(event.getAction()) {
        case MotionEvent.ACTION_DOWN:
            firstTouch = event.getRawX();
            return true;
        case MotionEvent.ACTION_MOVE:
            if(!isFlip) {
                if(x - firstTouch > 50) {
                    isFlip = true;
                    viewFlipper.setInAnimation(AnimationUtils.loadAnimation(this, R.anim.move_in_left));
                    viewFlipper.setOutAnimation(AnimationUtils.loadAnimation(this, R.anim.move_out_right));
                    viewFlipper.showNext();
                }
                else if(firstTouch - x > 50) {
                    isFlip = true;
                    viewFlipper.setInAnimation(AnimationUtils.loadAnimation(this, R.anim.move_in_right));
                    viewFlipper.setOutAnimation(AnimationUtils.loadAnimation(this, R.anim.move_out_left));
                    viewFlipper.showPrevious();
                }
            }
            break;
        case MotionEvent.ACTION_UP:
            isFlip = false;
            break;
        }
    }

    return false;
}

} [/java] View.OnTouchListener を implements して View のタッチイベントを登録する。 onTouch でタッチの状況を判別して ViewFlipper のアニメーションと画面切り替えをする。

参考サイト

ViewFlipperで簡単スライドショー