Andorid分组Item顶部悬停 + 交互同步

简介:   项目中某些页面中的分组数据的顶部需要悬停,并且悬停的View要与ItemView中同样布局的View进行操作同步,也就是相互同步。大家都知道,Android中有"The specified child already has a parent. You must call removeView() on the child's parent first."这个异常,意味着同一个View对象不能有两个Parent。我们就不能简单粗暴的将同一个View对象添加进两个parent了,需要另谋出路。

Andorid分组Item顶部悬停 + 交互同步

需求概述

  项目中某些页面中的分组数据的顶部需要悬停,并且悬停的View要与ItemView中同样布局的View进行操作同步,也就是相互同步。大家都知道,Android中有"The specified child already has a parent. You must call removeView() on the child's parent first."这个异常,意味着同一个View对象不能有两个Parent。我们就不能简单粗暴的将同一个View对象添加进两个parent了,需要另谋出路。

方案选择:

①sitckyScrollView悬停:不支持list的复用,主线程会卡顿,pass。

②在listview的顶部覆盖一个View,重新生成需要悬停的View,并做到悬停View和原View的同步。针对listview的滑动和分组悬停,这个方案工作量太大,可行性不高。

③NestedScrollingChild和NestedScrollingParent方案,不支持分组,不合适。

④recyclerView + ItemDecoration方案 + View.draw(canvas) + motionEvent.offLocation():可行。

  我为什么选择第四个方案呢?主要原因如下:
  
  首先我们操作的是个列表,在控制悬停的View的显示和移动时必须要知道顶部的Item的信息,RecyclerView.ItemDecoration可以很好的解决这个问题。在ItemDecoration中可以轻松获取到RecyclerView、可见的position以及RecyclerView.Adapter中的可见View等信息,这样我们获取到需要悬停的View就很容易了。
  
  第二,在ItemDecoration#onDrawView( )方法中我们可以将需要悬停的View绘制出来。
  
  ItemDecoration轻松帮我们实现了悬停View的绘制,我们只需要处理真实View与悬绘制出来的悬停View的状态同步即可。至于如何实现状态同步,这个问题留待后面再说明。

ItemDecoration

  这里先说下ItemDecoration的实现,它是一个接口,内部各个方法的作用如下图所示:
ItemDecoration内部方法

如上所述,我们绘制View的时机应该是在onDrawOver方法中。

如何顶部的View

先上代码,

//获取最顶部的ItemView
View adapterView = parent.getChildAt(0);
        if (adapterView != null) {
            //获取需要绘制的View,这里我们需要绘制的包括一个title,一个NewCHLayoutUnScroll的Header。
            //顺便获取这两个View的高度,后面我们需要他们的高度来实现悬停View异动的效果
            View title = adapterView.findViewById(R.id.title);
            int titleHeight = 0;
            if (title != null && View.VISIBLE == title.getVisibility()) {
                titleHeight = title.getMeasuredHeight();
            }

            int saveCount = canvas.save();
            //设置总体偏移量,需要用到我们上边获取到的高度
            stickyViewHeight = titleHeight;
            if (adapterView.getBottom() < stickyViewHeight) {
                offsetY = stickyViewHeight - adapterView.getBottom();
                canvas.translate(0, -offsetY);
            }
            //渲染View
            if (title != null) {
                title.draw(canvas);
                isTitleDrawed = true;
            }
            canvas.restoreToCount(saveCount);
        } else {

        }

接下来对上述代码进行说明:

1、获取最顶部的ItemView
我们知道,RecyclerView#getChildren方法可以获取到当前所有可见的ItemView,同理,RecyclerView#getChildAt(int index)就可以根据position获取到对应位置的View,这里我们就可以通过View adapterView = parent.getChildAt(0)来获取到最顶部的ItemView了。

2、获取需要绘制的View
我们需要绘制在顶部的View是最顶部的ItemView的子View,根据view.findviewById(id)就可以获取到需要绘制的View了。

3、为了实现竖直方向RecyclerView时悬停的View同步上下滑动的效果,我们需要找到悬停View显示完全与不完全的临界值,如下图所示:

情况一和情况二

情况三

  如上图所分析,在绘制悬停View时,我们可以根据悬停View的高度和最上方ItemView.getBottom( )的大小来确定悬停View绘制的offset,从而就可以实现悬停View在合适的时机跟随RecyclerView滑动。

将ItemView中的状态变化同步给悬停View。

  这里说的状态变化同步主要包括itemView中的列表左右滑动和ItemView中的title的点击事件触发的悬停View的状态更新。实现起来其实很简单,只需要在ItemView中更新状态时调用下面这行代码即可:

mRecyclerView.invalidateItemDecorations();

  RecyclerView#invalidateItemDecorations( )方法会引起ItemDecoration的重绘,onDrawOver方法势必会重新调用,所以悬停View也就会重新绘制,就会跟顶部ItemView的title保持一致。

将悬停View的事件同步给顶部的ItemView。

  这一步骤是最棘手的一步,这个问题可以理解为如何将canvas绘制的View的事件同步到被绘制的View上去。首先绘制出来的悬停View并不是真正的View,它的事件默认是传递给RecyclerView的,即使在RecyclerView中直接拦截了这个事件,如何处理也是个问题,因为很难定位MotionEvent的实际位置。
到了这一步,我们就可以借鉴前面提到过的StickyScrollView中对绘制出的悬停View的处理方法了,核心代码如下所示:

StickyScrollView#onTouchEvent
@Override
    public boolean onTouchEvent(MotionEvent ev) {
        if (redirectTouchesToStickyView) {
            ev.offsetLocation(0, ((getScrollY() + stickyViewTopOffset) - getTopForViewRelativeOnlyChild(currentlyStickingView)));
        }

        ...
        return super.onTouchEvent(ev);
    }

核心代码是ev.offsetLocation( ),我们看下它的源码:

MotionEvent#offsetLocation
/**
     * Adjust this event's location.
     * @param deltaX Amount to add to the current X coordinate of the event.
     * @param deltaY Amount to add to the current Y coordinate of the event.
     */
    public final void offsetLocation(float deltaX, float deltaY) {
        if (deltaX != 0.0f || deltaY != 0.0f) {
            nativeOffsetLocation(mNativePtr, deltaX, deltaY);
        }
    }

  这个方法会将MotionEvent的作用位置偏移一定的位置,也就是说会将事件传递到别的位置上。另外,在ViewGroup的事件分发的源码中,也是通过MotionEvent#offsetLocation(offsetX, offsetY)来对事件进行处理的。

  通过以上分析,我们可以通过MotionEvent#offsetLocation(offsetX, offsetY)方法将悬停View的MotionEvent传递给真实的View区域即可,唯一需要做的就是计算offsetY的值。

  还有一个环节需要注意,我们在哪儿获取到这个MotionEvent,如何获取到RecyclerView.Item的事件呢?请看这儿,Passing MotionEvents from RecyclerView.OnItemTouchListener to GestureDetectorCompat,首先给recyclerView添加OnItemTouchListener,然后在OnItemTouchListener#onInterceptTouchEvent方法中就可以获取到事件了;获取到事件之后我们还需要借助手势相关的类来对事件进行处理。
  
具体代码如下:

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
                         Bundle savedInstanceState) {
    View rootView = inflater.inflate(R.layout.myfrag, container, false);

    detector = new GestureDetectorCompat(getActivity(), new RecyclerViewOnGestureListener());

    recyclerView = (RecyclerView) rootView.findViewById(R.id.recyclerview);

    layoutManager = new LinearLayoutManager(getActivity());
    recyclerView.setLayoutManager(layoutManager);
    recyclerView.addOnItemTouchListener(this);

    adapter = new MyAdapter(myData));
    recyclerView.setAdapter(adapter);
    return rootView;
}

private class RecyclerViewOnGestureListener extends SimpleOnGestureListener {

    @Override
    public boolean onSingleTapConfirmed(MotionEvent e) {
        View view = recyclerView.findChildViewUnder(e.getX(), e.getY());
        int position = recyclerView.getChildPosition(view);

        // handle single tap

        return super.onSingleTapConfirmed(e);
    }

    public void onLongPress(MotionEvent e) {
        View view = recyclerView.findChildViewUnder(e.getX(), e.getY());
        int position = recyclerView.getChildPosition(view);

        // handle long press

        super.onLongPress(e);
    }
}

@Override
public boolean onInterceptTouchEvent(RecyclerView rv, MotionEvent e) {
    detector.onTouchEvent(e);
    return false;
}

@Override
public void onTouchEvent(RecyclerView rv, MotionEvent e) {
}

  好了,上面分析了如何实现类似IOS的分组悬停效果,对解决这个问题的思路进行了阐述,这里大致总结下:
Android分组悬停 + 事件处理思路总结

参考:

1、深入理解ItemDecoration

2、灵感来源

3、recyclerView的事件处理

4、手势检测

相关文章
|
索引 容器
Bootstrap4----网络系统、图像形状、轮播、滚动监听、多媒体对象、下拉菜单导航及按钮
Bootstrap4----网络系统、图像形状、轮播、滚动监听、多媒体对象、下拉菜单导航及按钮
|
6月前
|
小程序 前端开发 Android开发
微信小程序(van-tabs) 去除横向滚动条样式(附加源码解决方案+报错图)
微信小程序(van-tabs) 去除横向滚动条样式(附加源码解决方案+报错图)
384 1
|
小程序 前端开发 JavaScript
微信小程序分类菜单激活状态跟随列表滚动自动切换
微信小程序分类菜单激活状态跟随列表滚动自动切换
164 0
微信小程序分类菜单激活状态跟随列表滚动自动切换
|
前端开发 Python
tkinter模块高级操作(一)—— 透明按钮、透明文本框、自定义按钮及自定义文本框
tkinter模块高级操作(一)—— 透明按钮、透明文本框、自定义按钮及自定义文本框
740 0
|
JavaScript
fastadmin 自定义 按钮 动态切换数据 TAB切换
fastadmin 自定义 按钮 动态切换数据 TAB切换
271 0
|
人工智能 JavaScript 前端开发
小程序实现页面多级来回切换支持滑动和点击操作
想留住粉丝,就必须安排演示: [审核中…]然后开摆!!!!首先通过swiper创建一个简单的多tab页面 通过触发pagechange1方法中的事件对currentIndex来进行赋值,又通过currentIndex的改变使前端wxml对应更改,这个部分对滑动和点击的操作都一样,无非就是使currentIndex对应到各自的位置,通过数字来决定位置 这个部分完整代码如下: wxml wxss js 上一步完成后,下级页面再加一个滑动页面,当内切换结束后,在做切换就是父级的切换操作 在“内容1”的vie
266 0
小程序实现页面多级来回切换支持滑动和点击操作
|
存储 XML 缓存
Android 天气APP(十三)仿微信弹窗(右上角加号点击弹窗效果)、自定义背景图片、UI优化调整
Android 天气APP(十三)仿微信弹窗(右上角加号点击弹窗效果)、自定义背景图片、UI优化调整
205 0
Android 天气APP(十三)仿微信弹窗(右上角加号点击弹窗效果)、自定义背景图片、UI优化调整
|
存储 小程序 iOS开发
iOS 小知识: 再次点击tabBar刷新界面数据(更新数据期间旋转tabbar图标)【包含完整demo】
iOS 小知识: 再次点击tabBar刷新界面数据(更新数据期间旋转tabbar图标)【包含完整demo】
536 0
iOS 小知识: 再次点击tabBar刷新界面数据(更新数据期间旋转tabbar图标)【包含完整demo】
|
算法 iOS开发
iOS视图滚动的时候控制导航条标题及公告视图的alpha(显示与隐藏)
iOS视图滚动的时候控制导航条标题及公告视图的alpha(显示与隐藏)
241 0
iOS视图滚动的时候控制导航条标题及公告视图的alpha(显示与隐藏)
QT应用编程: QSlider设置滚动块定位到鼠标点击的地方
QT应用编程: QSlider设置滚动块定位到鼠标点击的地方
544 0
QT应用编程: QSlider设置滚动块定位到鼠标点击的地方