android API Demo之使用ViewFlipper制作轮播广告

ViewFlipper官网的介绍：Simple ViewAnimator that will animate between two or more views that have been added to it. Only one child is shown at a time. If requested, can automatically flip between each child at a regular interval.

大概意思是：ViewFlipper是一个view容器，可以放置两个或者两个以上的view，每次只能显示一个view，但是可以在一定周期下有规律的一个一个的显示view。

       首先，ViewFlipper怎么使用呢？

布局文件：

activity：

public class ViewFlipperActivity extends Activity implements AdapterView.OnItemSelectedListener{
	 private String[] mStrings = {
	            "Push up", "Push left"};

	 private ViewFlipper mFlipper;
	 
	@Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_viewflipper);
        
        mFlipper = ((ViewFlipper) this.findViewById(R.id.flipper));
        mFlipper.startFlipping();
        
        Spinner s = (Spinner) findViewById(R.id.spinner);
        ArrayAdapter adapter = new ArrayAdapter(this,
                android.R.layout.simple_spinner_item, mStrings);
        adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
        s.setAdapter(adapter);
        s.setOnItemSelectedListener(this);
    }
	@Override
	public void onItemSelected(AdapterView parent, View view, int position,
			long id) {
		switch (position) {
		case 0:
			mFlipper.setInAnimation(AnimationUtils.loadAnimation(this, R.anim.push_up_in));
			mFlipper.setOutAnimation(AnimationUtils.loadAnimation(this, R.anim.push_up_out));
			break;
		case 1:
			mFlipper.setInAnimation(AnimationUtils.loadAnimation(this, R.anim.push_left_in));
			mFlipper.setOutAnimation(AnimationUtils.loadAnimation(this, R.anim.push_left_out));
			break;
		default:
			break;
		}
	}

	@Override
	public void onNothingSelected(AdapterView parent) {
		// TODO Auto-generated method stub
		
	}
	
}

动画文件：

push_up_in.xml

push_up_out.xml

push_left_in.xml

push_left_out.xml

效果图：

至此，我们是不是还缺点什么，没错，广告板右下角的小图标识。我们把界面的布局文件改一下：

并且重写ViewFlipper,为什么要重写呢？因为，ViewFlipper并没有切换图片的监听接口，我们要在切换图片的时候改变ImageView的背景图片，标识当前是第几个图片

MyViewFlipper.java

public class MyViewFlipper extends ViewFlipper{
	private OnViewChange onViewChange;
	public MyViewFlipper(Context context) {
		super(context);
	}

	public MyViewFlipper(Context context, AttributeSet attrs) {
		super(context, attrs);
	}
	
	@Override
	public void showNext() {
		super.showNext();
		if(onViewChange!=null){
			onViewChange.onChange(getDisplayedChild());
		}
	}
	
	@Override
	public void showPrevious() {
		super.showPrevious();
		if(onViewChange!=null){
			onViewChange.onChange(getDisplayedChild());
		}
	}
	public interface OnViewChange{
		void onChange(int index);
	}
	public OnViewChange getOnViewChange() {
		return onViewChange;
	}

	public void setOnViewChange(OnViewChange onViewChange) {
		this.onViewChange = onViewChange;
	}
}

MyViewFlipper内部声明了一个接口OnViewChange，并重写showNext()和showPrevious()，在这两个方法内调用OnViewChange的onChange()
，传入的参数代表当前显示图片的索引。

activity：

public class ViewFlipperActivity extends Activity implements AdapterView.OnItemSelectedListener{
	 private String[] mStrings = {
	            "Push up", "Push left"};

	 private MyViewFlipper mFlipper;
	 
	 private ImageView img1,img2,img3,img4,img5;
	 
	@Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_viewflipper);
        img1=(ImageView) findViewById(R.id.img1);
        img2=(ImageView) findViewById(R.id.img2);
        img3=(ImageView) findViewById(R.id.img3);
        img4=(ImageView) findViewById(R.id.img4);
        img5=(ImageView) findViewById(R.id.img5);
        mFlipper = ((MyViewFlipper) this.findViewById(R.id.flipper));
        mFlipper.startFlipping();
        mFlipper.setOnViewChange(new OnViewChange() {
			
			@Override
			public void onChange(int index) {
				setIndexView(index);
			}
		});
        Spinner s = (Spinner) findViewById(R.id.spinner);
        ArrayAdapter adapter = new ArrayAdapter(this,
                android.R.layout.simple_spinner_item, mStrings);
        adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
        s.setAdapter(adapter);
        s.setOnItemSelectedListener(this);
    }
	@Override
	public void onItemSelected(AdapterView parent, View view, int position,
			long id) {
		switch (position) {
		case 0:
			mFlipper.setInAnimation(AnimationUtils.loadAnimation(this, R.anim.push_up_in));
			mFlipper.setOutAnimation(AnimationUtils.loadAnimation(this, R.anim.push_up_out));
			break;
		case 1:
			mFlipper.setInAnimation(AnimationUtils.loadAnimation(this, R.anim.push_left_in));
			mFlipper.setOutAnimation(AnimationUtils.loadAnimation(this, R.anim.push_left_out));
			break;
		default:
			break;
		}
	}

	@Override
	public void onNothingSelected(AdapterView parent) {
		// TODO Auto-generated method stub
		
	}
	/**
	 * 
	 * 2014-12-8 下午1:58:36
	 * @param index
	 * @TODO 改变右下角图标的背景
	 */
	private void setIndexView(int index){
		img1.setBackgroundResource(android.R.drawable.presence_invisible);
		img2.setBackgroundResource(android.R.drawable.presence_invisible);
		img3.setBackgroundResource(android.R.drawable.presence_invisible);
		img4.setBackgroundResource(android.R.drawable.presence_invisible);
		img5.setBackgroundResource(android.R.drawable.presence_invisible);
		switch (index) {
		case 0:
			img1.setBackgroundResource(android.R.drawable.presence_online);
			break;
		case 1:
			img2.setBackgroundResource(android.R.drawable.presence_online);
			break;
		case 2:
			img3.setBackgroundResource(android.R.drawable.presence_online);
			break;
		case 3:
			img4.setBackgroundResource(android.R.drawable.presence_online);
			break;
		case 4:
			img5.setBackgroundResource(android.R.drawable.presence_online);
			break;
		default:
			break;
		}
	}
}

改造之后的效果图如下：

这样横竖的广告轮播功能就完成了。