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

今天药忘吃喽~ 2022-05-14 09:05 87阅读 0赞

**本篇文章已授权微信公众号 guolin\_blog （郭霖）独家发布**

[Android 自定义 MarqueeView 实现跑马灯效果 - 使用说明][Android _ MarqueeView _ -]

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

## 前言 ##

在上一篇博客 [Android 自定义 MarqueeView 实现跑马灯效果 - 使用说明][Android _ MarqueeView _ -] 中，我们已经讲解了 MarqueeView 的各种用法。这篇博客，让我们一起来看一下 MarqueeView 的实现原理。

在上一篇博客中，我们知道我们是通过给 MarqueeView setAdapter 来刷新界面的。因此，让我们一起先来看一下 MultiItemTypeAdapter。

## MultiItemTypeAdapter 讲解 ##

讲解 MultiItemTypeAdapter 之前，我们先来看一下相应的接口 ItemViewDelegate 和类 ItemViewDelegateManager

### ItemViewDelegate ###

而 ItemViewDelegateManager 主要是管理 ItemViewDelegate 的。

public interface ItemViewDelegate<T> {
    
        public abstract int getItemViewLayoutId();
    
        public abstract boolean isForViewType(T item, int position);
    
        public abstract void convert(ViewHolder holder, T t, int position);
    
    
    }

ItemViewDelegate 主要有三个方法，getItemViewLayoutId 方法表示获取 ItemViewLayoutId，isForViewType 会根据 item 即 position 判断当前的 item 是不是属于当前的 ItemViewDelegate，convert 在刷新当前 item 的时候会调用。

### ItemViewDelegateManager ###

ItemViewDelegateManager，没错，从字面意思来看，就是来管理 ItemViewDelegate 的。

接下来我们来看 ItemViewDelegateManager 里面几个比较重要的方法，

*  当有指定 viewType会先去缓存里面查找是否存在相应的 delegate，如果存在，不合法，抛出异常。因为同一时刻只有一个 delegate 能处理该 position；
 *  当没有指定 viewType 的时候，我们会以当前 delegates 的容量作为 key 存进 SparseArrayCompat 中。

SparseArrayCompat<ItemViewDelegate<T>> delegates = new SparseArrayCompat();
        
       public ItemViewDelegateManager<T> addDelegate(int viewType, ItemViewDelegate<T> delegate) {
            if (delegates.get(viewType) != null) {
                throw new IllegalArgumentException("An ItemViewDelegate is already registered for the" +
                        " viewType = " + viewType + ". Already registered ItemViewDelegate is " +
                        delegates.get(viewType));
            }
            delegates.put(viewType, delegate);
            return this;
        }
    
        public ItemViewDelegateManager<T> addDelegate(ItemViewDelegate<T> delegate) {
            int viewType = delegates.size();
            if (delegate != null) {
                delegates.put(viewType, delegate);
                viewType++;
            }
            return this;
        }

**因此，我们如果想获取对应 position 的 viewType，可以通过 delegate 在 delegates 中对应的 key**

于是衍生出以下方法：

即根据当前 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<T> 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<T> 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<View> getAllTyeView(ViewGroup parent) {
        SparseArrayCompat<ItemViewDelegate<T>> itemViewDelegates = getItemViewDelegate();
        int size = itemViewDelegates.size();
        SparseArrayCompat<View> 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<View> 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<View> 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);
            }
    
            @Override
            public void onAnimationEnd(Animation animation) {
                mLastView.setVisibility(View.GONE);
                mPosition++;
                int count = mMultiItemTypeAdapter.getCount();
                if (mPosition >= count) {
                    mPosition = 0;
                }
                sendAppear();
            }
    
            @Override
            public void onAnimationRepeat(Animation animation) {
    
            }
        });
    
        mLastView.startAnimation(animation);
    }

OK ，我们回过头来梳理一下我们的 MarqueeView 是怎样实现 View 的轮播的?

![aHR0cDovL3d3MS5zaW5haW1nLmNuL2xhcmdlLzlmZTRhZmEwbHkxZnV4cjk2cm9ya2oyMG52MGIyMHQ3LmpwZw][]

*  Handler 接受到 APPEAR 消息，执行进场动画之后，根据标志位isStart 判断是否还需要 执行 动画，需要的话，发送延时的 DIS\_APPEAR 消息
 *  Handler 接收到 DIS\_APPEAR 消息，执行完退出动画之后，根据标志位isStart 判断是否还需要 执行 动画，需要的话，发送延时的 APPEAR 消息。从而形成一个循环。

到此，MarqueeView 的核心原理已讲完。

--------------------

## 感谢 ##

[https://github.com/hongyangAndroid/baseAdapter][https_github.com_hongyangAndroid_baseAdapter]

参考了鸿洋大佬 baseAdapter 的大部分用法

[https://github.com/sunfusheng/MarqueeView][https_github.com_sunfusheng_MarqueeView]

里面 View 的复用也给了我相应的思路。不过 ViewFliper 无法实现多种 ViewType 的复用，最终舍弃了该方案，采用自定义 FrameLayout 的方式。

如果觉得效果还不错，请 star，谢谢。

[MarqueeView：https://github.com/gdutxiaoxu/MarqueeView][MarqueeView_https_github.com_gdutxiaoxu_MarqueeView]

--------------------

## 推荐阅读 ##

[一步步拆解 LeakCanary][LeakCanary]

[Android 面试必备 - http 与 https 协议][Android _ - http _ https]

[Android 面试必备 - 计算机网络基本知识（TCP，UDP，Http，https）][Android _ - _TCP_UDP_Http_https]

[Android 面试必备 - 线程][Android _ -]

**[Android\_interview github 地址][Android_interview github]**

![aHR0cDovL3d3MS5zaW5haW1nLmNuL2xhcmdlLzlmZTRhZmEwZ3kxZmt5NnlxdmNiYmoyMDlrMDlrNzQ4LmpwZw][]

扫一扫，欢迎关注我的微信公众号 **stormjun94**， 目前专注于 Android 开发，主要分享 Android开发相关知识和技术人成长历程，包括个人总结，职场经验，面试经验等。

[Android _ MarqueeView _ -]: https://blog.csdn.net/gdutxiaoxu/article/details/82389133
[Android _ MarqueeView _ _]: https://blog.csdn.net/gdutxiaoxu/article/details/82429330
[aHR0cDovL3d3MS5zaW5haW1nLmNuL2xhcmdlLzlmZTRhZmEwbHkxZnV4cjk2cm9ya2oyMG52MGIyMHQ3LmpwZw]: /images/20220514/ee74f2cf5347422a883e1340b4c7a2f0.png
[https_github.com_hongyangAndroid_baseAdapter]: https://github.com/hongyangAndroid/baseAdapter
[https_github.com_sunfusheng_MarqueeView]: https://github.com/sunfusheng/MarqueeView
[MarqueeView_https_github.com_gdutxiaoxu_MarqueeView]: https://github.com/gdutxiaoxu/MarqueeView
[LeakCanary]: https://blog.csdn.net/gdutxiaoxu/article/details/80752876
[Android _ - http _ https]: https://blog.csdn.net/gdutxiaoxu/article/details/97885526
[Android _ - _TCP_UDP_Http_https]: https://blog.csdn.net/gdutxiaoxu/article/details/97618598
[Android _ -]: https://blog.csdn.net/gdutxiaoxu/article/details/98475465
[Android_interview github]: https://github.com/gdutxiaoxu/Android_interview
[aHR0cDovL3d3MS5zaW5haW1nLmNuL2xhcmdlLzlmZTRhZmEwZ3kxZmt5NnlxdmNiYmoyMDlrMDlrNzQ4LmpwZw]: /images/20220514/33c85a02ca4749f898f42c423786eb9c.png