欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

Android仿淘宝头条向上滚动广告条ViewFlipper

程序员文章站 2023-12-02 22:11:52
所谓前人栽树,后人乘凉,在此感谢博主的贡献。 参考博文: 仿淘宝首页的淘宝头条view垂直滚动 欢迎关注我的微信公众号 不只是原创技术文章,更多的是对...

所谓前人栽树,后人乘凉,在此感谢博主的贡献。
参考博文:

仿淘宝首页的淘宝头条view垂直滚动

欢迎关注我的微信公众号

不只是原创技术文章,更多的是对生活的思考总结

Android仿淘宝头条向上滚动广告条ViewFlipper

我在博主的基础上做了如下工作:

  • 修复了滚动条第二条点击事件无法触发这个bug;
  • 充分简化了自定义viewflipper类的代码;
  • 添加了直接使用viewflipper控件实现同样效果;

先上效果图:

Android仿淘宝头条向上滚动广告条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

源码:

viewflipperdemo

如果该你喜欢该项目,欢迎fork,欢迎点个star!!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。