天天看點
傳回

基于ViewGroup和RecyclerView的自定義下拉重新整理上拉加載清單--SwipeUpdateLayout的使用SwipeUpdateLayout簡介SwipeUpdateLayout接入SwipeUpdateLayout使用總結

SwipeUpdateLayout開發文檔

  • SwipeUpdateLayout簡介
  • SwipeUpdateLayout接入
  • SwipeUpdateLayout使用
    • 下拉重新整理
      • 使用預設頭部視圖樣式
      • 修改預設頭部視圖樣式
      • 自定義頭部視圖
    • 上拉加載更多
      • 使用預設底部視圖樣式
      • 修改預設底部視圖樣式
      • 自定義底部視圖
    • 空資料/錯誤資訊視圖
      • 使用預設空資料/錯誤資訊視圖樣式
      • 修改預設空資料/錯誤資訊視圖樣式
      • 自定義空資料/錯誤資訊視圖
    • 加載視圖
      • 使用預設加載視圖樣式
      • 修改預設加載視圖樣式
      • 自定義加載視圖
  • 總結

SwipeUpdateLayout簡介

SwipeUpdateLayout是一個支援下拉重新整理、上拉加載更多、空資料/錯誤資訊視圖展示、點選重新加載的縱向清單。

實際上是一個ViewGroup+RecyclerView的自定義控件，目前僅支援使用RecyclerView作為清單視圖，後續會考慮适配ListView、ScrollView和WebView等等。

先上預設的效果圖

基于ViewGroup和RecyclerView的自定義下拉重新整理上拉加載清單--SwipeUpdateLayout的使用SwipeUpdateLayout簡介SwipeUpdateLayout接入SwipeUpdateLayout使用總結

SwipeUpdateLayout接入

在根目錄的build.gradle添加Maven依賴：

allprojects {
		repositories {
			...
			maven { url 'https://jitpack.io' }
		}
	}

在module目錄的build.gradle添加以下依賴：

dependencies {
	        implementation 'com.github.LiZhuoFan:SwipeUpdateLayout:1.1.1'
	}

右上角Sync Now走起，再喝上一口可樂…OK，沒有報錯，接入成功。

SwipeUpdateLayout使用

用法跟正常控件一樣，在布局檔案上加上SwipeUpdateLayout然後再findViewById就可以了。但是SwipeUpdateLayout預設情況是不支援簡介中的所有功能的，除非在布局檔案上加上了SwipeUpdateLayout定義的屬性。就是說，如果什麼屬性都沒加上，SwipeUpdateLayout與一個普通的縱向RecyclerView無異。是以如果你不需要相關的功能就直接用RecyclerView好了，用SwipeUpdateLayout隻會多一層嵌套。

目前支援如下自定義屬性，請留意注釋：

<declare-styleable name="SwipeUpdateLayout">
        <!--必須是繼承com.droven.swipeupdatelayout.base.BaseLoadingView的詳細類名-->
        <attr name="loadingView" format="string" />
        <!--加載圖示-->
        <attr name="loadingIcon" format="reference" />
        <!--加載文字-->
        <attr name="loadingText" format="string" />
        <!--必須是繼承com.droven.swipeupdatelayout.base.BaseEmptyView的詳細類名-->
        <attr name="emptyView" format="string" />
        <!--空資料圖示-->
        <attr name="emptyIcon" format="reference" />
        <!--空資料文字-->
        <attr name="emptyText" format="string" />
        <!--錯誤圖示-->
        <attr name="failIcon" format="reference" />
        <!--錯誤文字-->
        <attr name="failText" format="string" />
        <!--必須是繼承com.droven.swipeupdatelayout.base.BaseRefreshView的詳細類名-->
        <attr name="headerView" format="string" />
        <!--頭部圖示-->
        <attr name="headerIcon" format="reference" />
        <!--頭部正常狀态文字-->
        <attr name="headerNormalText" format="string" />
        <!--頭部可重新整理時文字-->
        <attr name="headerCanRefreshText" format="string" />
        <!--頭部正在重新整理時文字-->
        <attr name="headerRefreshingText" format="string" />
        <!--頭部重新整理完成時文字-->
        <attr name="headerCompleteText" format="string" />
        <!--必須是繼承com.droven.swipeupdatelayout.base.BaseRefreshView的詳細類名-->
        <attr name="footerView" format="string" />
        <!--尾部圖示-->
        <attr name="footerIcon" format="reference" />
        <!--尾部正常狀态文字-->
        <attr name="footerNormalText" format="string" />
        <!--尾部可加載時文字-->
        <attr name="footerCanLoadText" format="string" />
        <!--尾部正在加載時文字-->
        <attr name="footerLoadingText" format="string" />
        <!--尾部加載完成時文字-->
        <attr name="footerCompleteText" format="string" />
    </declare-styleable>

xxxView：可以使用自己定義的View，但是必須按照注釋上說的繼承某個base類

xxxIcon/xxxText：在預設樣式的基礎上修改相應内容

注意

1、沒有添加屬性就沒有對應的功能，例如，如果loadingView、loadingIcon和loadingText都沒添加的話SwipeUpdateLayout就不支援加載視圖的功能；

2、當使用xxxView之後，xxxIcon和xxxText都會無效；

3、xxxIcon和xxxText隻要添加了其中一個就會使用預設樣式并修改對應内容。

SwipeUpdateLayout内嵌套了RecyclerView，故無需在布局檔案上添加RecyclerView

//可以直接setAdapter給到嵌套的RecyclerView
    swipeUpdateLayout.setAdapter(adapter);
    
    //可以擷取到嵌套的RecyclerView，然後可以調用RecyclerView的相關方法
    swipeUpdateLayout.getDataView();

下拉重新整理

添加headerXxx相關屬性，再加上下拉重新整理的監聽就能使用下拉重新整理功能，如果沒有加上監聽是不會有下拉重新整理功能的。

swipeUpdateLayout.setOnRefreshListener(new SwipeUpdateLayout.OnRefreshListener() {
        @Override
        public void onRefresh() {
            
        }
    });

    //資料擷取之後調用以下方法關閉頭部視圖
    swipeUpdateLayout.loadComplete();

    //動态開啟和關閉下拉重新整理功能
    swipeUpdateLayout.setRefreshEnable(enable);

使用預設頭部視圖樣式

使用預設頭部視圖隻需要添加如下屬性

app:headerView="SwipeUpdateHeaderView"

修改預設頭部視圖樣式 

<!--删之-->
    app:headerView="SwipeUpdateHeaderView"

    <!--加之，具體解釋看上面的屬性清單-->
    app:headerIcon=""<!--loading效果是仿支付寶螞蟻森林的loading效果-->
    app:headerNormalText=""
    app:headerCanRefreshText=""
    app:headerRefreshingText=""
    app:headerCompleteText=""

自定義頭部視圖

建立一個繼承com.droven.swipeupdatelayout.base.BaseRefreshView的類并實作其中的抽象方法，如：

package com.droven.swipeupdatelayout.demo;

import android.view.View;
import com.droven.swipeupdatelayout.base.BaseRefreshView;

public class MyHeaderView extends BaseRefreshView {
    /**
     * layout的ID
     */
    @Override
    protected int layoutResId() {
        return 0;
    }
    /**
     * 初始化view
     */
    @Override
    protected void initView(View view) {
    }
    /**
     * 可重新整理、加載更多的高度
     * 用于拖拽時切換文字内容
     */
    @Override
    public int canRefreshHeight() {
        return 0;
    }
    /**
     * 拖拽中但未達到可重新整理的高度
     */
    @Override
    public void onNormal() {
    }
    /**
     * 拖拽中且已達到可重新整理的高度
     */
    @Override
    public void onCanRefresh() {
    }
    /**
     * 釋放後，重新整理中
     */
    @Override
    public void onRefreshing() {
    }
    /**
     * 重新整理完成
     */
    @Override
    public void onComplete() {
    }
    /**
     * 拖拽過程的回調，可用于邊拖拽邊慢慢切換圖檔狀态（動畫）
     *
     * @param top 拖拽高度
     */
    @Override
    public void onDragging(int top) {
    }
}
具體實作可以參考com.droven.swipeupdatelayout.view.SwipeUpdateHeaderView

然後在布局檔案上添加屬性：

<!--必須是完整的類名，否則無法執行個體化-->
    app:headerView="com.droven.swipeupdatelayout.demo.MyHeaderView"

上拉加載更多

添加footerXxx相關屬性，再加上上拉加載的監聽就能使用上拉加載功能，如果沒有加上監聽是不會有上拉加載功能的。

swipeUpdateLayout.setOnLoadMoreListener(new SwipeUpdateLayout.OnLoadMoreListener() {
        @Override
        public void onLoadMore() {
            
        }
    });

    //資料擷取之後調用以下方法關閉頭部視圖
    swipeUpdateLayout.loadComplete();

    //動态開啟和關閉上拉加載更多功能
    swipeUpdateLayout.setLoadMoreEnable(enable);

使用預設底部視圖樣式

使用預設底部視圖隻需要添加如下屬性

app:footerView="SwipeUpdateFooterView"

修改預設底部視圖樣式 

<!--删之-->
    app:footerView="SwipeUpdateFooterView"

    <!--加之，具體解釋看上面的屬性清單-->
    app:footerIcon=""<!--laoding效果為360度旋轉-->
    app:footerNormalText=""
    app:footerCanLoadText=""
    app:footerLoadingText=""
    app:footerCompleteText=""

自定義底部視圖

建立一個繼承com.droven.swipeupdatelayout.base.BaseRefreshView的類并實作其中的抽象方法，與頭部視圖同理，不在此複述了。然後在布局檔案上添加屬性：

<!--必須是完整的類名，否則無法執行個體化-->
    app:footerView="com.droven.swipeupdatelayout.demo.MyFooterView"
具體實作可以參考com.droven.swipeupdatelayout.view.SwipeUpdateFooterView

空資料/錯誤資訊視圖

添加emptyXxx或failXxx相關屬性，當RecyclerView沒有資料的時候會自動出現空資料視圖，當網絡錯誤或其他問題出錯的時候調用如下方法就會出現錯誤資訊視圖：

swipeUpdateLayout.loadFail("網錯錯誤");
    swipeUpdateLayout.loadFail();//當設定了app:failText=""之後才有效
空資料視圖和錯誤資訊視圖為同一個View，隻不過是不同情況展示不同内容

添加監聽實作點選視圖重新加載的回調

swipeUpdateLayout.setOnReloadListener(new SwipeUpdateLayout.OnReloadListener() {
        @Override
        public void onReload() {
            
        }
    });

使用預設空資料/錯誤資訊視圖樣式

使用預設底部視圖隻需要添加如下屬性

app:emptyView="SwipeUpdateEmptyView"

修改預設空資料/錯誤資訊視圖樣式 

<!--删之-->
    app:emptyView="SwipeUpdateEmptyView"

    <!--加之，具體解釋看上面的屬性清單-->
    app:emptyIcon=""
    app:emptyText=""
    app:failIcon=""
    app:failText=""<!--調用swipeUpdateLayout.loadFail()才有效-->

自定義空資料/錯誤資訊視圖

建立一個繼承com.droven.swipeupdatelayout.base.BaseEmptyView的類并實作其中的抽象方法，如：

package com.droven.swipeupdatelayout.demo;

import android.view.View;
import com.droven.swipeupdatelayout.base.BaseEmptyView;

public class MyEmptyView extends BaseEmptyView {
    /**
     * layout的ID
     */
    @Override
    protected int layoutResId() {
        return 0;
    }
    /**
     * 初始化view
     */
    @Override
    protected void initView(View view) {

    }
    /**
     * 點選重新加載的ViewId，傳回null或空數組則不實作點選重新加載
     */
    @Override
    public View[] clickToReloadView() {
        return new View[0];
    }
    /**
     * 沒資料時
     */
    @Override
    public void onEmpty() {

    }
    /**
     * 加載出錯時
     */
    @Override
    public void onFail(String errMsg) {

    }
}
具體實作可以參考com.droven.swipeupdatelayout.view.SwipeUpdateEmptyView

然後在布局檔案上添加屬性：

<!--必須是完整的類名，否則無法執行個體化-->
    app:emptyView="com.droven.swipeupdatelayout.demo.MyEmptyView"

加載視圖

添加loadingXxx相關屬性，在RecyclerView第一等待加載資料和點選空資料/錯誤資訊視圖重新加載的時候，都會自動展示加載動畫，當資料加載完或空資料或調用了加載出錯的方法之後會自動消失，無需調用方法處理。

使用預設加載視圖樣式

使用預設底部視圖隻需要添加如下屬性

app:loadingView="SwipeUpdateLoadingView"

修改預設加載視圖樣式 

<!--删之-->
    app:loadingView="SwipeUpdateLoadingView"

    <!--加之，具體解釋看上面的屬性清單-->
    app:loadingIcon=""<!--laoding效果為360度旋轉-->
    app:loadingText=""

自定義加載視圖

建立一個繼承com.droven.swipeupdatelayout.base.BaseLoadingView的類并實作其中的抽象方法，如：

package com.droven.swipeupdatelayout.demo;

import android.view.View;
import com.droven.swipeupdatelayout.base.BaseLoadingView;

public class MyLoadingView extends BaseLoadingView {
    /**
     * layout的ID
     */
    @Override
    protected int layoutResId() {
        return 0;
    }
    /**
     * 初始化view
     */
    @Override
    protected void initView(View view) {

    }
    /**
     * 首次加載/重新加載中
     */
    @Override
    public void onLoading() {

    }
    /**
     * 首次加載/重新加載完成
     */
    @Override
    public void onLoadFinished() {

    }
}
具體實作可以參考com.droven.swipeupdatelayout.view.SwipeUpdateLoadingView

然後在布局檔案上添加屬性：

<!--必須是完整的類名，否則無法執行個體化-->
    app:laodingView="com.droven.swipeupdatelayout.demo.MyLoadingView"

總結

SwipeUpdateLayout提供了以上所述的功能且能夠靈活地自定義視圖，但是目前隻能作用于RecyclerView上，後期會考慮做适配和優化。

源碼和demo已經上傳到Gayhub，有興趣的可以看看和提issue

https://github.com/LiZhuoFan/SwipeUpdateLayout

自定義View android
上一篇: 圓弧的動畫效果實作
下一篇: 使用ListView實作下拉重新整理效果

繼續閱讀