自定义VIEW实现应用内消息提醒上下轮播

开题贴上这张图，相信我不解释今天分享的内容，大家也已经知道了，接下来我就结合代码为大家讲解一下，这个消息自动轮播VIEW的具体实现方式。

需求分析：

1.在ITEM上随着一条消息滑出之后，下一条消息自动滑入。

2.消息轮播可循环

3.ITEM上绑定点击事件，点击对应的ITEM，TOAST相对应的消息内容。

实现分析：

自定义VIEW继承自FrameLayout，利用Animation动画赋予前后两条被轮播的消息ITEM一个执行滑进、另一条执行滑出，然后，利用FrameLayout的bringChildToFront(待播放的VIEW)，循环让被轮播的ITEM位于所有子VIEW之前。

1.准备消息ITEM

Item分析：左边为特定的IMG标签，中间是消息提示的具体内容，右边提示更多箭头。根据分析，Item上，左边Img标签，中间文字内容是可变的，右边箭头不变，抽取Item实体类如下：

MessageEntity：


/*** desc :消息实体* author：xiedong* data：2018/7/20*/
public class MessageEntity {private String message;private int imgRes;public MessageEntity(int imgRes, String message) {this.message = message;this.imgRes = imgRes;}public String getMessage() {return message;}public void setMessage(String message) {this.message = message;}public int getImgRes() {return imgRes;}public void setImgRes(int imgRes) {this.imgRes = imgRes;}
}

2.Item实现：

由于整个Item内容比较单一，我采用TextView实现，左右图标用setCompoundDrawables()实现

 tipView.setCompoundDrawables(loadDrawable(tip.getImgRes()), null, loadDrawable(R.drawable.ic_more), null);

3.准备Item

Item的滑进、滑出动画，当前可被用户看见的消息执行由下往上滑动动画，待滑入的消息执行由下往上滑进动画，滑进后被用户可见后，执行滑出动画，下一条继续执行滑入动画，变成可见消息继续滑出，待下一条滑入........

3.1更新当前的消息并执行动画

    private void updateTipAndPlayAnimation() {if (curTipIndex % 2 == 0) {updateTip(tv_tip_out);tv_tip_in.startAnimation(anim_out);tv_tip_out.startAnimation(anim_in);this.bringChildToFront(tv_tip_in);} else {updateTip(tv_tip_in);tv_tip_out.startAnimation(anim_out);tv_tip_in.startAnimation(anim_in);this.bringChildToFront(tv_tip_out);}}

private void updateTip(TextView tipView) {final MessageEntity tip = getNextTip();tipView.setCompoundDrawables(loadDrawable(tip.getImgRes()), null, loadDrawable(R.drawable.ic_more), null);if (!TextUtils.isEmpty(tip.getMessage())) {tipView.setText(tip.getMessage());tipView.setOnClickListener(new OnClickListener() {@Overridepublic void onClick(View v) {onItemClickListener.onClick(tip.getMessage());}});}}

3.2从集合中取得下一条被轮播的消息

    private MessageEntity getNextTip() {if (isListEmpty(tipList)) return null;return tipList.get(curTipIndex++ % tipList.size());}

3.3动画的具体创建过程

    private Animation newAnimation(float fromYValue, float toYValue) {Animation anim = new TranslateAnimation(Animation.RELATIVE_TO_SELF, 0, Animation.RELATIVE_TO_SELF, 0,Animation.RELATIVE_TO_SELF, fromYValue, Animation.RELATIVE_TO_SELF, toYValue);anim.setDuration(ANIM_DURATION);anim.setStartOffset(ANIM_DELAYED_MILLIONS);anim.setInterpolator(new DecelerateInterpolator());return anim;}

消息轮播VIEW的核心实现思想如上，主要是结合Animation动画配合FrameLayout的特性实现View的滑进滑出效果，上述分析我贴的是部分核心实现代码，下面我把完整的代码贴上，大家可根据具体业务场景自行扩展。

轮播View代码：


/*** desc :自定义view实现上下轮播的view（客户端消息轮播效果）* author：xiedong* data：2018/7/20*/
public class LooperMessageView extends FrameLayout {private List<MessageEntity> tipList;private int curTipIndex = 0;private long lastTimeMillis;private static final int ANIM_DELAYED_MILLIONS = 3 * 1000;/*** 动画持续时长*/private static final int ANIM_DURATION = 1 * 1000;private static final String DEFAULT_TEXT_COLOR = "#2F4F4F";private static final int DEFAULT_TEXT_SIZE = 16;private TextView tv_tip_out, tv_tip_in;private Animation anim_out, anim_in;private OnItemClickListener onItemClickListener;public LooperMessageView(Context context) {this(context, null);}public LooperMessageView(Context context, AttributeSet attrs) {this(context, attrs, 0);}public LooperMessageView(Context context, AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);initTipFrame();initAnimation();}private void initTipFrame() {tv_tip_out = newTextView();tv_tip_in = newTextView();addView(tv_tip_in);addView(tv_tip_out);}private TextView newTextView() {TextView textView = new TextView(getContext());LayoutParams lp = new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT, Gravity.CENTER_VERTICAL);textView.setLayoutParams(lp);textView.setCompoundDrawablePadding(10);textView.setGravity(Gravity.CENTER_VERTICAL);textView.setLines(2);textView.setEllipsize(TextUtils.TruncateAt.END);textView.setTextColor(Color.parseColor(DEFAULT_TEXT_COLOR));textView.setTextSize(TypedValue.COMPLEX_UNIT_SP, DEFAULT_TEXT_SIZE);return textView;}/*** 将资源图片转换为Drawable对象** @param ResId* @return*/private Drawable loadDrawable(int ResId) {Drawable drawable = getResources().getDrawable(ResId);drawable.setBounds(0, 0, drawable.getMinimumWidth() / 4, drawable.getMinimumHeight() / 4);return drawable;}private void initAnimation() {anim_out = newAnimation(0, -1);anim_in = newAnimation(1, 0);anim_in.setAnimationListener(new Animation.AnimationListener() {@Overridepublic void onAnimationStart(Animation animation) {}@Overridepublic void onAnimationRepeat(Animation animation) {}@Overridepublic void onAnimationEnd(Animation animation) {updateTipAndPlayAnimationWithCheck();}});}private Animation newAnimation(float fromYValue, float toYValue) {Animation anim = new TranslateAnimation(Animation.RELATIVE_TO_SELF, 0, Animation.RELATIVE_TO_SELF, 0,Animation.RELATIVE_TO_SELF, fromYValue, Animation.RELATIVE_TO_SELF, toYValue);anim.setDuration(ANIM_DURATION);anim.setStartOffset(ANIM_DELAYED_MILLIONS);anim.setInterpolator(new DecelerateInterpolator());return anim;}private void updateTipAndPlayAnimationWithCheck() {if (System.currentTimeMillis() - lastTimeMillis < 1000) {return;}lastTimeMillis = System.currentTimeMillis();updateTipAndPlayAnimation();}private void updateTipAndPlayAnimation() {if (curTipIndex % 2 == 0) {updateTip(tv_tip_out);tv_tip_in.startAnimation(anim_out);tv_tip_out.startAnimation(anim_in);this.bringChildToFront(tv_tip_in);} else {updateTip(tv_tip_in);tv_tip_out.startAnimation(anim_out);tv_tip_in.startAnimation(anim_in);this.bringChildToFront(tv_tip_out);}}private void updateTip(TextView tipView) {final MessageEntity tip = getNextTip();tipView.setCompoundDrawables(loadDrawable(tip.getImgRes()), null, loadDrawable(R.drawable.ic_more), null);if (!TextUtils.isEmpty(tip.getMessage())) {tipView.setText(tip.getMessage());tipView.setOnClickListener(new OnClickListener() {@Overridepublic void onClick(View v) {onItemClickListener.onClick(tip.getMessage());}});}}/*** 获取下一条消息** @return*/private MessageEntity getNextTip() {if (isListEmpty(tipList)) return null;return tipList.get(curTipIndex++ % tipList.size());}public static boolean isListEmpty(List list) {return list == null || list.isEmpty();}public void setTipList(List<MessageEntity> tipList) {this.tipList = tipList;curTipIndex = 0;updateTip(tv_tip_out);updateTipAndPlayAnimation();}public void setOnItemClickListener(OnItemClickListener onItemClickListener) {this.onItemClickListener = onItemClickListener;}interface OnItemClickListener {void onClick(String message);}
}

在布局中引入：

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"android:background="#e2e2e1"tools:context=".MainActivity"><com.zhuandian.loopermessageview.LooperMessageViewandroid:id="@+id/lmv_news"android:layout_width="match_parent"android:layout_height="80dp"android:padding="10dp"android:layout_marginTop="10px"android:background="#fff" /></android.support.constraint.ConstraintLayout>

在Activity中，绑定被轮播的消息集合：


public class MainActivity extends AppCompatActivity {private LooperMessageView messageView;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);messageView = (LooperMessageView) findViewById(R.id.lmv_news);messageView.setTipList(generateTips());messageView.setOnItemClickListener(new LooperMessageView.OnItemClickListener() {@Overridepublic void onClick(String message) {Toast.makeText(MainActivity.this, "正要跳转到  " + message, Toast.LENGTH_SHORT).show();}});}private List<MessageEntity> generateTips() {List<MessageEntity> tips = new ArrayList<>();tips.add(new MessageEntity(R.drawable.ic_friends, "有小伙伴艾特你了"));tips.add(new MessageEntity(R.drawable.ic_friend_b, "社区里有人给你发私信了"));return tips;}
}

项目源码已上传github，欢迎拍砖。自定义view实现上下轮播的view（客户端消息提醒）

自定义VIEW实现应用内消息提醒上下轮播相关推荐

前端内好用插件轮播图
前端内好用插件&&轮播图文章目录前端内好用插件&&轮播图一.js辅助插件 (1)flexible适配(移动端和pc端兼容) (2)fastclick插件(解决移动 ...
自定义view实现未读消息提示（小红点）
转载:http://blog.csdn.net/qq_28268507/article/details/70314844 自定义view继承RadioButton public class Notif ...
java实现未读消息提醒_Android自定义View之未读消息提示
一个轻量级的仿微信未读消息提示大家好,我是接触安卓不久的小菜鸟,今天花了一晚上封装了一个类似微信未读消息提示的安卓控件.由于技术问题,所以功能不是很强大,没有动画,但是满足基本需求还是可以的.下面是 ...
自定义插件实现网易云音乐首页图片轮播
编写html界面 <!DOCTYPE html> <html><head><meta charset="utf-8" /><t ...
Android自定义View之仿QQ侧滑菜单实现
最近,由于正在做的一个应用中要用到侧滑菜单,所以通过查资料看视频,学习了一下自定义View,实现一个类似于QQ的侧滑菜单,顺便还将其封装为自定义组件,可以实现类似QQ的侧滑菜单和抽屉式侧滑菜单两种菜单 ...
android 仿京东抢购上下轮播消息
京东app有个上下轮播消息,就是textview轮播显示商品名称,这个是在github上看到别人写的,地址:https://github.com/LeeYawei/Android-TipView 感谢 ...
微信设置新消息提醒铃声(自定义铃声)
前言: 微信接收新消息时的铃声感觉很吵,微信自带的铃声感觉更加***. 想要语音/视频聊天有声音提醒,但是又不想收到新消息有声音提醒. 但是直接关掉新消息提醒又怕不能及时收到领导(或者小女友)的语音消 ...
android 自定义View绘制电池电量（电池内带数字显示）
最新公司需要一个电池内带数字的显示电池电量需求,百度了一下.参考下面这篇文章写的Android自定义View之电池电量显示. 增加了里面电池电量数字显示,还有就是一个屏幕适配.不管屏幕分辨率基本都能适 ...
android控件向内弧度_安卓自定义 View 基础：坐标系、角度弧度、颜色
安卓自定义View基础 - 坐标系一.屏幕坐标系和数学坐标系的区别由于移动设备一般定义屏幕左上角为坐标原点,向右为x轴增大方向,向下为y轴增大方向, 所以在手机屏幕上的坐标系与数学中常见的坐标系是 ...

自定义VIEW实现应用内消息提醒上下轮播

自定义VIEW实现应用内消息提醒上下轮播相关推荐

最新文章

热门文章