在很多应用程序第一次启动的时候,会通过几个滑动页面来对该应用程序进行简要地介绍,本文通过ViewFlipper来实现展示效果。
public class ViewFlipperActivity extends Activity implements OnGestureListener{
/**
* 使用ViewFlipper实现左右滑动效果
*/
private ViewFlipper mFlipper;
private GestureDetector mDetector;
private String TAG = "ViewFlipperActivity";
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_viewflipper);
/**
* 添加滑动图片
*/
mFlipper = (ViewFlipper) this.findViewById(R.id.flipper);
mFlipper.addView(addImage(R.drawable.guide_1), 0);
mFlipper.addView(addImage(R.drawable.guide_2), 1);
mFlipper.addView(addImage(R.drawable.guide_3), 2);
mFlipper.addView(addImage(R.drawable.guide_4), 3);
/**
* 创建一个手势监听器
*/
mDetector = new GestureDetector(this);
}
private View addImage(int id){
ImageView imageView = new ImageView(ViewFlipperActivity.this);
imageView.setImageResource(id);
imageView.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT));
return imageView;
}
@Override
public boolean onDown(MotionEvent arg0) {
// TODO Auto-generated method stub
return false;
}
@Override
public boolean onFling(MotionEvent arg0, MotionEvent arg1, float arg2,
float arg3) {
/**
* 滑动显示图片
*/
if (arg0.getX() - arg1.getX() > 10) {
mFlipper.setInAnimation(AnimationUtils.loadAnimation(this, R.anim.push_left_in));
mFlipper.setOutAnimation(AnimationUtils.loadAnimation(this, R.anim.push_left_out));
mFlipper.showNext();
return true;
} else if (arg0.getX() - arg1.getX() < -10) {
mFlipper.setInAnimation(AnimationUtils.loadAnimation(this, R.anim.push_right_in));
mFlipper.setOutAnimation(AnimationUtils.loadAnimation(this, R.anim.push_right_out));
mFlipper.showPrevious();
return true;
}
// TODO Auto-generated method stub
return false;
}
@Override
public void onLongPress(MotionEvent arg0) {
// TODO Auto-generated method stub
}
@Override
public boolean onScroll(MotionEvent arg0, MotionEvent arg1, float arg2,
float arg3) {
// TODO Auto-generated method stub
return false;
}
@Override
public boolean onTouchEvent(MotionEvent event) {
/**
* 将触摸事件发送到手势监听器中
*/
return mDetector.onTouchEvent(event);
}
@Override
public void onShowPress(MotionEvent arg0) {
// TODO Auto-generated method stub
}
@Override
public boolean onSingleTapUp(MotionEvent arg0) {
// TODO Auto-generated method stub
return false;
}
}
实现相当简单,就是将几张图片添加到ViewFlipper中,使用ViewFlipper来实现页面切换效果。在页面切换过程中,使用了动画来实现平滑过渡效果,分别定义了4个动画,分别为:
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>