溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
大家都使用過ViewPager，但是ViewPager還有一個兄弟，那就是ViewFlipper。兩者的名字非常相似，我們可以將ViewPager理解成“一頁一頁的視圖”，ViewFlipper則是“快速翻轉的視圖”，但后者的使用率卻遠不及前者，不過這并不意味著ViewFlipper就弱了。現在我們就來拜訪一下經常被冷落的ViewFlipper。
1、創建工程及頁面視圖布局
在Android Studio中新建一個工程，實現這樣一個效果：創建紅、橙、綠、藍四種顏色的頁面，然后通過ViewFlipper讓它們來回切換。四個頁面布局文件的名稱如下所示：
item_view1.xml的代碼如下：
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:background="@android:color/holo_red_light" android:layout_width="match_parent" android:layout_height="match_parent"> </LinearLayout>
另外三個布局的代碼只要把背景色換掉就可以了。
2、添加布局至ViewFlipper
頁面創建好了，那我們怎么把它放置到ViewFlipper中呢？很簡單，ViewFlipper支持include標簽添加頁面，我們只需在activity_main.xml中將四個布局依次include進去即可。
直接運行就可以看到下面的效果了：
除了直接在布局文件中添加頁面外，也可以在代碼中添加，把activity_mai.xml中include標簽注釋掉，然后在MainActivity中初始化ViewFlipper之后再添加如下的代碼：
//要添加的頁面布局ID
private int viewIds[] = {R.layout.item_view1, R.layout.item_view2, R.layout.item_view3, R.layout.item_view4};
/**
* 將頁面添加進ViewFlipper
*/
private void addViews() {
View itemView;
for (int viewId : viewIds) {
itemView = View.inflate(this,viewId,null);
viewFlipper.addView(itemView);
}
}
然后在onCreate中調用addViews方法即可。
3、添加頁面切換動畫
頁面切換的效果我們是實現了，但是沒有變化過程，看起來太生硬了，累眼睛。如果能有動畫效果的話就會舒服很多。這里，我們就要用到兩個新屬性了：
- inAnimation：視圖進入時的動畫效果
- outAnimation：視圖退出時的動畫效果
這兩個屬性也可以在代碼中設置的，稍后我們會用到。現在，我們就創建所需要的動畫文件。比如，我想要實現左右循環滑動的動畫效果，那么就可以分成兩種情況來討論：一種是新的視圖從左邊進入，原有的視圖從右邊退出，即從左往右滑動；另一種是新視圖從右邊進入，原有的視圖從左邊退出，即從右往左滑動。弄清楚所有的動畫效果之后，我們就在res文件夾下新建一個anim文件夾，創建如下如下四種動畫效果：
left_in.xml
視圖從左邊進入界面的動畫：
<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android"> <translate android:duration="500" android:fromXDelta="-100%p" android:toXDelta="0"/> </set>
left_out.xml
視圖從左邊退出界面的動畫：
<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android"> <translate android:duration="500" android:fromXDelta="0" android:toXDelta="-100%p"/> </set>
right_in.xml
<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android"> <translate android:duration="500" android:fromXDelta="100%p" android:toXDelta="0"/> </set>
right_out.xml
<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android"> <translate android:duration="500" android:fromXDelta="0" android:toXDelta="100%p"/> </set>
現在我們先來試試從左往右轉的動畫效果。在布局中給ViewFlipper加上如下的屬性:
android:inAnimation="@anim/left_in" android:outAnimation="@anim/right_out"
運行一下，就可以實現從左往右滑動的動畫效果了（GIF圖有點失真，不過效果是沒問題的）。
相信不用我說，你也知道怎么讓它從右往左滑動了吧？
4、手指左右滑屏一（使用觸摸監聽事件實現）
看著畫面自顧自地滑動，是不是心癢癢的？沒關系，下面我們就來讓它響應我們手指的滑動。在此之前，先做點準備工作：前往布局文件，去掉動畫屬性，并將autoStart屬性設為false。
要讓它聽從“指揮”，我們可以先繼承OnTouchListener接口，然后實現onTouch方法：
private float startX; //手指按下時的x坐標
private float endX; //手指抬起時的x坐標
private float moveX = 100f; //判斷是否切換頁面的標準值
/**
* 觸摸監聽事件
* @param v
* @param event
* @return
*/
@Override
public boolean onTouch(View v, MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
//手指按下時獲取起始點坐標
startX = event.getX();
break;
case MotionEvent.ACTION_UP:
//手指抬起時獲取結束點坐標
endX = event.getX();
//比較startX和endX，判斷手指的滑動方向
if (endX - startX > moveX) { //手指從左向右滑動
viewFlipper.setInAnimation(this, R.anim.left_in);
viewFlipper.setOutAnimation(this, R.anim.right_out);
viewFlipper.showPrevious();
} else if (startX - endX > moveX) { //手指向右向左滑動
viewFlipper.setInAnimation(this, R.anim.right_in);
viewFlipper.setOutAnimation(this, R.anim.left_out);
viewFlipper.showNext();
}
break;
}
return true;
}
上面的代碼不難，注釋也寫得比較清楚了。總體的思路就是獲取手指按下和抬起時的坐標，然后判斷是向左還是向右滑動。值得注意的是showPrevious和showNext方法，前者是顯示上一個視圖，后者則是顯示后一個視圖。最后還要記住，返回值要改為true，否則觸摸事件是無法響應的。
效果圖如下，可以向左，也可以向右。
5、手指左右滑屏二（使用手勢監聽事件實現）
除了觸摸監聽事件之外，我們也可以用手勢監聽事件OnGestureListener實現同樣的效果，但繼承了該接口之后要實現一連串的方法，代碼一下子膨脹起來了，而我們需要的只是其中一個方法啊。好在Android還提供了一個類SimpleOnGestureListener，這樣我們只要自定義一個類繼承它，然后實現我們需要的方法就可以了：
//創建手勢監聽器
GestureDetector gestureDetector = new GestureDetector(this, new MyGestureListener());
/**
* 自定義手勢監聽類
*/
class MyGestureListener extends GestureDetector.SimpleOnGestureListener{
@Override
public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {
if (e2.getX() - e1.getX() > moveX){
viewFlipper.setInAnimation(MainActivity.this, R.anim.left_in);
viewFlipper.setOutAnimation(MainActivity.this, R.anim.right_out);
viewFlipper.showPrevious();
} else if (e2.getX() - e1.getX() < moveX){
viewFlipper.setInAnimation(MainActivity.this, R.anim.right_in);
viewFlipper.setOutAnimation(MainActivity.this, R.anim.left_out);
viewFlipper.showNext();
}
return true;
}
}
這里的onFling方法得解釋一下，它表示的是手指在屏幕上移動然后松開的手勢，也就是滑動。前面兩個參數分別表示手指按下和松開時的事件，通過它們的對象去調用getX()方法就可以獲取滑動前后的坐標了。后面的步驟就跟我們在觸摸事件里面的一樣，相信你能理解的。
我一開始以為到這里就大功告成了，可運行之后卻紋絲不動！仔細查看文檔，發現還必須到觸摸監聽方法中調用onTouchEvent方法才行，否則觸摸事件不會起作用的。
@Override
public boolean onTouch(View v, MotionEvent event) {
gestureDetector.onTouchEvent(event);
return true;
}
6、后記
ViewFlipper的用法就告一段落了，寫這篇文章的時候我還順便復習了手勢監聽事件等知識，也希望你能有所收獲。下面是源碼：
ViewFlipperDemo
7、參考文章
谷歌官方文檔之ViewFlipper
Android的手勢操作識別
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
