440
技術社區[雲棲]
Android ViewFlipper觸摸動畫
今天給大家介紹一下如何實現androd主頁麵的左右拖動效果。實現起來很簡單，就是使用ViewFlipper來將您要來回拖動的View裝在一起，然後與GestureDetector手勢識別類來聯動，確定要顯示哪個View，加上一點點動畫效果即可。比如當手指向左快速滑動時跳轉到上一個View，手指向右快速滑動時跳轉到下一個View，本例中使用圖片作為各個View的頁麵，實現左右快速滑動顯示不同的圖片。首先來看看我們的layout，如下所示：
<linearlayout android:layout_height="fill_parent" android:layout_width="fill_parent" android:orientation="vertical" xmlns:androhttps://schemas.android.com/apk/res/android" target="_blank">https://schemas.android.com/apk/res/android">
<viewflipper android: android:layout_below="@+id/CockpitLayout" android:layout_height="fill_parent" android:layout_width="fill_parent">
<include android: layout="@layout/first">
<include android: layout="@layout/second">
<include android: layout="@layout/third">
<include android: layout="@layout/fourth">
</include></include></include></include></viewflipper>
</linearlayout>
如上所示，在ViewFlipper中放置多個layout（接下來會在不同的layout中來回滑動），ViewFlipper在同一個頁麵就顯示其中一個layout。ViewFlipper中的四個layout很簡單，我們就放置一張圖片，如下所示：
<linearlayout android:gravity="center_vertical" android:layout_height="fill_parent" android:layout_width="fill_parent" xmlns:androhttps://schemas.android.com/apk/res/android" target="_blank">https://schemas.android.com/apk/res/android">
<imageview android:layout_height="wrap_content" android:layout_width="wrap_content" android:src="@drawable/v1">
</imageview></linearlayout>
接下來我們來看看Activity，我們的Activity需要實現兩個接口OnGestureListener,OnTouchListener。具體的代碼如下所示，代碼中都有相應的注釋，這裏就不再詳述。
package com.ideasandroid.demo;
import android.app.Activity;
import android.os.Bundle;
import android.view.GestureDetector;
import android.view.MotionEvent;
import android.view.View;
import android.view.GestureDetector.OnGestureListener;
import android.view.View.OnTouchListener;
import android.view.animation.AccelerateInterpolator;
import android.view.animation.Animation;
import android.view.animation.TranslateAnimation;
import android.widget.ViewFlipper;
public class ViewFlipperDemo extends Activity implements OnGestureListener,OnTouchListener{
private ViewFlipper mFlipper;
GestureDetector mGestureDetector;
private int mCurrentLayoutState;
private static final int FLING_MIN_DISTANCE = 100;
private static final int FLING_MIN_VELOCITY = 200;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
mFlipper = (ViewFlipper) findViewById(R.id.flipper);
//注冊一個用於手勢識別的類
mGestureDetector = new GestureDetector(this);
//給mFlipper設置一個listener
mFlipper.setOnTouchListener(this);
mCurrentLayoutState = 0;
//允許長按住ViewFlipper,這樣才能識別拖動等手勢
mFlipper.setLongClickable(true);
}
/**
* 此方法在本例中未用到，可以指定跳轉到某個頁麵
* @param switchTo
*/
public void switchLayoutStateTo(int switchTo) {
while (mCurrentLayoutState != switchTo) {
if (mCurrentLayoutState > switchTo) {
mCurrentLayoutState--;
mFlipper.setInAnimation(inFromLeftAnimation());
mFlipper.setOutAnimation(outToRightAnimation());
mFlipper.showPrevious();
} else {
mCurrentLayoutState++;
mFlipper.setInAnimation(inFromRightAnimation());
mFlipper.setOutAnimation(outToLeftAnimation());
mFlipper.showNext();
}
}
;
}
/**
* 定義從右側進入的動畫效果
* @return
*/
protected Animation inFromRightAnimation() {
Animation inFromRight = new TranslateAnimation(
Animation.RELATIVE_TO_PARENT, +1.0f,
Animation.RELATIVE_TO_PARENT, 0.0f,
Animation.RELATIVE_TO_PARENT, 0.0f,
Animation.RELATIVE_TO_PARENT, 0.0f);
inFromRight.setDuration(500);
inFromRight.setInterpolator(new AccelerateInterpolator());
return inFromRight;
}
/**
* 定義從左側退出的動畫效果
* @return
*/
protected Animation outToLeftAnimation() {
Animation outtoLeft = new TranslateAnimation(
Animation.RELATIVE_TO_PARENT, 0.0f,
Animation.RELATIVE_TO_PARENT, -1.0f,
Animation.RELATIVE_TO_PARENT, 0.0f,
Animation.RELATIVE_TO_PARENT, 0.0f);
outtoLeft.setDuration(500);
outtoLeft.setInterpolator(new AccelerateInterpolator());
return outtoLeft;
}
/**
* 定義從左側進入的動畫效果
* @return
*/
protected Animation inFromLeftAnimation() {
Animation inFromLeft = new TranslateAnimation(
Animation.RELATIVE_TO_PARENT, -1.0f,
Animation.RELATIVE_TO_PARENT, 0.0f,
Animation.RELATIVE_TO_PARENT, 0.0f,
Animation.RELATIVE_TO_PARENT, 0.0f);
inFromLeft.setDuration(500);
inFromLeft.setInterpolator(new AccelerateInterpolator());
return inFromLeft;
}
/**
* 定義從右側退出時的動畫效果
* @return
*/
protected Animation outToRightAnimation() {
Animation outtoRight = new TranslateAnimation(
Animation.RELATIVE_TO_PARENT, 0.0f,
Animation.RELATIVE_TO_PARENT, +1.0f,
Animation.RELATIVE_TO_PARENT, 0.0f,
Animation.RELATIVE_TO_PARENT, 0.0f);
outtoRight.setDuration(500);
outtoRight.setInterpolator(new AccelerateInterpolator());
return outtoRight;
}
public boolean onDown(MotionEvent e) {
// TODO Auto-generated method stub
return false;
}
/*
* 用戶按下觸摸屏、快速移動後鬆開即觸發這個事件
* e1：第1個ACTION_DOWN MotionEvent
* e2：最後一個ACTION_MOVE MotionEvent
* velocityX：X軸上的移動速度，像素/秒
* velocityY：Y軸上的移動速度，像素/秒
* 觸發條件 ：
* X軸的坐標位移大於FLING_MIN_DISTANCE，且移動速度大於FLING_MIN_VELOCITY個像素/秒
*/
public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,
float velocityY) {
if (e1.getX() - e2.getX() > FLING_MIN_DISTANCE
&& Math.abs(velocityX) > FLING_MIN_VELOCITY) {
// 當像左側滑動的時候
//設置View進入屏幕時候使用的動畫
mFlipper.setInAnimation(inFromRightAnimation());
//設置View退出屏幕時候使用的動畫
mFlipper.setOutAnimation(outToLeftAnimation());
mFlipper.showNext();
} else if (e2.getX() - e1.getX() > FLING_MIN_DISTANCE
&& Math.abs(velocityX) > FLING_MIN_VELOCITY) {
// 當像右側滑動的時候
mFlipper.setInAnimation(inFromLeftAnimation());
mFlipper.setOutAnimation(outToRightAnimation());
mFlipper.showPrevious();
}
return false;
}
public void onLongPress(MotionEvent e) {
// TODO Auto-generated method stub
}
public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX,
float distanceY) {
return false;
}
public void onShowPress(MotionEvent e) {
// TODO Auto-generated method stub
}
public boolean onSingleTapUp(MotionEvent e) {
// TODO Auto-generated method stub
return false;
}
public boolean onTouch(View v, MotionEvent event) {
// 一定要將觸屏事件交給手勢識別類去處理（自己處理會很麻煩的）
return mGestureDetector.onTouchEvent(event);
}
}
最後更新：2017-04-02 06:51:48