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);    }@Overridepublic 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;}}@Overridepublic 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);}@Overridepublic void showNext() {super.showNext();if(onViewChange!=null){onViewChange.onChange(getDisplayedChild());}}@Overridepublic 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() {@Overridepublic 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);    }@Overridepublic 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;}}@Overridepublic 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;}}}

改造之后的效果图如下：

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

更多相关文章

随机推荐