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

Android仿京东快报无限轮播效果

程序员文章站 2022-10-13 09:51:46
我们常用的京东有一个非常好看的效果: 首页的京东快播有一个无限轮播的公告栏,先看效果: 公告内容大概每3s从中间向上滑出,同时下一条内容从底部向上滑动进入。整个过...

我们常用的京东有一个非常好看的效果:
首页的京东快播有一个无限轮播的公告栏,先看效果:

Android仿京东快报无限轮播效果

公告内容大概每3s从中间向上滑出,同时下一条内容从底部向上滑动进入。整个过程还伴随有内容的渐变消失,动画效果很流畅。

采用viewflipper来实现更为简单。
看看viewflipper类官方注释:

simple {@link 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动画的切换,在一个时间点只有一个child展示出来。并且可以自动的在每隔一个时间段切换到一个child。
要实现京东快报的切换效果,我们只需要将需要根据轮播的公告内容设置到textview并添加到viewflipper,同时设置他们之间的切换动画就可以了。

为了方便在项目中直接重复使用,我们可以将其自定义为一个继承自viewflipper的控件noticeview。

public class noticeview extends viewflipper implements view.onclicklistener {
  private context mcontext;
  private list<string> mnotices;
  private onnoticeclicklistener monnoticeclicklistener;

  public noticeview(context context) {
    super(context);
  }

  public noticeview(context context, attributeset attrs) {
    super(context, attrs);
    init(context);
  }

  private void init(context context) {
    mcontext = context;
    // 轮播间隔时间为3s
    setflipinterval(3000);
    // 内边距5dp
    setpadding(dp2px(5f), dp2px(5f), dp2px(5f), dp2px(5f));
    // 设置enter和leave动画
    setinanimation(animationutils.loadanimation(mcontext, r.anim.notice_in));
    setoutanimation(animationutils.loadanimation(mcontext, r.anim.notice_out));
  }

  /**
   * 添加需要轮播展示的公告
   *
   * @param notices
   */
  public void addnotice(list<string> notices) {
    mnotices = notices;
    removeallviews();
    for (int i = 0; i < mnotices.size(); i++) {
      // 根据公告内容构建一个textview
      string notice = notices.get(i);
      textview textview = new textview(mcontext);
      textview.setsingleline();
      textview.settext(notice);
      textview.settextsize(20f);
      textview.setellipsize(textutils.truncateat.end);
      textview.settextcolor(color.parsecolor("#666666"));
      textview.setgravity(gravity.center_vertical|gravity.center_horizontal);
      // 将公告的位置设置为textview的tag方便点击是回调给用户
      textview.settag(i);
      textview.setonclicklistener(this);
      // 添加到viewflipper
      noticeview.this.addview(textview, new layoutparams(layoutparams.match_parent, layoutparams.match_parent));
    }
  }


  @override
  public void onclick(view v) {
    int position = (int) v.gettag();
    string notice = (string) mnotices.get(position);
    if (monnoticeclicklistener != null) {
      monnoticeclicklistener.onnotieclick(position, notice);
    }
  }

  /**
   * 通知点击监听接口
   */
  public interface onnoticeclicklistener {
    void onnotieclick(int position, string notice);
  }

  /**
   * 设置通知点击监听器
   *
   * @param onnoticeclicklistener 通知点击监听器
   */
  public void setonnoticeclicklistener(onnoticeclicklistener onnoticeclicklistener) {
    monnoticeclicklistener = onnoticeclicklistener;
  }

  private int dp2px(float dpvalue) {
    return (int) typedvalue.applydimension(typedvalue.complex_unit_dip,
        dpvalue,
        mcontext.getresources().getdisplaymetrics());
  }
}

布局文件

<?xml version="1.0" encoding="utf-8"?>
<linearlayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:layout_marginbottom="20sp"
  android:layout_marginleft="15sp"
  android:layout_marginright="15sp"
  android:layout_margintop="20sp"
  android:background="@drawable/jingdong_news_bgcolor"
  android:orientation="horizontal"
  android:paddingleft="15sp"
  android:paddingright="15sp">

  <imageview
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/jd_news_tit" />

  <com.project.jingdong.customview.noticeview
    android:id="@+id/notice_view"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_gravity="center_horizontal|center_vertical"
    android:layout_weight="1"></com.project.jingdong.customview.noticeview>

  <textview
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="center_horizontal|center_vertical"
    android:text=" | 更多 "
    android:textsize="22sp" />
</linearlayout>

布局的样式

<?xml version="1.0" encoding="utf-8"?><!-- 定义圆角矩形 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
  android:padding="10dp"
  android:shape="rectangle">
  <!-- 填充颜色 -->
  <solid android:color="#ffffff" />
  <!-- 圆角 -->
  <corners
    android:bottomleftradius="16dp"
    android:bottomrightradius="16dp"
    android:topleftradius="16dp"
    android:toprightradius="16dp" />
  <!-- 边框颜色 -->
  <stroke
    android:width="1dip"
    android:color="#ffffff" />
</shape>

公告内容进入动画notice_in.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
  <!--平移-->
  <translate
    android:duration="@android:integer/config_mediumanimtime"
    android:fromydelta="50%p"
    android:toydelta="0"/>
  <!--渐变-->
  <alpha
    android:duration="@android:integer/config_mediumanimtime"
    android:fromalpha="0.0"
    android:toalpha="1.0"/>
</set>

公告内容滑出动画notice_out.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
  <!--平移-->
  <translate
    android:duration="@android:integer/config_mediumanimtime"
    android:fromydelta="0"
    android:toydelta="-50%p"/>
  <!--渐变-->
  <alpha
    android:duration="@android:integer/config_mediumanimtime"
    android:fromalpha="1.0"
    android:toalpha="0.0"/>
</set>

在activity或者fragment中直接使用就可以了

 //定义成为一个方法,直接调用就行了
 private void init() {
    noticeview noticeview = (noticeview) getactivity().findviewbyid(r.id.notice_view);
    list<string> notices = new arraylist<>();
    notices.add("大促销下单拆福袋,亿万新年红包随便拿");
    notices.add("家电五折团,抢十亿无门槛现金红包");
    notices.add("星球大战剃须刀首发送200元代金券");
    noticeview.addnotice(notices);
    noticeview.startflipping();
  }

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