Android(安卓)自定义 MarqueeView 实现跑马灯 —— 原理篇

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

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

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

前言

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

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

MultiItemTypeAdapter 讲解

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

ItemViewDelegate

而 ItemViewDelegateManager 主要是管理 ItemViewDelegate 的。

public interface ItemViewDelegate {    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> delegates = new SparseArrayCompat();       public ItemViewDelegateManager addDelegate(int viewType, ItemViewDelegate 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 addDelegate(ItemViewDelegate 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 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> 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);        }        @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 的轮播的?

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

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

感谢

https://github.com/hongyangAndroid/baseAdapter

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

https://github.com/sunfusheng/MarqueeView

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

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

MarqueeView：https://github.com/gdutxiaoxu/MarqueeView

前言

MultiItemTypeAdapter 讲解

ItemViewDelegate

ItemViewDelegateManager

MultiItemTypeAdapter 讲解

MarqueeView

MarqueeView 是怎样与 MultiItemTypeAdapter 建立关联的

MarqueeView 是怎样轮询执行动画的

感谢

推荐阅读

更多相关文章

随机推荐