首页动画效果实现－－viewfilpper

说到android的左右滑动效果我们可以说是在每个应用上面都可以看到这样的效果，不管是微博，还是QQ等。实现左右滑动的方式很多，有ViewPaer(不过这个和需要android-support-v4.jar的支持)，自定义实现Viewgroup，gallery等都可以达到这种效果。这里做下ViewFliper实现左右滑动的效果。

以下会会用到的技术有：

1、ViewFlipper

2、GestureDetector

3、Animation

主要是这三个类再起作用。

原理：向左向右滑动主要是依赖手势来控制，手势向右滑动就调用 viewFlipper.showNext();方法，同理，向左滑动就会去调用viewFlipper.showPrevious();方法。

接下来直接上代码：

首先在布局文件中添加ViewFlipper的标签：

复制内容到剪贴板

代码:

<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" >

<ViewFlipper

android:id="@+id/viewFlipper"

android:layout_width="match_parent"

android:layout_height="match_parent"

></ViewFlipper>

</RelativeLayout>

编写代码：

复制内容到剪贴板

代码:

package com.xzw.ui;

import android.app.Activity;

import android.os.Bundle;

import android.util.Log;

import android.view.GestureDetector;

import android.view.GestureDetector.OnGestureListener;

import android.view.MotionEvent;

import android.view.View;

import android.view.ViewGroup;

import android.view.Window;

import android.view.animation.Animation;

import android.view.animation.AnimationUtils;

import android.widget.ImageView;

import android.widget.ViewFlipper;

/**

* 左右滑动demo

* @author xzw

*

*/

public class MainActivity extends Activity implements OnGestureListener {

private static final String TAG = "MainActivity";

private ViewFlipper viewFlipper;

private GestureDetector detector; //手势检测

Animation leftInAnimation;

Animation leftOutAnimation;

Animation rightInAnimation;

Animation rightOutAnimation;

@override

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

requestWindowFeature(Window.FEATURE_NO_TITLE);

setContentView(R.layout.activity_main);

viewFlipper = (ViewFlipper)findViewById(R.id.viewFlipper);

detector = new GestureDetector(this);

//往viewFlipper添加View

viewFlipper.addView(getImageView(R.drawable.new_feature_1));

viewFlipper.addView(getImageView(R.drawable.new_feature_2));

viewFlipper.addView(getImageView(R.drawable.new_feature_3));

viewFlipper.addView(getImageView(R.drawable.new_feature_4));

viewFlipper.addView(getImageView(R.drawable.new_feature_5));

viewFlipper.addView(getImageView(R.drawable.new_feature_6));

//动画效果

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

}

private ImageView getImageView(int id){

ImageView imageView = new ImageView(this);

imageView.setImageResource(id);

return imageView;

}

@override

public boolean onTouchEvent(MotionEvent event) {

return this.detector.onTouchEvent(event); //touch事件交给手势处理。

}

@override

public boolean onDown(MotionEvent e) {

// TODO Auto-generated method stub

return false;

}

@override

public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,

float velocityY) {

Log.i(TAG, "e1="+e1.getX()+" e2="+e2.getX()+" e1-e2="+(e1.getX()-e2.getX()));

if(e1.getX()-e2.getX()>120){

viewFlipper.setInAnimation(leftInAnimation);

viewFlipper.setOutAnimation(leftOutAnimation);

viewFlipper.showNext();//向右滑动

return true;

}else if(e1.getX()-e2.getY()<-120){

viewFlipper.setInAnimation(rightInAnimation);

viewFlipper.setOutAnimation(rightOutAnimation);

viewFlipper.showPrevious();//向左滑动

return true;

}

return false;

}

@override

public void onLongPress(MotionEvent e) {

// TODO Auto-generated method stub

}

@override

public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX,

float distanceY) {

// TODO Auto-generated method stub

return false;

}

@override

public void onShowPress(MotionEvent e) {

// TODO Auto-generated method stub

}

@override

public boolean onSingleTapUp(MotionEvent e) {

// TODO Auto-generated method stub

return false;

}

}

接下来我们编写动画效果的xml文件，你也可以通过代码实现，这里使用xml配置，个人感觉比较简单。

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>

left_out.xml

复制内容到剪贴板

代码:

<?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>

right_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>

right_out.xml

复制内容到剪贴板

代码:

<?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>

以上就是完整的代码，看起来很简单吧。

看下面的效果图吧，秋天到了，图片也选择的有秋意点儿哈。

附上源代码：http://down.51cto.com/data/579206