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(); }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
Android中fragment+viewpager实现布局
这篇文章主要为大家详细介绍了Android中fragment+viewpager实现布局效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2017-10-10Android 触摸事件监听(Activity层,ViewGroup层,View层)详细介绍
这篇文章主要介绍了Android 触摸事件监听(Activity层,ViewGroup层,View层)详细介绍的相关资料,需要的朋友可以参考下2016-12-12Android中ViewPager的PagerTabStrip与PagerTitleStrip用法实例
这篇文章主要介绍了Android中ViewPager的PagerTabStrip与PagerTitleStrip用法实例,这两个子控件一般被用作添加标题,在实际效果上并不是那么好控制,使用的时候需要谨慎,需要的朋友可以参考下2016-06-06SimpleCommand框架ImageLoader API详解(三)
这篇文章主要为大家详细介绍了SimpleCommand框架ImageLoader API,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2017-10-10Android检测手机中存储卡及剩余空间大小的方法(基于Environment,StatFs及DecimalFormat
这篇文章主要介绍了Android检测手机中存储卡及剩余空间大小的方法,基于Environment,StatFs及DecimalFormat实现该功能,具有一定参考借鉴价值,需要的朋友可以参考下2016-01-01
最新评论