本示例演示在android中实现图片左右滑动效果。
关于滑动效果,在android中用得比较多,本示例实现的滑动效果是使用viewflipper来实现的,当然也可以使用其它的view来实现。接下来就让我们开始实现这种效果。为了方便大家理解,我们先来看一下效果图:
主要效果图如下图:
接下来我们看一下程序结构图:
mainactivity文件中代码:
复制代码 代码如下:
package com.android.flip;
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.animation.animationutils;
import android.widget.imageview;
import android.widget.viewflipper;
/**
* android实现左右滑动效果
* @description: android实现左右滑动效果
* @file: mainactivity.java
* @package com.android.flip
* @author hanyonglu
* @date 2012-02-12 上午10:44:04
* @version v1.0
*/
public class mainactivity extends activity implements ongesturelistener {
private viewflipper flipper;
private gesturedetector detector;
/** called when the activity is first created. */
@override
public void oncreate(bundle savedinstancestate) {
super.oncreate(savedinstancestate);
setcontentview(r.layout.main);
detector = new gesturedetector(this);
flipper = (viewflipper) this.findviewbyid(r.id.viewflipper1);
flipper.addview(addimageview(r.drawable.one));
flipper.addview(addimageview(r.drawable.two));
flipper.addview(addimageview(r.drawable.three));
flipper.addview(addimageview(r.drawable.four));
flipper.addview(addimageview(r.drawable.five));
}
private view addimageview(int id) {
imageview iv = new imageview(this);
iv.setimageresource(id);
return iv;
}
@override
public boolean ontouchevent(motionevent event) {
// todo auto-generated method stub
return this.detector.ontouchevent(event);
}
@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) {
if (e1.getx() - e2.getx() > 120) {
this.flipper.setinanimation(animationutils.loadanimation(this, r.anim.push_left_in));
this.flipper.setoutanimation(animationutils.loadanimation(this, r.anim.push_left_out));
this.flipper.shownext();
return true;
} else if (e1.getx() - e2.getx() < -120) {
this.flipper.setinanimation(animationutils.loadanimation(this, r.anim.push_right_in));
this.flipper.setoutanimation(animationutils.loadanimation(this, r.anim.push_right_out));
this.flipper.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;
}
}
布局界面相对比较简单,我们只需要加入viewflipper就可以,代码如下:
复制代码 代码如下:
<?xml version="1.0" encoding="utf-8"?>
<linearlayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<viewflipper android:id="@+id/viewflipper1"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
</viewflipper>
</linearlayout>
为了使其滑动时有一定的特效,我们需要加入animation效果,说到animation,我们先看下如何在android中实现自定义animation。自定义的animation是以xml格式定义的,定义好的xml文件存放在res/anim中。
一般的animation有以下四种类型:
1. alpha:渐变透明度动画效果
2. scale:渐变尺寸伸缩动画效果
3. translate:画面转换位置移动动画效果
4. rotate:画面转换位置移动动画效果
push_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="500" />
<alpha android:fromalpha="0.1" android:toalpha="1.0"
android:duration="500" />
</set>
push_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="500" />
<alpha android:fromalpha="1.0" android:toalpha="0.1"
android:duration="500" />
</set>
push_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="500" />
<alpha android:fromalpha="0.1" android:toalpha="1.0"
android:duration="500" />
</set>
push_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="500" />
<alpha android:fromalpha="1.0" android:toalpha="0.1"
android:duration="500" />
</set>