1. 滑動版面
建國科技大學 資管系
饒瑞佶
2013/7 V1

2. 滑動版面 需要
Gesture(手勢辨識)
ViewFlipper (view切換容器)
滑動animation(上下左右)

3. SignFlipDemo.java
手勢辨識
ViewFlipper
透過覆寫自動產生

4. SignFlipDemo.java－onCreate
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
detector = new GestureDetector(this);//手勢辨識
flipper = new ViewFlipper(this);
flipper.setBackgroundColor(Color.WHITE);
flipper.addView(addTextView("step 1", 0));//
flipper.addView(addTextView("step 2", 1));
flipper.addView(addTextView("step 3", 2));
flipper.addView(addTextView("step 4", 3));
flipper.addView(addTextView("step 5", 4));
flipper.addView(addTextView("step 6", 5));
setContentView(flipper); }
將版面放入ViewFlipper
用ViewFlipper
設定起始畫面

5. SignFlipDemo.java－addTextView
private View addTextView(String text, int i) {
TextView tv = new TextView(this);
tv.setText(text);
tv.setGravity(1);
LinearLayout output = new LinearLayout(this);
output.setOrientation(LinearLayout.VERTICAL);
Drawable dabg;
switch (i) {
case 0:
dabg = this.getResources().getDrawable(R.drawable.bg0);
output.setBackgroundDrawable(dabg);
//建立一個ImageView
ImageView imgv= new ImageView(this);
imgv.setBackgroundResource(R.drawable.icon); //設定圖示
//設定ImageView的格式
RelativeLayout.LayoutParams forimgv =
new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT);
//將ImageView加入LinearLayout
output.addView(imgv,forimgv);
break;

6. SignFlipDemo.java－addTextView
case 1:
dabg = this.getResources().getDrawable(R.drawable.bg1);
output.setBackgroundDrawable(dabg);
break;
case 2:
dabg = this.getResources().getDrawable(R.drawable.bg2);
case 3:
dabg = this.getResources().getDrawable(R.drawable.bg3);
case 4:
dabg = this.getResources().getDrawable(R.drawable.bg4);
case 5:
dabg = this.getResources().getDrawable(R.drawable.bg5); }
output.addView(tv);
return output;

7. SignFlipDemo.java－onFling
@Override
public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,float velocityY) {
if (e1.getX() - e2.getX() > 120) {
this.flipper.setInAnimation(AnimationUtils.loadAnimation(this,R.layout.left_in));
this.flipper.setOutAnimation(AnimationUtils.loadAnimation(this,R.layout.left_out));
this.flipper.showNext();
return true;
} else if (e1.getX() - e2.getX() < -120) {
this.flipper.setInAnimation(AnimationUtils.loadAnimation(this,R.layout.right_in));
this.flipper.setOutAnimation(AnimationUtils.loadAnimation(this,R.layout.right_out));
this.flipper.showPrevious();
} else if (e1.getY() - e2.getY() > 200) {
this.flipper.setInAnimation(AnimationUtils.loadAnimation(this,R.layout.push_up_in));
this.flipper.setOutAnimation(AnimationUtils.loadAnimation(this,R.layout.push_up_out));
} else if (e1.getY() - e2.getY() < -200) {
this.flipper.setInAnimation(AnimationUtils.loadAnimation(this,R.layout.push_down_in));
this.flipper.setOutAnimation(AnimationUtils.loadAnimation(this,R.layout.push_down_out)); }
return false;
animation

8. SignFlipDemo.java－onTouchEvent
@Override
public boolean onTouchEvent(MotionEvent event) {
return this.detector.onTouchEvent(event); }

9. 向左滑動 left_in.xml left_out.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="
<translate android:fromXDelta="100%p"
android:toXDelta="0"
android:duration="500" />
</set>
left_out.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="
<translate android:fromXDelta="0" android:toXDelta="-100%p"
android:duration="500" />
</set>

10. 向右滑動 right_in.xml right_out.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="
<translate android:fromXDelta="-100%p" android:toXDelta="0"
android:duration="500" />
</set>
right_out.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="
<translate android:fromXDelta="0" android:toXDelta="100%p"
android:duration="500" />
</set>

11. 向下滑動 push_down_in.xml push_down_out.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="
<translate android:fromYDelta="-100%p" android:toYDelta="0"
android:duration="700" />
<alpha android:fromAlpha="1.0" android:toAlpha="1.0"
</set>
push_down_out.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="
<translate android:fromYDelta="0" android:toYDelta="100%p"
android:duration="700" />
<alpha android:fromAlpha="1.0" android:toAlpha="1.0"
</set>

12. 向上滑動 push_up_in.xml push_up_out.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="
<translate android:fromYDelta="100%p" android:toYDelta="0"
android:duration="700" />
<alpha android:fromAlpha="1.0" android:toAlpha="1.0"
</set>
push_up_out.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="
<translate android:fromYDelta="0" android:toYDelta= "-100%p"
android:duration="700" />
<alpha android:fromAlpha="1.0" android:toAlpha="1.0"
</set>