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

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/gdutxiaoxu/article/details/82429330

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

  • 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 的方式。


本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Android Note

Android - 接口、MVP 的使用心得

想象一下,有这么一个场景(需求),两个不同的页面,但是页面的展示 UI 是完全相同的。这时候你会想到,这很简单啊,复用吗。但但但但是,它们的数据格式是完全不相同...

942
来自专栏上善若水

002android初级篇之ViewPager及PagerSlidingTabStrip listview的使用

listView是一个可以用来显示视图列表的控件。 它使用适配器来为之提供数据和资源。

1263
来自专栏移动端开发

Android学习--RecyclerView

       前面一篇总结了ListView,在这篇我们总结一些这个RecyclerView,我们就从最基本的开始,安卓团队是将RecyclerView定义在s...

23010
来自专栏Android干货

关于Activity销毁,而绘制UI的子线程未销毁出现的问题

3716
来自专栏everhad

ViewPager无限滑动

前言 View轮播效果在app中很常见,一想到左右滑动的效果就很容易想到使用ViewPager来实现。对于像我们常说的banner这样的效果,具备无限滑动的功能...

3657
来自专栏KK的小酒馆

Adapter与ListView的简单应用(下)Android应用界面开发

1.继续分析Adapter的常用类 上一篇文章使用了ArrayAdapte制作了一个只由简单的文字组成的ListView,那ArrayAdapter是不是只有...

992
来自专栏水击三千

Android学习之简单的数据存储

在Android中,数据存储是开发人员不可以避免的。Android为开发者提供了很多的存储方法,在前面的博客中,已经讲述了sqlite存储数据。今天将介绍用Sh...

2879
来自专栏求索之路

MVVM架构之自动增删改的极简RecycleView的实现

介绍图 先上个源代码的链接:https://github.com/whenSunSet/MVVMRecycleView RecycleView是Google替...

3896
来自专栏Android干货

Android项目实战(三十七):Activity管理及BaseActivity的实现

5776
来自专栏Android先生

VLayout适配器的万能封装

传统的RecyclerView高级应用,还是挺麻烦的,阿里开源了Vlayout,采用代理模式独立承担各式各样的布局,大大的减少了程序媛的工作量,...

1684

扫码关注云+社区

领取腾讯云代金券