Android仿京东快报无限轮播效果
程序员文章站
2022-10-13 09:51:46
我们常用的京东有一个非常好看的效果:
首页的京东快播有一个无限轮播的公告栏,先看效果:
公告内容大概每3s从中间向上滑出,同时下一条内容从底部向上滑动进入。整个过...
我们常用的京东有一个非常好看的效果:
首页的京东快播有一个无限轮播的公告栏,先看效果:
公告内容大概每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(); }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。