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

程序员徐公
1,231 阅读6分钟

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

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 的轮播的?

image

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

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

感谢

github.com/hongyangAnd…

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

github.com/sunfusheng/…

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

关于我

GitHub: gdutxiaoxu

个人邮箱: gdutxiaoxu@136.com

CSDN 博客：https://blog.csdn.net/gdutxiaoxu

简书主页: https://www.jianshu.com/u/ca9b3e19f454

个人微信公众号：

image

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

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

avatar
文章
阅读
粉丝