天天看點

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: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);

}

繼續閱讀