您的位置:首页 > 移动开发 > Android开发

Android仿京东快报无限轮播效果

2019-06-15 16:31 1801 查看

我们常用的京东有一个非常好看的效果:
首页的京东快播有一个无限轮播的公告栏,先看效果:

公告内容大概每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();
}

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

您可能感兴趣的文章:

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息