画面を指で横にスライドさせる方法。
ScrollView あたりを使うのかな?と調べてみると、 なるものがある。
画面作成
layout/ に first.xml、second.xml、third.xml を作成し、main.xml に ViewFlipper として追加する。
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<ViewFlipper android:id="@+id/flipper"
android:layout_width="fill_parent" android:layout_height="fill_parent">
<include android:id="@+id/firstlayout" layout="@layout/first" >
<include android:id="@+id/secondlayout" layout="@layout/second" >
<include android:id="@+id/thirdlayout" layout="@layout/third" >
</ViewFlipper>
</LinearLayout>
アニメーションカスタマイズ
アニメーションは、 に定義されているが、スライドを表現するには実現できないのでカスタマイズが必要となる。
以下の4ファイルを res/anim/ に作成する。
■move_in_left.xml
<?xml version="1.0" encoding="utf-8"?>
<translate
xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="350"
android:fromXDelta="-100%p"
android:toXDelta="0%p"
android:fromYDelta="0%p"
android:toYDelta="0%p">
</translate>
■move_in_right.xml
<?xml version="1.0" encoding="utf-8"?>
<translate
xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="350"
android:fromXDelta="-100%p"
android:toXDelta="0%p"
android:fromYDelta="0%p"
android:toYDelta="0%p">
</translate>
■move_out_left.xml
<?xml version="1.0" encoding="utf-8"?>
<translate
xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="350"
android:fromXDelta="-100%p"
android:toXDelta="0%p"
android:fromYDelta="0%p"
android:toYDelta="0%p">
</translate>
■move_out_right.xml
<?xml version="1.0" encoding="utf-8"?>
<translate
xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="350"
android:fromXDelta="0%p"
android:toXDelta="100%p"
android:fromYDelta="0%p"
android:toYDelta="0%p">
</translate>
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 のアニメーションと画面切り替えをする。
参考サイト