使用ViewFlipper实现图片轮播

转载请注明出处，点击此处 查看更多精彩内容。

ViewFlipper和AdapterViewFlipper有较大的相似性，它们可以控制组件切换的动画效果。它们的区别是：ViewFlipper需要通过addView(View v)方法或者在布局文件中添加多个View，而AdapterViewFlipper只需要传入一个Adapter，Adapter将会负责提供多个View。 ViewFlipper不能手动滚动。

不多说，上代码

主布局：activity_main.xml

<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/vf_banner"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true" >
        <ImageView
            android:layout_width="match_parent"
            android:layout_height="300dp"
            android:src="#ff0000" />
        <ImageView
            android:layout_width="match_parent"
            android:layout_height="300dp"
            android:src="#00ff00" />
        <ImageView
            android:layout_width="match_parent"
            android:layout_height="300dp"
            android:src="#0000ff" />
    </ViewFlipper>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_below="@id/vf_banner"
        android:layout_marginTop="20dp" >
        <Button
            android:id="@+id/btn_prev"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="上一个"
            android:textSize="14sp" />
        <Button
            android:id="@+id/btn_auto"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="自动播放"
            android:textSize="14sp" />
        <Button
            android:id="@+id/btn_stop"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="停止播放"
            android:textSize="14sp" />
        <Button
            android:id="@+id/btn_next"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="下一个"
            android:textSize="14sp" />
    </LinearLayout>
</RelativeLayout>  

图片切换时的各种动画：

• 从左边进入的动画：push_left_in.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
    <translate
        android:duration="500"
        android:fromXDelta="-100%p"
        android:toXDelta="0" />
</set>  

• 从左边退出的动画：push_left_out.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
    <translate
        android:duration="500"
        android:fromXDelta="0"
        android:toXDelta="-100%p" />
</set>  

• 从右边进入的动画：push_right_in.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
    <translate
        android:duration="500"
        android:fromXDelta="100%p"
        android:toXDelta="0" />
</set>  

• 从右边退出的动画：push_right_out.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
    <translate
        android:duration="500"
        android:fromXDelta="0"
        android:toXDelta="100%p" />
</set>  

主Activity：MainActivity.java

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.ViewFlipper;

public class MainActivity extends Activity implements OnClickListener {

	private ViewFlipper vf_banner = null;
	private Button btn_prev = null;
	private Button btn_next = null;
	private Button btn_auto = null;
	private Button btn_stop = null;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);

		vf_banner = (ViewFlipper) findViewById(R.id.vf_banner);
		btn_prev = (Button) findViewById(R.id.btn_prev);
		btn_next = (Button) findViewById(R.id.btn_next);
		btn_auto = (Button) findViewById(R.id.btn_auto);
		btn_stop = (Button) findViewById(R.id.btn_stop);

		btn_prev.setOnClickListener(this);
		btn_next.setOnClickListener(this);
		btn_auto.setOnClickListener(this);
		btn_stop.setOnClickListener(this);
		
		vf_banner.setFlipInterval(3000); // 设置自动播放的时间间隔
		
	}

	@Override
	public void onClick(View v) {
		switch (v.getId()) {
		case R.id.btn_prev:
			vf_banner.setInAnimation(this, R.anim.push_right_in);
			vf_banner.setOutAnimation(this, R.anim.push_left_out);
			// 显示上一个View
			vf_banner.showPrevious();
			break;
			
		case R.id.btn_next:
			vf_banner.setInAnimation(this, R.anim.push_left_in);
			vf_banner.setOutAnimation(this, R.anim.push_right_out);
			// 显示下一个View
			vf_banner.showNext();
			break;
			
		case R.id.btn_auto:
			vf_banner.setInAnimation(this, R.anim.push_left_in);
			vf_banner.setOutAnimation(this, R.anim.push_right_out);
			// 自动播放
			vf_banner.startFlipping();
			break;
			
		case R.id.btn_stop:
			// 停止播放
			vf_banner.stopFlipping();
			break;

		default:
			break;
		}
	}

}