滑動版面

建國科技大學 資管系饒瑞佶

2013/7 V1

滑動版面

• 需要–Gesture( 手勢辨識 )–ViewFlipper (view 切換容器 )–滑動 animation( 上下左右 )

SignFlipDemo.java

透過覆寫自動產生

ViewFlipper

手勢辨識

@Overridepublic 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);}

SignFlipDemo.java － onCreate

將版面放入ViewFlippe

r用

ViewFlipper設定起始畫面

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;

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); output.setBackgroundDrawable(dabg); break; case 3: dabg = this.getResources().getDrawable(R.drawable.bg3); output.setBackgroundDrawable(dabg); break; case 4: dabg = this.getResources().getDrawable(R.drawable.bg4); output.setBackgroundDrawable(dabg); break; case 5: dabg = this.getResources().getDrawable(R.drawable.bg5); output.setBackgroundDrawable(dabg); break; } output.addView(tv); return output;}

SignFlipDemo.java － onFling

animation

SignFlipDemo.java － onTouchEvent

@Overridepublic boolean onTouchEvent(MotionEvent event) { return this.detector.onTouchEvent(event);}

left_in.xml

<?xml version="1.0" encoding="utf-8"?><set xmlns:android="http://schemas.android.com/apk/res/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="http://schemas.android.com/apk/res/android"> <translate android:fromXDelta="0" android:toXDelta="-100%p" android:duration="500" /></set>

向左滑動

right_in.xml

right_out.xml

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

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

向右滑動

push_down_in.xml

push_down_out.xml

<?xml version="1.0" encoding="utf-8"?><set xmlns:android="http://schemas.android.com/apk/res/android"> <translate android:fromYDelta="-100%p" android:toYDelta="0" android:duration="700" /> <alpha android:fromAlpha="1.0" android:toAlpha="1.0" android:duration="700" /></set>

<?xml version="1.0" encoding="utf-8"?><set xmlns:android="http://schemas.android.com/apk/res/android"> <translate android:fromYDelta="0" android:toYDelta="100%p" android:duration="700" /> <alpha android:fromAlpha="1.0" android:toAlpha="1.0" android:duration="700" /></set>

向下滑動

push_up_in.xml

push_up_out.xml

<?xml version="1.0" encoding="utf-8"?><set xmlns:android="http://schemas.android.com/apk/res/android"> <translate android:fromYDelta="100%p" android:toYDelta="0" android:duration="700" /> <alpha android:fromAlpha="1.0" android:toAlpha="1.0" android:duration="700" /></set>

<?xml version="1.0" encoding="utf-8"?><set xmlns:android="http://schemas.android.com/apk/res/android"> <translate android:fromYDelta="0" android:toYDelta= "-100%p" android:duration="700" /> <alpha android:fromAlpha="1.0" android:toAlpha="1.0" android:duration="700" /></set>

向上滑動