今天給大家介紹一下如何實作androd首頁面的左右拖動效果。實作起來很簡單,就是使用viewflipper來将您要來回拖動的view裝在一起,然後與gesturedetector手勢識别類來關聯,确定要顯示哪個view,加上一點點動畫效果即可。比如當手指向左快速滑動時跳轉到上一個view,手指向右快速滑動時跳轉到下一個view,本例中使用圖檔作為各個view的頁面,實作左右快速滑動顯示不同的圖檔。
首先來看看我們的layout,如下所示:
<linearlayout android:layout_height="fill_parent" android:layout_width="fill_parent" android:orientation="vertical" xmlns:android="http://schemas.android.com/apk/res/android">
<viewflipper android:id="@+id/flipper" android:layout_below="@+id/cockpitlayout" android:layout_height="fill_parent" android:layout_width="fill_parent">
<include android:id="@+id/firstlayout" layout="@layout/first">
<include android:id="@+id/secondlayout" layout="@layout/second">
<include android:id="@+id/thirdlayout" layout="@layout/third">
<include android:id="@+id/fourthlayout" 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:android="http://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);
infromright.setduration(500);
infromright.setinterpolator(new accelerateinterpolator());
return infromright;
* 定義從左側退出的動畫效果
protected animation outtoleftanimation() {
animation outtoleft = new translateanimation(
animation.relative_to_parent, -1.0f,
outtoleft.setduration(500);
outtoleft.setinterpolator(new accelerateinterpolator());
return outtoleft;
* 定義從左側進入的動畫效果
protected animation infromleftanimation() {
animation infromleft = new translateanimation(
infromleft.setduration(500);
infromleft.setinterpolator(new accelerateinterpolator());
return infromleft;
* 定義從右側退出時的動畫效果
protected animation outtorightanimation() {
animation outtoright = new translateanimation(
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
// 當像右側滑動的時候
mflipper.setinanimation(infromleftanimation());
mflipper.setoutanimation(outtorightanimation());
mflipper.showprevious();
}
public void onlongpress(motionevent e) {
public boolean onscroll(motionevent e1, motionevent e2, float distancex,
float distancey) {
public void onshowpress(motionevent e) {
public boolean onsingletapup(motionevent e) {
public boolean ontouch(view v, motionevent event) {
// 一定要将觸屏事件交給手勢識别類去處理(自己處理會很麻煩的)
return mgesturedetector.ontouchevent(event);
}