京东快报轮播公告的实现
手机京东app首页的京东快报有一个无限轮播的公告栏,先看效果:
公告内容大概每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。
/*** Created by xjj on 2017/1/14.* 轮播公告Veiw*/
public class NoticeView extends ViewFlipper implements View.OnClickListener {private Context mContext;private List<String> mNotices;public NoticeView(Context context) {super(context);}public NoticeView(Context context, AttributeSet attrs) {super(context, attrs);init(context);}private void init(Context context) {mContext = context;// 轮播间隔时间为3ssetFlipInterval(3000);// 内边距5dpsetPadding(dp2px(5f), dp2px(5f), dp2px(5f), dp2px(5f));// 设置enter和leave动画setInAnimation(AnimationUtils.loadAnimation(mContext, R.anim.notify_in));setOutAnimation(AnimationUtils.loadAnimation(mContext, R.anim.notify_out));}/*** 添加需要轮播展示的公告** @param notices*/public void addNotice(List<String> notices) {mNotices = notices;removeAllViews();for (int i = 0; i < mNotices.size(); i++) {// 根据公告内容构建一个TextViewString notice = notices.get(i);TextView textView = new TextView(mContext);textView.setSingleLine();textView.setText(notice);textView.setTextSize(13f);textView.setEllipsize(TextUtils.TruncateAt.END);textView.setTextColor(Color.parseColor("#666666"));textView.setGravity(Gravity.CENTER_VERTICAL);// 将公告的位置设置为textView的tag方便点击是回调给用户textView.setTag(i);textView.setOnClickListener(this);// 添加到ViewFlipperNoticeView.this.addView(textView, new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT));}}@Overridepublic void onClick(View v) {int position = (int) v.getTag();String notice = (String) mNotices.get(i);if (mOnNoticeClickListener != null) {mOnNoticeClickListener.onNotieClick(position, notice);}}/*** 通知点击监听接口*/public interface OnNoticeClickListener {void onNotieClick(int position, String notice);}private OnNoticeClickListener mOnNoticeClickListener;/*** 设置通知点击监听器** @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
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"><!--平移--><translateandroid:duration="@android:integer/config_mediumAnimTime"android:fromYDelta="50%p"android:toYDelta="0"/><!--渐变--><alphaandroid: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"><!--平移--><translateandroid:duration="@android:integer/config_mediumAnimTime"android:fromYDelta="0"android:toYDelta="-50%p"/><!--渐变--><alphaandroid:duration="@android:integer/config_mediumAnimTime"android:fromAlpha="1.0"android:toAlpha="0.0"/>
</set>
在Activity中使用
private void init() {NoticeView noticeView = (NoticeView) findViewById(R.id.notice_view);List<String> notices = new ArrayList<>();notices.add("大促销下单拆福袋,亿万新年红包随便拿");notices.add("家电五折团,抢十亿无门槛现金红包");notices.add("星球大战剃须刀首发送200元代金券");noticeView.addNotice(notices);noticeView.startFlipping();
}
最终效果(布局代码就不贴了,比较简单)
源码:https://github.com/xiaoyanger0825/NoticeView
京东快报轮播公告的实现相关推荐
- Bootstrap练习:京东商城轮播图
练习:京东商城的一个轮播图效果,可以自动切换图片和点击切换图片,主要运用了Bootstrap的Carousel插件与js插件等知识内容,练习源文件下面有下载链接. 目录 前言 一.练习 1.目标图: ...
- JS简单实现京东网页轮播图
需要html,css,js, 源代码 HTML <div class="box"> <!-- 左右两个点击按钮 --> <a href="j ...
- android京东首页轮播代码,仿京东商品详情轮播图
好久没有更新啦,今天来搞一个京东的轮播:直接上效果 8月-16-2016 09-38-10.gif 8月-16-2016 09-37-17.gif 如果想真实体验可以去京东APP体验一下. 描述一下效 ...
- Jquery实现轮播图效果(fadeIn()和fadeOut()方法的应用)
2019独角兽企业重金招聘Python工程师标准>>> 1.jquery.js从官网上下载最新的,使用外链导入到html中, 下载地址: http://jquery.com/down ...
- 仿京东首页(MVP+轮播+跑马灯+秒杀+GridView+宫格展示)
添加依赖 apply plugin: 'com.android.application'android {compileSdkVersion 27defaultConfig {applicationI ...
- 首页广告(轮播图+京东秒杀+最底部的为你推荐)
首先在Api中添加URL接口 String AD_URL="https://www.zhaoapi.cn/ad/getAd"; bean包中解析接口数据 import java.u ...
- 安卓首页图片轮播效果(淘宝、京东首页广告效果)
2019独角兽企业重金招聘Python工程师标准>>> 直奔主题: 1.主要原理就是利用定时任务器定时切换ViewPager的页面. 2.里面用了一个读取网络图片的插件,做客户端使用 ...
- php 电梯程序设计,教你写出京东电梯式轮播
效果知识点:企业布局技巧,如何高效的编写CSS样式,常用选择器,基本标签,盒子模型,jquery类库调用,JS特效编写,JS编程思维等. 京东电梯式轮播源码: Document *{margin:0p ...
- 模仿东京首页banner轮播,京东新闻上下滚动动画实现(动画实现)
接着上篇 微信小程序-阅读小程序demo写:http://www.cnblogs.com/muyixiaoguang/p/5917986.html 首页banner动画实现 京东新闻上下动画实现 想着 ...
最新文章
- Spring Boot+Gradle+ MyBatisPlus3.x搭建企业级的后台分离框架
- kali Linux 屏幕旋转,MSF基础命令新手指南
- 【数字信号处理】傅里叶变换性质 ( 序列傅里叶变换共轭对称性质 | 序列实偶 傅里叶变换 实偶 | 序列实奇 傅里叶变换 虚奇 | 证明 “ 序列实奇 傅里叶变换 虚奇 “ )
- IOS之学习笔记九(对象的初始化)
- Android之ActivityManager与Proxy模式的运用
- 一行代码 实现集合去重
- 罗小黑用flash做的_中影星美好看罗小黑战记正式定档!
- SQL注入:4、数据库可写
- Realm的入门使用
- 吐槽 Twitter 后,马斯克用 30 亿美元入股 Twitter,成为最大股东
- php tr td,php-基于tr计数的Td / th的XPath
- Spring Data Jpa 查询返回自定义对象
- 开发低功耗蓝牙4.0血压计连接与收发数据
- 软件配合实现的“一键开关机电路
- Bmob 萌新也能简易上手 之一 注册登录- *2020版 (有demo)
- 大唐长安人杜环在两河流域, 耶路撒冷和北非的行程
- java泛型 方法返回值带有泛型 <T>
- java点击按钮发出声音_java – 按下按钮时播放声音-android
- 中国古代十大名曲背后的掌故(转载)
- 一般web放在linux那个目录下,【linux】linux 大家一般把web目录放在哪个分区下面呢?放在/data目录下面安全吗?...