Android 自定义 MarqueeView 实现跑马灯 —— 原理篇

最新推荐文章于 2024-05-15 16:14:06 发布
最新推荐文章于 2024-05-15 16:14:06 发布
阅读量832 收藏 28
点赞数 10
分类专栏： 程序员 文章标签： android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_84149785/article/details/138381189
版权

即根据当前 postion，去查找相应的 delegate，然后再获取通过 delegate 在 delegates 数组中对应的 key，即我们的 viewType

public int getItemViewType(T item, int position) {

int delegatesCount = delegates.size();

for (int i = delegatesCount - 1; i >= 0; i–) {

ItemViewDelegate delegate = delegates.valueAt(i);

if (delegate.isForViewType(item, position)) {

return delegates.keyAt(i);

}

}

throw new IllegalArgumentException(“No ItemViewDelegate added that matches position=” +

position + " in data source");

}

MultiItemTypeAdapter 讲解

主要有几个重要的方法：

public View createItemView(ItemViewDelegate itemViewDelegate, ViewGroup parent) {

int layoutId = itemViewDelegate.getItemViewLayoutId();

ViewHolder viewHolder = null;

View convertView = LayoutInflater.from(mContext).inflate(layoutId, parent, false);

viewHolder = new ViewHolder(mContext, convertView, parent, -1);

viewHolder.mLayoutId = layoutId;

onViewHolderCreated(viewHolder, viewHolder.getConvertView());

return convertView;

}

public View createItemView(int position, View convertView, ViewGroup parent) {

ItemViewDelegate itemViewDelegate = mItemViewDelegateManager.getItemViewDelegate(mDatas

.get(position), position);

int layoutId = itemViewDelegate.getItemViewLayoutId();

ViewHolder viewHolder = null;

if (convertView == null) {

convertView = LayoutInflater.from(mContext).inflate(layoutId, parent, false);

viewHolder = new ViewHolder(mContext, convertView, parent, position);

viewHolder.mLayoutId = layoutId;

onViewHolderCreated(viewHolder, viewHolder.getConvertView());

} else {

viewHolder = (ViewHolder) convertView.getTag();

viewHolder.mPosition = position;

}

convert(viewHolder, getItem(position), position);

return convertView;

}

private void convert(ViewHolder viewHolder, T item, int position) {

mItemViewDelegateManager.convert(viewHolder, item, position);

}

public SparseArrayCompat getAllTyeView(ViewGroup parent) {

SparseArrayCompat<ItemViewDelegate> itemViewDelegates = getItemViewDelegate();

int size = itemViewDelegates.size();

SparseArrayCompat viewSparseArrayCompat = new SparseArrayCompat<>();

for (int i = 0; i < size; i++) {

ItemViewDelegate delegate = itemViewDelegates.valueAt(i);

View itemView = createItemView(delegate, parent);

int itemViewType = getItemViewType(itemViewDelegates, i);

Log.i(TAG, "getAllTyeView: itemViewType = " + itemViewType);

viewSparseArrayCompat.put(itemViewType, itemView);

}

return viewSparseArrayCompat;

}

  • 第一个方法： createItemView(ItemViewDelegate itemViewDelegate, ViewGroup parent)，会根据传递的 itemViewDelegate 创建相应的 convertView，并调用 onViewHolderCreated() 方法

  • 第二个方法：createItemView 会根据传递进来的 position 创建相应的 convertView

  • 若 convertView 为 null，从布局中 load 进来

  • 若 convertView 不为空，取出来 viewHolder，并刷新 viewHolder 里面的 position

最后调用 convert 方法去刷新界面数据。

而这个 convertView 什么时候为 null，什么时候不为 null，这个必须要外部调用来管理，MultiItemTypeAdapter 管理不了，也不应该管理。

  • 第三个方法： getAllTyeView ，这个方法会遍历所有的 itemViewDelegate 并创建相应的 View 及 ViewHolder

接下来我们来看一下在 MarqueeView 里面是怎样实现 convertView 的缓存的，标重点了。

MarqueeView

首先我们来看一下 getItemView

private SparseArray mViews;

private View getItemView(int index) {

int itemViewType = mMultiItemTypeAdapter.getItemViewType(index);

// 获取缓存的 convertView

View convertView = mViews.get(itemViewType);

View itemView = mMultiItemTypeAdapter.createItemView(index, convertView, MarqueeView.this);

return itemView;

}

从代码中可以看出我们是从 mViews 里面根据当前位置 index 的 itemViewType 取出 convertView 的。那我们的 mViews 是什么时候赋值的呢？

是在 addAllTypeView 方法中

private void addAllTypeView() {

int viewTypeCount = mMultiItemTypeAdapter.getViewTypeCount();

if (viewTypeCount < 1) {

return;

}

mViews.clear();

SparseArrayCompat allTyeView = mMultiItemTypeAdapter.getAllTyeView(MarqueeView.this);

int curItemViewType = mMultiItemTypeAdapter.getItemViewType(mPosition);

for (int i = 0; i < allTyeView.size(); i++) {

int key = allTyeView.keyAt(i);

View view = allTyeView.valueAt(i);

mViews.put(key, view);

LayoutParams layoutParams = new FrameLayout.LayoutParams(LayoutParams.MATCH_PARENT,

LayoutParams.WRAP_CONTENT);

layoutParams.gravity = mGravity;

addView(view, layoutParams);

// 设置当前 itemView 可见，其他不可见

if (key == curItemViewType) {

view.setVisibility(View.VISIBLE);

} else {

view.setVisibility(View.INVISIBLE);

}

}

}

在 addAllTypeView 的时候，会调用 mMultiItemTypeAdapter.getAllTyeView 初始化所有类型的 itemView，并添加到 mViews 缓存，key 为 viewType，value 为 itemView。

MarqueeView 是怎样与 MultiItemTypeAdapter 建立关联的

我们来看一下 setAdapter 这个方法：

有一个参数，MultiItemTypeAdapter ，这个 MultiItemTypeAdapter 主要是用来实现 View 的复用以及根据不同的 viewType 添加不同的 View 的。这里先大概有个印象。下面会讲解到。

public void setAdapter(MultiItemTypeAdapter multiItemTypeAdapter) {

if (multiItemTypeAdapter == null) {

return;

}

mMultiItemTypeAdapter = multiItemTypeAdapter;

start(mInAnimResId, mOutAnimResId);

}

private void start(final @AnimRes int inAnimResId, final @AnimRes int outAnimResID) {

// 第一步：做一些重置的工作，mPosition 终止，清除所有 View，清除动画；

mPosition = 0;

clearAnimation();

removeAllViews();

// 第二步：根据 MultiItemTypeAdapter ，把所有类型的 typeView 加载进来，并根据 mPosition 设置可见性

addAllTypeView();

// 第三步：初始化当前 position 的 View，并调用 mMultiItemTypeAdapter 的相关方法

int itemViewType = mMultiItemTypeAdapter.getItemViewType(mPosition);

View convertView = mViews.get(itemViewType);

View itemView = mMultiItemTypeAdapter.createItemView(mPosition, convertView, MarqueeView.this);

mCurView = itemView;

mLastView = mCurView;

// 利用 handle 发送消息，执行动画

post(new Runnable() {

@Override

public void run() {

sendAppear();

}

});

}

在 setAdapter 方法中，会先用 start 方法。而在 start 方法中主要做即将事情

  • 第一步：做一些重置的工作，mPosition 终止，清除所有 View，清除动画；

  • 第二步：根据 MultiItemTypeAdapter ，把所有类型的 typeView 加载进来，并根据 mPosition 设置可见性

  • 第三步：初始化当前 position 的 View，并调用 mMultiItemTypeAdapter 的 createItemView 去初始化对应 postion 的 View

int itemViewType = mMultiItemTypeAdapter.getItemViewType(mPosition);

View convertView = mViews.get(itemViewType);

View itemView = mMultiItemTypeAdapter.createItemView(mPosition, convertView, MarqueeView.this);

mCurView = itemView;

mLastView = mCurView;

  • 第四步：利用 handle 发送消息,执行进场动画

post(new Runnable() {

@Override

public void run() {

sendAppear();

}

});

private void sendAppear() {

mHandler.removeMessages(APPEAR);

if (!isStart) {

return;

}

mHandler.sendEmptyMessageDelayed(APPEAR, 0);

}

MarqueeView 是怎样轮询执行动画的

实质是用 hanlde 不断发送消息

接受到 APPEAR 消息的时候：

首先获取当前位置的 ItemView，接着执行动画，执行完动画之后，mLastView = mCurView; 。接着，判断当前是否还需要执行 flip 动画，如果需要的话，会发送并发送延时消息，告诉下一次执行小时动画的时间。如果，不需要，则不会发送 DIS_APPEAR 消息

private Handler mHandler = new Handler() {

@Override

public void handleMessage(Message msg) {

super.handleMessage(msg);

switch (msg.what) {

case APPEAR:

handleAppearMes();

break;

}

private void handleAppearMes() {

mLastView = mCurView;

mCurView = getItemView(mPosition);

Animation inAnimation = getInAnimation();

inAnimation.setAnimationListener(new Animation.AnimationListener() {

@Override

public void onAnimationStart(Animation animation) {

mLastView.setVisibility(View.GONE);

mCurView.setVisibility(View.VISIBLE);

if (mIFlipListener != null) {

mIFlipListener.onFilpStart(mPosition, mCurView);

}

}

@Override

public void onAnimationEnd(Animation animation) {

mLastView = mCurView;

mCurView = getItemView(mPosition);

if (mIFlipListener != null) {

mIFlipListener.onFilpSelect(mPosition, mCurView);

}

sendDisappear();

}

@Override

public void onAnimationRepeat(Animation animation) {

}

});

mCurView.startAnimation(inAnimation);

}

接受到 DIS_APPEAR 消息的时候：

当执行完动画的时候，mPosition++; 并检验 mPosition 合法性。接着，判断当前是否还需要执行 flip 动画，如果需要的话，会发送 APPEAR 消息。不需要，则不发送。

case DIS_APPEAR:

handleDisappearMes();

break;

private void handleDisappearMes() {

Animation animation = getOutAnimation();

animation.setAnimationListener(new Animation.AnimationListener() {

@Override

public void onAnimationStart(Animation animation) {

mLastView.setVisibility(View.VISIBLE);

}

作者2013年从java开发，转做Android开发，在小厂待过，也去过华为，OPPO等大厂待过，18年四月份进了阿里一直到现在。

参与过不少面试，也当面试官 面试过很多人。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，不成体系的学习效果低效漫长，而且极易碰到天花板技术停滞不前！

我整理了一份阿里P7级别的最系统的Android开发主流技术，特别适合有3-5年以上经验的小伙伴深入学习提升。

主要包括阿里，以及字节跳动，腾讯，华为，小米，等一线互联网公司主流架构技术。如果你想深入系统学习Android开发，成为一名合格的高级工程师，可以收藏一下这些Android进阶技术选型

我搜集整理过这几年阿里，以及腾讯，字节跳动，华为，小米等公司的面试题，把面试的要求和技术点梳理成一份大而全的“ Android架构师”面试 Xmind（实际上比预期多花了不少精力），包含知识脉络 + 分支细节。

Java语言与原理；
大厂，小厂。Android面试先看你熟不熟悉Java语言

高级UI与自定义view；
自定义view，Android开发的基本功。

性能调优；
数据结构算法，设计模式。都是这里面的关键基础和重点需要熟练的。

NDK开发；
未来的方向，高薪必会。

前沿技术；
组件化，热升级，热修复，框架设计

网上学习 Android的资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。希望这份系统化的技术体系对大家有一个方向参考。

我在搭建这些技术框架的时候，还整理了系统的高级进阶教程，会比自己碎片化学习效果强太多，CodeChina上可见；

当然，想要深入学习并掌握这些能力，并不简单。关于如何学习，做程序员这一行什么工作强度大家都懂，但是不管工作多忙，每周也要雷打不动的抽出 2 小时用来学习。

不出半年，你就能看出变化！
《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》，点击传送门，即可获取！
view；**
自定义view，Android开发的基本功。

[外链图片转存中…(img-1LVFhNgf-1714573092236)]

性能调优；
数据结构算法，设计模式。都是这里面的关键基础和重点需要熟练的。

[外链图片转存中…(img-lnHrw0gZ-1714573092238)]

NDK开发；
未来的方向，高薪必会。

[外链图片转存中…(img-B85ihpZM-1714573092240)]

前沿技术；
组件化，热升级，热修复，框架设计

[外链图片转存中…(img-CQReh1Mp-1714573092241)]

网上学习 Android的资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。希望这份系统化的技术体系对大家有一个方向参考。

我在搭建这些技术框架的时候，还整理了系统的高级进阶教程，会比自己碎片化学习效果强太多，CodeChina上可见；

当然，想要深入学习并掌握这些能力，并不简单。关于如何学习，做程序员这一行什么工作强度大家都懂，但是不管工作多忙，每周也要雷打不动的抽出 2 小时用来学习。

不出半年，你就能看出变化！
《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》，点击传送门，即可获取！

2401_84149785
关注
  • 10
    点赞
  • 踩
  • 28
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Android 自定义 MarqueeView 实现跑马灯 —— 原理篇，vue双向绑定原理
m0_66155412的博客
01-20 690
讲解 MultiItemTypeAdapter 之前，我们先来看一下相应的接口 ItemViewDelegate 和类 ItemViewDelegateManager ItemViewDelegate 而 ItemViewDelegateManager 主要是管理 ItemViewDelegate 的。 public interface ItemViewDelegate { public abstract int getItemViewLayoutId(); public abstract boolean
Android 自定义 MarqueeView 实现跑马灯效果 - 使用说明
m0_70083038的博客
05-06 1056
TextView tv = viewHolder.getView(R.id.tv); tv.setText(item); } } SimpleTextAdapter simpleTextAdapter = new SimpleTextAdapter(mContext, datas); simpleTextAdapter.setOnItemClickListener(new MultiItemTypeAdapter.OnItemClickListener() { @Override public void o
微信小程序 – weui的引入使用方法
01-03
查看weui是否是想要的表单样式，样式大致为： 下载weui 链接：https://pan.baidu.com/s/1jYqX1TEsyPWAqUHLwUm19Q 提取码：kvtc 引入weui （1）将src->style->weui.wxss复制到自己项目里 （2）在app.wxss文件中顶部加上如下代码 /* 这里的里放的是绝对路径，加入把文件放到了项目文件->utils文件夹中这里就是utils/weui.wxss */ @import weui.wxss; （3）在界面中使用相应的class就可以了呢 因为不知道对应的class属性是什么，可以将查看下载的文件
微信小程序从零开始开发步骤（八）引入框架WeUI
祈澈菇凉
03-21 1184
首先来看下WeUI的官方介绍： WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。在微信小程序的开发过程中，涉及到的前端复杂的样式界面的问题，就需要使用个UI框架，这样可以省去以后很多麻烦。 WeUI作为一个开源的移动端UI框架，由于它是微信官方提供的对微信的兼容性没有太大问题...
微信小程序weui的使用
田兴的博客
09-28 1924
小程序weui官网：https://developers.weixin.qq.com/miniprogram/dev/extended/weui/ 更多请看https://www.jianshu.com/p/ada94d3a3e86 方法一：npm导入WeUI（推荐） 1. 在项目根路径下开启终端 2. 执行 npm init 创建package.json (不想一个一个配置也可以执行npm init -y) 3. npm安装WeUi，执行cnpm install --save weui-miniprogr
微信小程序如何使用weui组件库？
2301_76669854的博客
05-15 920
微信小程序如何使用weui组件库？ 一、方法一：通过npm安装 *二、方法二：直接修改配置文件 （推荐使用，更方便）
Android 自定义 MarqueeView 实现跑马灯效果 - 使用说明(1)
2401_83703866的博客
04-04 733
我一直以来都有整理练习大厂面试题的习惯，有随时跳出舒服圈的准备，也许求职者已经很满意现在的工作，薪酬，觉得习惯而且安逸。不过如果公司突然倒闭，或者部门被裁减，还能找到这样或者更好的工作吗？我建议各位，多刷刷面试题，知道最新的技术，每三个月可以去面试一两家公司，因为你已经有不错的工作了，所以可以带着轻松的心态去面试，同时也可以增加面试的经验。我可以将最近整理的一线互联网公司面试真题+解析分享给大家，大概花了三个月的时间整理2246页，帮助大家学习进步。
android自定义View实现跑马灯效果
08-27
本教程主要讲解如何在Android中自定义一个View来实现跑马灯效果，即文字内容能够连续滚动，提供更多的定制化功能。 跑马灯效果通常用于显示一串超出视图宽度的文字，使其看起来像在视图内滚动。Android的TextView...
微信小程序之WeUI组件库的使用
XH_jing的博客
11-23 8458
本文主要介绍微信小程序中的 WeUI组件库的具体使用方法，通过具体的示例代码进行介绍，相信能够对大家的学习和工作都有一定的参考学习意义，欢迎大家一起学习进步。 WeUI组件库 官方文档 一、前言 WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。包含button、cell、dialog、 progress、 toast、article、actionsheet、icon等各式元素。 二、下载 1. git 全部下载：https.
weui的使用-demo
12-13
原文地址：http://blog.csdn.net/sundayaaron/article/details/53607838
weUI 入门教程
02-24
weUI 入门教程:http://blog.csdn.net/libin_1/article/details/50734266
weui 的使用方法
banhui0728的博客
01-13 423
weui是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。 在开发微信小程序时, 使用weui提供的样式会更加符合微信用户的交互习惯 介绍一下weui的使用方法: 1. 下载: Github 地址：https://github.com/weui/weui, 2. 下载的项目的dist文件夹里面包含一个 ...
weui在微信小程序中使用
hangGe0111的博客
09-15 743
1.方法一 （useExtendedLib方式 （推荐此方式））： 说明：这种方式引入的组件将不会计入代码包大小，并且 不需要 在app.wxss 中引入weui.wxss，比较方便： 1.1 首先在app.json 配置： { "useExtendedLib": { "weui": true } } 1.2 在需要使用的页面 的 json文件 引入组件： "usingComponents": { "mp-dialog": "weui-miniprogram/...
小程序如何使用WeUI
松鼠的一巴掌
02-12 734
老谜语人WeUI使用起来真的有点令人发火，需要配合以下参考 app.json 查看效果 https://weui.io/ 查看示例源码 仓库地址 在各个文件夹里查看谜语人部分，照搬示例代码即可实现相关UI 查看文档 文档 查看可选属性 ...
微信小程序使用weui
最新发布
weixin_44568565的博客
05-15 458
前几天公司需要制作一个小程序，但是本人对于小程序不太熟悉，借此机会来记录一下自己使用weui的流程 -小程序 + ts -基础库3.4.3（当时的最新）
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值