我们常用的京东有一个非常好看的效果:
首页的京东快播有一个无限轮播的公告栏，先看效果：
公告内容大概每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
布局文件
<&＃63;xml version="1.0" encoding="utf-8"&＃63;>
布局的样式
<&＃63;xml version="1.0" encoding="utf-8"&＃63;>
公告内容进入动画notice_in.xml
<&＃63;xml version="1.0" encoding="utf-8"&＃63;>
公告内容滑出动画notice_out.xml
<&＃63;xml version="1.0" encoding="utf-8"&＃63;>
在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();
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有 