本示例是用ViewFliper实现屏幕切换图片的效果,手指滑动就实现图片的切换,主要实现效果如下:
程序结构图:
ViewFliper中的代码
package com.scnu.mc.myviewfliper;
import android.app.Activity;
import android.os.Bundle;
import android.view.MotionEvent;
import android.widget.ViewFlipper;
public class ViewFliper extends Activity {
ViewFlipper viewFlipper = null;
float startX;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
init();
}
private void init() {
viewFlipper = (ViewFlipper) this.findViewById(R.id.viewFlipper);
}
@Override
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
startX = event.getX();
break;
case MotionEvent.ACTION_UP:
if (event.getX() > startX) { // 向右滑动
viewFlipper.setInAnimation(this, R.anim.in_left2right);
viewFlipper.setOutAnimation(this, R.anim.out_left2right);
viewFlipper.showNext();
} else if (event.getX() < startX) { // 向左滑动
viewFlipper.setInAnimation(this, R.anim.in_right2left);
viewFlipper.setOutAnimation(this, R.anim.out_right2left);
viewFlipper.showPrevious();
}
break;
}
return super.onTouchEvent(event);
}
}
main.xml代码
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent" android:layout_height="fill_parent"
android:orientation="vertical">
<ViewFlipper android:id="@+id/viewFlipper"
android:layout_width="fill_parent" android:layout_height="fill_parent">
<!-- 第一个页面 -->
<LinearLayout android:layout_width="fill_parent"
android:layout_height="fill_parent" android:gravity="center">
<ImageView android:layout_width="wrap_content"
android:layout_height="wrap_content" android:src="@drawable/a1" />
</LinearLayout>
<!-- 第二个页面 -->
<LinearLayout android:layout_width="fill_parent"
android:layout_height="fill_parent" android:gravity="center">
<ImageView android:layout_width="wrap_content"
android:layout_height="wrap_content" android:src="@drawable/a2"
android:gravity="center" />
</LinearLayout>
<!-- 第三个页面 -->
<LinearLayout android:layout_width="fill_parent"
android:layout_height="fill_parent" android:gravity="center">
<ImageView android:layout_width="wrap_content"
android:layout_height="wrap_content" android:src="@drawable/a3"
android:gravity="center" />
</LinearLayout>
<!-- 第四个页面 -->
<LinearLayout android:layout_width="fill_parent"
android:layout_height="fill_parent" android:gravity="center">
<ImageView android:layout_width="wrap_content"
android:layout_height="wrap_content" android:src="@drawable/a4"
android:gravity="center" />
</LinearLayout>
</ViewFlipper>
</LinearLayout>
4个动画效果的xml文件
in_left2right----从左到右进入屏幕
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
<translate
android:duration="30"
android:fromXDelta="-100%p"
android:toXDelta="0" />
</set>
in_right2left----从右至左进入屏幕
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
<translate
android:duration="30"
android:fromXDelta="100%p"
android:toXDelta="0" />
</set>
out_left2right----从左到右退出屏幕
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
<translate
android:duration="30"
android:fromXDelta="0"
android:toXDelta="100%p" />
</set>
out_right2left----从右至左退出屏幕
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
<translate
android:duration="30"
android:fromXDelta="0"
android:toXDelta="-100%p" />
</set>
注:fromXDelta和toXDelta代表控件相对应parent的偏移距离,个人理解是"100%p"代表控件向右跑到屏幕的外面,"-100%p"代表控件向左跑到屏幕的外部。下面附上个人理解的图。