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 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 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());
  }
}

布局文件

布局的样式

公告内容进入动画notice_in.xml

公告内容滑出动画notice_out.xml

在Activity或者Fragment中直接使用就可以了

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

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