Download
1 / 12
120 likes | 285 Views
滑動版面. 建國科技大學 資管系 饒瑞佶 2013/7 V1. 滑動版面. 需要 Gesture( 手勢辨識 ) ViewFlipper (view 切換容器 ) 滑動 animation( 上下左右 ). SignFlipDemo.java. 手勢辨識. ViewFlipper. 透過覆寫自動產生. SignFlipDemo.java － onCreate. @Override public void onCreate(Bundle savedInstanceState) { super .onCreate(savedInstanceState);
E N D
滑動版面 建國科技大學 資管系 饒瑞佶 2013/7 V1
滑動版面 • 需要 • Gesture(手勢辨識) • ViewFlipper(view切換容器) • 滑動animation(上下左右)
SignFlipDemo.java 手勢辨識 ViewFlipper 透過覆寫自動產生
SignFlipDemo.java－onCreate @Override publicvoid 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 設定起始畫面
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 @Override publicbooleanonFling(MotionEvent e1, MotionEvent e2, floatvelocityX,floatvelocityY) { 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(); returntrue; } elseif (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(); returntrue; } elseif (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)); this.flipper.showNext(); returntrue; } elseif (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)); this.flipper.showPrevious(); returntrue; } returnfalse; } animation
SignFlipDemo.java－onTouchEvent @Override publicboolean onTouchEvent(MotionEvent event) { returnthis.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 <?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> right_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>
向下滑動 push_down_in.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> push_down_out.xml <?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 <?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> push_up_out.xml <?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>
