【Android基礎知識】使用ViewFlipper實現頁面左右滑動
阿新 • • 發佈：2019-01-06
說到android的左右滑動效果我們可以說是在每個應用上面都可以看到這樣的效果，不管是微博，還是QQ等。實現左右滑動的方式很多，有ViewPaer(不過這個和需要android-support-v4.jar的支援)，自定義實現Viewgroup，gallery等都可以達到這種效果。這裡做下ViewFliper實現左右滑動的效果。
以下會會用到的技術有：
1、ViewFlipper
2、GestureDetector
3、Animation
主要是這三個類再起作用。
原理：向左向右滑動主要是依賴手勢來控制，手勢向右滑動就呼叫 viewFlipper.showNext();方法，同理，向左滑動就會去呼叫viewFlipper.showPrevious();方法。
接下來直接上程式碼：
動畫檔案
以下會會用到的技術有：
1、ViewFlipper
2、GestureDetector
3、Animation
主要是這三個類再起作用。
原理：向左向右滑動主要是依賴手勢來控制，手勢向右滑動就呼叫 viewFlipper.showNext();方法，同理，向左滑動就會去呼叫viewFlipper.showPrevious();方法。
接下來直接上程式碼：
首先在佈局檔案中新增ViewFlipper的標籤：
MainActivity.java<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" tools:context="com.example.viewflipperdemo.MainActivity" > <ViewFlipper android:id="@+id/viewflipper" android:layout_width="match_parent" android:layout_height="match_parent"> </ViewFlipper> </RelativeLayout>
public class MainActivity extends Activity implements OnGestureListener{ <span style="white-space:pre"> </span> private ViewFlipper viewFlipper; private GestureDetector detector; //手勢檢測 Animation leftInAnimation; Animation leftOutAnimation; Animation rightInAnimation; Animation rightOutAnimation; private int[] res = {R.drawable.pic1,R.drawable.pic2,R.drawable.pic3,R.drawable.pic4}; float startX; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); viewFlipper = (ViewFlipper)findViewById(R.id.viewflipper); detector = new GestureDetector(this); //動態載入子view for(int i = 0;i<res.length;i++){ <span style="white-space:pre"> </span>viewFlipper.addView(getImageView(res[i])); } leftInAnimation = AnimationUtils.loadAnimation(this, R.anim.left_in); leftOutAnimation = AnimationUtils.loadAnimation(this, R.anim.left_out); rightInAnimation = AnimationUtils.loadAnimation(this, R.anim.right_in); rightOutAnimation = AnimationUtils.loadAnimation(this, R.anim.right_out); } @Override public boolean onTouchEvent(MotionEvent event) { return this.detector.onTouchEvent(event); //touch事件交給手勢處理。 } private ImageView getImageView(int resId){ ImageView image = new ImageView(this); //image.setImageResource(resId); image.setBackgroundResource(resId); return image; } @Override public boolean onDown(MotionEvent e) { return false; } @Override public void onShowPress(MotionEvent e) { } @Override public boolean onSingleTapUp(MotionEvent e) { <span style="white-space:pre"> </span>return false; } @Override public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX,float distanceY) { <span style="white-space:pre"> </span>return false; } @Override public void onLongPress(MotionEvent e) { } @Override public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,float velocityY) { if (e1.getX() - e2.getX() > 120) { <span style="white-space:pre"> </span>//避免迴圈滑動 <span style="white-space:pre"> </span>if (viewFlipper.getDisplayedChild() == res.length - 1) { <span style="white-space:pre"> </span>viewFlipper.stopFlipping(); <span style="white-space:pre"> </span>return false; <span style="white-space:pre"> </span>} else { <span style="white-space:pre"> </span>viewFlipper.setInAnimation(leftInAnimation); <span style="white-space:pre"> </span>viewFlipper.setOutAnimation(leftOutAnimation); <span style="white-space:pre"> </span>viewFlipper.showNext();// 向右滑動 <span style="white-space:pre"> </span>return true; <span style="white-space:pre"> </span>} } else if (e1.getX() - e2.getY() < -120) { <span style="white-space:pre"> </span>if (viewFlipper.getDisplayedChild() == 0) { <span style="white-space:pre"> </span>viewFlipper.stopFlipping(); <span style="white-space:pre"> </span>return false; <span style="white-space:pre"> </span>} else { <span style="white-space:pre"> </span>viewFlipper.setInAnimation(rightInAnimation); <span style="white-space:pre"> </span>viewFlipper.setOutAnimation(rightOutAnimation); <span style="white-space:pre"> </span>viewFlipper.showPrevious();// 向左滑動 <span style="white-space:pre"> </span>return true; } } return false; } }
動畫檔案
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="600"
/>
<alpha
android:fromAlpha="0.1"
android:toAlpha="1.0"
android:duration="600"
/>
</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="600"
/>
<alpha
android:fromAlpha="1.0"
android:toAlpha="0.1"
android:duration="600"
/>
</set><?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="600"
/>
<alpha
android:fromAlpha="0.1"
android:toAlpha="1.0"
android:duration="600"
/>
</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="600"
/>
<alpha
android:fromAlpha="1.0"
android:toAlpha="0.1"
android:duration="600"
/>
</set>