判断Listview滑到顶部的最精准方案，解决Listview设置EmptyView与SwipeRefreshLayout冲突

Posted 2022-12-14 TellH

故事发生的背景

SwipeRefreshLayout是谷歌自家控件，提供下拉刷新的功能。然而这个控件简单易用的同时也有一个令人头疼的缺点，那就是它里面只能包含一个子View！有一天，需求来了，需要在为Listview添加EmptyView和下拉刷新，同时当显示EmptyView时也要求有下拉刷新。

尝试与探索

大家都知道，设置EmptyView需要把它放在一个容器内。这还不简单，SwipeRefreshLayout不就很好的容器吗？

    <android.support.v4.widget.SwipeRefreshLayout
        android:id="@+id/refrashLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <ListView
            android:id="@+id/listview"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_gravity="center_horizontal"
            android:clipToPadding="false"
            android:divider="#E1E6E9"
            android:dividerHeight="20dp"
            android:padding="20dp"
            android:scrollbars="none" />

        <ScrollView
            android:id="@+id/emptyView"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fillViewport="true">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:gravity="center"
                android:text="Nothing here..." />
        </ScrollView>
    </android.support.v4.widget.SwipeRefreshLayout>

故事就这样结束了吗？NO，这样写了后果是，当Listview没有数据显示的时候，EmptyView没有显示出来。

后来，我Google一下，在stackoverflow上看到很多解决方案，找到几种比较靠谱的方案，有一些说需要重写自定义Listview，个人觉得不够优雅就不列举出来了。

方案一：

把EmptyView放到SwipeRefreshLayout外面，这似乎是一个很完美的方案，同时也是最简单的，然而，这样的话EmptyView没有下拉刷新了。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#E1E6E9"
    android:orientation="vertical">

    <ScrollView
        android:id="@+id/emptyView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:visibility="gone"
        android:fillViewport="true">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"
            android:text="Nothing here..." />
    </ScrollView>

    <android.support.v4.widget.SwipeRefreshLayout
        android:id="@+id/refrashLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <ListView
            android:id="@+id/listview"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_gravity="center_horizontal"
            android:clipToPadding="false"
            android:divider="#E1E6E9"
            android:dividerHeight="20dp"
            android:padding="20dp"
            android:scrollbars="none" />

    </android.support.v4.widget.SwipeRefreshLayout>
</LinearLayout>

方案二

为了给EmptyView加下拉刷新，在把方案一中的EmptyView套上另一个SwipeRefreshLayout。这样的话就需要两份处理SwipeRefreshLayout的代码了，个人觉得比较麻烦，不够优雅，但也不失为一个完整的解决方案。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#E1E6E9"
    android:orientation="vertical">

    <android.support.v4.widget.SwipeRefreshLayout
        android:id="@+id/emptyView"
        android:layout_width=""
        android:layout_height="">
        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"
            android:text="Nothing here..." />
    </android.support.v4.widget.SwipeRefreshLayout>
    <android.support.v4.widget.SwipeRefreshLayout
        android:id="@+id/refrashLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <ListView
            android:id="@+id/listview"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_gravity="center_horizontal"
            android:clipToPadding="false"
            android:divider="#E1E6E9"
            android:dividerHeight="20dp"
            android:padding="20dp"
            android:scrollbars="none" />

    </android.support.v4.widget.SwipeRefreshLayout>
</LinearLayout>

方案三

我一向不喜欢简单粗暴，推崇优雅的解决方法。既然你SwipeRefreshLayout只能包含一个子View，那么我用FrameLayout wrap them all together不就行了？ 为什么用FrameLayout？ 因为FrameLayout相比于其他几个开销更低。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#E1E6E9"
    android:orientation="vertical">

    <android.support.v4.widget.SwipeRefreshLayout
        android:id="@+id/refrashLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <ListView
                android:id="@+id/listview"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:padding="20dp"
                android:clipToPadding="false"
                android:layout_gravity="center_horizontal"
                android:scrollbars="none"
                android:divider="#E1E6E9"
                android:dividerHeight="20dp" />

            <ScrollView
                android:id="@+id/emptyView"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fillViewport="true">

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:gravity="center"
                    android:text="Nothing here..." />
            </ScrollView>
        </FrameLayout>
    </android.support.v4.widget.SwipeRefreshLayout>
</LinearLayout>

很合理的方案，然而故事并没有这么轻易结束，运行效果如图。

LIstview没有到达顶部下拉就会刷新！显然这个bug是无法接受的。我们需要在listview没有到达顶部的时候禁用SwipeRefreshLayout，在listview到达顶部的时候恢复SwipeRefreshLayout，就可以解决这个问题了。显然我们需要判断listview是否到达顶部的方法。

判断Listview滑到顶部的方案

我们网上一搜索，方法都是前篇一律的方案一。

方案一：简洁而粗糙

listview.setEmptyView(emptyView);
//防止SwipeRefreshLayout过早触发
listview.setOnScrollListener(new AbsListView.OnScrollListener() 
    @Override
    public void onScrollStateChanged(AbsListView view, int scrollState) 

    
    @Override
    public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) 
        if (firstVisibleItem==0)
            refrashLayout.setEnabled(true);
        else refrashLayout.setEnabled(false);
    
);

我天真地以为故事真的这样结束了，然而….

显然这是最简单的方案了，但却不能精确地判断是否真的滑到顶部！对于一些item高度比较大时，用这种方法判断似乎毫无意义。

终极方案

想到这个方法，我还是从Listview源码里面找到启发（源码真是最好的老师）。当Listview捕捉到ACTION_MOVE滑动动作时会调用trackMotionScroll方法，在里面有这样一段代码，判断子view是否移出屏幕。

if(down)
              //手指向下滑动
                final int top = listPadding.top - incrementalDeltaY;
                for (int i = 0; i < childCount; i++) 
                    final View child = getChildAt(i);
                    if (child.getBottom() >= top) 
                        break;
                     else   //子View已经移出了屏幕
                        count++;
                        int position = firstPosition + i;
                        if (position >= headerViewsCount && position < footerViewsStart) 
                            mRecycler.addScrapView(child);
                        
                    
                
            

            else
            
                final int bottom = getHeight() - listPadding.bottom - incrementalDeltaY;
                for (int i = childCount - 1; i >= 0; i--) 
                    final View child = getChildAt(i);
                    if (child.getTop() <= bottom) 
                        break;
                     else 
                        start = i;
                        count++;
                        int position = firstPosition + i;
                        if (position >= headerViewsCount && position < footerViewsStart) 
                            mRecycler.addScrapView(child);
                        
                    
                
            

那么给listview设置监听器，只要listview的第一个item的顶部y坐标值等于listview的顶部y坐标值表明listview到达了顶部
下面就show you the code!

        listview.setEmptyView(emptyView);
        listview.setOnTouchListener(new View.OnTouchListener() 
            @Override
            public boolean onTouch(View v, MotionEvent event) 
                if (event.getAction() == MotionEvent.ACTION_MOVE) 
                    Log.d("Measure","listview.getListPaddingTop():"+listview.getListPaddingTop()+
                            " listview.getTop():"+listview.getTop()+"listview.getChildAt(0).getTop():"+listview.getChildAt(0).getTop());
                    if (listview.getFirstVisiblePosition() == 0 &&
                            listview.getChildAt(0).getTop() >= listview.getListPaddingTop()) 
                        refrashLayout.setEnabled(true);
                        Log.d("TAG", "reach top!!!");
                    else refrashLayout.setEnabled(false);
                
                return false;
            
        );

EmptyView：

在情人节写代码，写博客，其实我是拒绝的~~不说了，完整代码已上传至Github，项目当中其他类不用管，相关代码在MainActivity中。