Android仿淘宝头条向上滚动广告条ViewFlipper
所谓前人栽树,后人乘凉,在此感谢博主的贡献。
参考博文:
欢迎关注我的微信公众号
不只是原创技术文章,更多的是对生活的思考总结
我在博主的基础上做了如下工作:
- 修复了滚动条第二条点击事件无法触发这个bug;
- 充分简化了自定义viewflipper类的代码;
- 添加了直接使用viewflipper控件实现同样效果;
先上效果图:
这里使用了一个比较少用的控件:viewflipper
学习一个未知的东西,第一步就是要搞懂what:学的这个东西是什么以及能够实现什么效果!第二步就是要搞懂how:这个东西如何使用。
what:
该控件的官方介绍:
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.
鄙人的翻译:
简单viewanimator实现器将已添加到其两个或多个视图之间实现动画效果。 一次只显示一个孩子(子视图)。
如果需要,可以在每个孩子(子视图)之间定期自动翻转。
how:
实现方式:
1.继承viewflipper类通过代码设置动画间隔时间以及动画效果
1.1自定义viewflipper
/** * created by veyron on 2017/2/20. * function:自定义viewflipper控件 */ public class upview extends viewflipper { private context mcontext; private boolean issetanimduration = false; private int interval = 2000; /** * 动画时间 */ private int animduration = 500; public upview(context context, attributeset attrs) { super(context, attrs); init(context, attrs, 0); } private void init(context context, attributeset attrs, int defstyleattr) { this.mcontext = context; setflipinterval(interval);//设置时间间隔2000毫秒 //进来的动画 animation animin = animationutils.loadanimation(mcontext, r.anim.anim_in); if (issetanimduration) animin.setduration(animduration); setinanimation(animin); //退出的动画 animation animout = animationutils.loadanimation(mcontext, r.anim.anim_out); if (issetanimduration) animout.setduration(animduration); setoutanimation(animout); } /** * 设置循环滚动的view数组 * * @param views */ public void setviews(final list<view> views) { if (views == null || views.size() == 0) return; removeallviews(); for ( int i = 0; i < views.size(); i++) { final int position=i; //设置翻滚的子view addview(views.get(i)); } startflipping(); //开启翻滚 } }
1.2布局文件中引入
<com.veyron.www.viewflipperdemo.view.upview android:id="@+id/upview1" android:layout_marginleft="20dp" android:layout_width="match_parent" android:layout_torightof="@+id/tbtv" android:layout_centervertical="true" android:layout_margintop="10dp" android:layout_height="match_parent"> </com.veyron.www.viewflipperdemo.view.upview>
2.除了方式一,还可以在布局文件中通过设定viewflipper的属性来达到同样的效果。
<viewflipper android:id="@+id/upview2" android:autostart="true" android:background="#fff" android:inanimation="@anim/anim_in" android:outanimation="@anim/anim_out" android:flipinterval="3000"> </viewflipper>
具体实现上面两种方式
mainactivity.java
/** * created by veyron on 2017/2/20. * function:主界面,加载布局 */ public class mainactivity extends appcompatactivity { private upview upview1; //自定义的viewflipper private viewflipper mviewflipper; //直接使用该控件 list<string> data = new arraylist<>(); //文字数据集合 list<view> views = new arraylist<>(); //滚动的view集合 @override protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_main); initdata(); initview(); } private void initview() { //自定义的 upview1 = (upview) findviewbyid(r.id.upview1); setview(); upview1.setviews(views);//给自定义的viewflipper设置滚动的view //非自定义的,直接使用控件的 mviewflipper = (viewflipper) findviewbyid(r.id.upview2); //添加翻滚的子view mviewflipper.addview(view.inflate(this, r.layout.view1, null)); mviewflipper.addview(view.inflate(this, r.layout.view2, null)); } /** * 初始化需要循环的view * 为了灵活的使用滚动的view,所以把滚动的内容让用户自定义 * 假如滚动的是三条或者一条,或者是其他,只需要把对应的布局,和这个方法稍微改改就可以了, */ private void setview() { for (int i = 0; i < data.size(); i = i + 2) { final int position = i; //设置滚动的单个布局 linearlayout moreview = (linearlayout) layoutinflater.from(this).inflate(r.layout.item_view, null); //初始化布局里面的控件,只要设置这两个控件的监听就达到目的 textview tv1 = (textview) moreview.findviewbyid(r.id.tv1); textview tv2 = (textview) moreview.findviewbyid(r.id.tv2); /** * 设置监听 */ moreview.findviewbyid(r.id.rl).setonclicklistener(new view.onclicklistener() { @override public void onclick(view view) { toast.maketext(mainactivity.this, data.get(position).tostring(), toast.length_short).show(); log.d("tag",data.get(position).tostring()); /** * 添加业务代码 */ } }); /** * 设置监听 */ moreview.findviewbyid(r.id.rl2).setonclicklistener(new view.onclicklistener() { @override public void onclick(view view) { toast.maketext(mainactivity.this, data.get(position+1).tostring(), toast.length_short).show(); log.d("tag",data.get(position+1).tostring()); /** * 添加业务代码 */ } }); //进行对控件赋值 tv1.settext(data.get(i).tostring()); if (data.size() > i + 1) { //因为淘宝那儿是两条数据,但是当数据是奇数时就不需要赋值第二个,所以加了一个判断,还应该把第二个布局给隐藏掉 tv2.settext(data.get(i + 1).tostring()); } else { moreview.findviewbyid(r.id.rl2).setvisibility(view.gone); } //添加到循环滚动数组里面去 views.add(moreview); //也就是滚动的view集合 } } /** * 初始化数据 */ private void initdata() { data = new arraylist<>(); data.add("美剧《行尸走肉》上线steam 每一集售价2.99..."); data.add("2017四月新番动画全预览!你期待那部"); data.add("生娃后,老公有过这些举动,你却没加错人!"); data.add("汽车开空调耗油?只因为按错了一个键"); data.add("心疼s7 edge 三星官方‘虐机'视频上线"); } }
api介绍
常用属性:
- autostart:ture,则自动开始滚动
- inanimation:滚动进入的动画
- outanimation:滚动出去的动画
- flipinterval:时间间隔
常用方法:
- startflipping():开始翻滚
- setoutanimation():滚动出去的动画
- setinanimation():滚动进入的动画
- setflipinterval():设置时间间隔-毫秒
- viewflipper对象的addview():加载需要滚动的视图对象
viewflipper具体属性详见:viewflipper控件的官方api
源码:
如果该你喜欢该项目,欢迎fork,欢迎点个star!!
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
下一篇: Android自定义边缘凹凸的卡劵效果