2. 程式人生 > >View的學習筆記(三)_自己造輪子_一個帶header重新整理頭和footer載入腳的

View的學習筆記(三)_自己造輪子_一個帶header重新整理頭和footer載入腳的

阿新 • • 發佈：2018-11-16

帶重新整理指示item的RecyclerView

實現效果

重新整理前
下拉重新整理
上拉載入
使用方法
可以指定控制元件大小,預設的RecyclerView會填充指定的大小
自定義屬性就三條

		<!--可以指定列表控制元件為ListView,賦值1-->
		<attr name="view_type" format="integer"/>
		<!--指定自己的header/footer佈局-->
        <attr name
 
="header_layout" format="reference"/>
        <attr name="footer_layout" format="reference"/>
        <!--可以自行控制需要顯示header/還是footer-->
        <attr name="header_visible" format="boolean"/>
        <attr name="footer_visible" format="boolean"/>

資料檔案
專案目錄
專案結構分三部分,自己引用即可
專案地址:

github連線點這裡

專案結構

造輪子的經驗總結

因為控制元件結構簡單,子View數量也比較小,因此初始化/測量/擺放都很簡單
難點在於滑動事件的處理

設計思路

在學習筆記裡寫到

觸控事件的處理,首先判斷需要攔截的情況,在onInterceptTouchEvent(MotionEvent ev)中對應情況下返回true
然後在onTounch()中處理具體的滑動和手指擡起事件

但是自己去寫的時候不知道如何下手,經常寫的時候信心滿滿,測試的時候心態就崩了.
後來自己整理了下思路
1.響應式設計.不用考慮所有情況,只對符合我要求的情況,進行處理
2.面向過程式設計.假設要觸發一個事件,我們從down手指按下事件分發開始,到move滑動處理,最後up手指彈起處理,一步一步考慮
對於觸控事件比較複雜,而需要的效果比較簡單,可以考慮響應式思路,比如本專案,如果只需要處理下拉的彈出,其他都不管,那麼只需要監聽view滑動到底端事件分發處理,滑動彈出footer即可
但是如果我們需要考慮的情況多了,就需要從使用者的角度,來考慮,使用者的上拉或者下拉操作目的是什麼
下面開始記錄我的設計過程,這只是最終的思路,實際上,在這個思路之前,我已經更換了兩種思路,都不太理想

事件分發處理

因為我們的列表zview自身是可以滑動的,所以如果不對事件分發進行處理,介面效果就是一個單純的滑動View,header/fpooter不會彈出
因此我們需要處理事件分發,什麼樣的情況下,需要把螢幕滑動事件分配給ViewGroup整體滑動
header的彈出/取消
header的作用是提示使用者重新整理.何時header該彈出,何時header該消失呢
彈出
當列表View滑動到頂端的時候,如果使用者還在向上滑動,我們就認為是想重新整理,此時彈出header,
取消
當header已經彈出,使用者向下拉的時候,是想要取消重新整理,我們就取消header
另外,當後臺重新整理邏輯處理完以後,也需要我們取消header

footer的原理類似
列表View滑動到頂端/底端的監聽如何開始呢
我是下面這樣設計的

				int distance = (int) (lastY - ev.getRawY());
                if (Math.abs(distance) > mSlop) {
                    if (contentView instanceof RecyclerView) {
                        LinearLayoutManager manager = (LinearLayoutManager) ((RecyclerView) contentView).getLayoutManager();
                        if (manager != null) {
//                       判斷滑動到頂端,開始下拉
                            if (headerVisible&&manager.findFirstCompletelyVisibleItemPosition() == 0 && distance < 0) {
                                return true;
                            }
//                     判斷滑動到底端,開始上拉
                            if (footerVisible&&(manager.findLastCompletelyVisibleItemPosition() + 1) == Objects.requireNonNull(((RecyclerView) contentView).getAdapter()).getItemCount() && distance > 0) {
                                return true;
                            }
//                       只要當前顯示了header/footer,就攔截事件
                            if (headerRefreshCompleted&&headerVisible){
                                return true;
                            }
                            if (footerRefreshCompleted&&footerVisible){
                                return true;
                            }
                        }
                    }
				}

首先判斷是否在頂端,根據完全露出的item是否是第一條決定,但是view載入的時候預設顯示的就是第一條.所以,我們需要排除預設顯示的情況,預設顯示的時候,如果滑動方向向下,那自然就是view自己的滑動,所以加上方向的限制.就能把滑動到頂端/底端跟正常顯示到頂端/底端的事件區分開
然後,footerRefreshCompleted || headerRefreshCompleted是什麼意思呢
想象一下,如果header正常顯示了,使用者希望取消header這個時候,開始下拉(distance>0),這個時候也需要處理,因此我們定義了一個標誌值,當header顯示的時候,headerRefreshCompleted為true/footer顯示的時候footerRefreshCompleted 為true.只要這兩個標誌有一個為真,就繼續分發事件
這樣事件分發就搞定了

然後就是難點,滑動事件處理
我們按照滑動距離來分類,我們用Scroller類來輔助滑動
scroller類的實現如下

 @Override
 ...
 //初始化
 mScroller = new Scroller(context);
        autoScrollRange = 0.6;
        ...
        //實現自動滑動的方法(格式可以是固定的)
    public void computeScroll() {
        super.computeScroll();
        if (mScroller.computeScrollOffset()) {
            this.scrollTo(mScroller.getCurrX(), mScroller.getCurrY());
            invalidate();
        }
    }
    //使用,實現滑動返回原位
     mScroller.startScroll(getScrollX(), getScrollY(), 0, -getScrollY());
      invalidate();

在onTouchEvent()中首先支援滑動

 public boolean onTouchEvent(MotionEvent event) {
        float distance = lastY - event.getRawY();
        switch (event.getAction()) {
            case MotionEvent.ACTION_MOVE:
                lastY = event.getRawY();
//                預設可滑動,在move中處理檢視內滑動事件,在up中處理檢視外滑動事件
                scrollBy(0, (int) distance);
...
}

然後還是在case MotionEvent.ACTION_MOVE中,當檢視在我們的viewGroup範圍內滑動時
如果滑動方向向下,那麼分兩種情況考慮,一個是使用者想要下拉顯示header,另一種是想要取消footer
我們開始新增效果,如果滑動的距離超過dheader/footer的高度的一定範圍,那麼久呼叫Scroller類,來輔助滑動,顯示/隱藏完整的header/footer
如果滑動方向向上,那麼也是分兩種情況,一個是使用者想要上拉顯示footer,另一種是想要取消header

//                在檢視內滑動處理
                if (getScrollY() >= -headerHeight && getScrollY() <= footerHeight) {
//                向上滑動,a想要上拉顯示footer,b想要上拉取消header
                    if (distance > 0) {
//                        a要上拉顯示footer,超過角標的autoScrollRange就自動下拉顯示
                        if (!footerRefreshCompleted && getScrollY() >= footerHeight * autoScrollRange) {
                            Log.i(TAG, "onTouchEvent: 自動上拉");
                            mScroller.startScroll(getScrollX(), getScrollY(), 0, footerHeight - getScrollY());
                            footerRefreshCompleted = true;
                            if (mListener != null) {
                                mListener.footerRefreshStart(footer, contentView);
                            } else {
                                Log.e(TAG, "onTouchEvent: mListener=null");
                            }
                        }
//                      b想要上拉取消header,超過角標的autoScrollRange就自動下拉顯示
                        if (headerRefreshCompleted && getScrollY() < 0) {
                            Log.i(TAG, "onTouchEvent: 取消下拉");
                            mScroller.startScroll(getScrollX(), getScrollY(), 0, -getScrollY(), 1000);
                            headerRefreshCompleted = false;
                            if (mListener != null) {
                                mListener.headerRefreshCancel();
                            } else {
                                Log.e(TAG, "onTouchEvent: mListener=null");
                            }
                        }
                    }
                    //                    向下滑動,a想要下拉顯示header,b想要下拉取消footer
                    if (distance < 0) {

//                  a判定下拉顯示header,超過角標的autoScrollRange就自動下拉顯示
                        if (!headerRefreshCompleted && getScrollY() <= -headerHeight * autoScrollRange) {
                            Log.i(TAG, "onTouchEvent: 自動下拉");
                            mScroller.startScroll(getScrollX(), getScrollY(), 0, -headerHeight - getScrollY());
                            headerRefreshCompleted = true;
                            headerRefreshStart();
                        }

//                  b判定想要上拉,取消上拉footer,超過角標的autoScrollRange就自動取消下拉footer
                        if (footerRefreshCompleted && getScrollY() > 0) {
                            Log.i(TAG, "onTouchEvent: 取消上拉");
                            mScroller.startScroll(getScrollX(), getScrollY(), 0, -footerHeight, 1000);
                            footerRefreshCompleted = false;
                            if (mListener != null) {
                                mListener.footerRefreshCancel();
                            } else {
                                Log.e(TAG, "onTouchEvent: mListener=null");
                            }
                        }
                    }
                }
                invalidate();

記得在處理完的最後,新增invalidate(),Scroller類才生效
這樣處理完了以後,已經可以自己彈出/隱藏header/footer了,但是還有兩點不足的地方需要改進
1當滑動的距離超過自動顯示/隱藏範圍時,自動顯示/隱藏,那麼當沒有超過的時候,顯示的就是不完整的header/footer怎麼辦
2當滑動的範圍超過了我們定義的GroupView的範圍時,會在header/footer的外圍露出大片的空白
解決辦法,在手指擡起事件中,如果滑動的範圍超過了我們定義的GroupView的範圍,那麼久預設顯示邊界為header頂端或者footer底端,呼叫Scroller滾動即可;滑動的距離沒有超過自動顯示/隱藏範圍時,我們直接呼叫Scroller類隱藏即可

case MotionEvent.ACTION_UP:
//                如果移動範圍超過檢視頂端範圍,那麼在手指擡起時,返回到檢視最頂端
                if (getScrollY() < -headerHeight) {
                    mScroller.startScroll(getScrollX(), getScrollY(), 0, -headerHeight - getScrollY(), 500);
                }
//                如果移動範圍超過檢視底端範圍,那麼在手指擡起時,返回到檢視最底端
                if (getScrollY() > footerHeight) {
                    mScroller.startScroll(getScrollX(), getScrollY(), 0, footerHeight - getScrollY());
                }
//                如果在檢視範圍內,手指擡起時,沒有觸發自動顯示header/footer,就自動隱藏
                if (getScrollY() >= -headerHeight && getScrollY() <= footerHeight) {
//                    自動隱藏header
                    if (!headerRefreshCompleted && getScrollY() > -headerHeight * autoScrollRange) {
                        mScroller.startScroll(getScrollX(), getScrollY(), 0, -getScrollY());
                    }
//                    自動隱藏footer
                    if (!footerRefreshCompleted && getScrollY() < footerHeight * autoScrollRange) {
                        mScroller.startScroll(getScrollX(), getScrollY(), 0, -getScrollY());
                    }
                }
                invalidate();
                break;

##新增邏輯處理完後,取消header/footer的方法

 public void onHeaderRefreshCompleted() {
        headerRefreshCompleted = false;
        mScroller.startScroll(getScrollX(), getScrollY(), 0, -getScrollY());
        invalidate();
    }

    public void onFooterRefreshCompleted() {
        footerRefreshCompleted = false;
        mScroller.startScroll(getScrollX(), getScrollY(), 0, -getScrollY());
        invalidate();
    }

相關推薦

View的學習筆記(三)_自己造輪子_一個帶header重新整理頭和footer載入腳的

帶重新整理指示item的RecyclerView 實現效果 造輪子的經驗總結 設計思路 事件分發處理 實現效果 使用方法 可以指定控制元件大小,預設的RecyclerView會填充指定的大小 自定義屬性就

JVM學習筆記三_異常初步

Java堆溢位 說明：Java堆用於儲存物件例項，只要不斷建立物件。且保證GC Roots到物件之間有可達的路徑來避免垃圾回收機制來清除這些物件，那麼在物件數量達到最大堆的容量限制之後就會產生記憶體溢位異常。 重點：模擬不斷建立物件簡單，但是需要保證創建出來的物件不被GC掉。同樣的，出錯時可能的狀況也是如

自己造輪子：深度學習dataloader自己實現

自己造輪子：深度學習dataloader自己實現 **摘要：**因為計算機效能的限制，所有的深度學習框架都是採用批量隨機梯度下降，所以每次計算都要讀取batch_size的資料。這裡以自己實現的方式介紹深度學習框架實現批量讀取資料的原理，不涉及具體細節和一些邏輯，只注重大體流程和原理。

Linux學習筆記(三)：系統執行級與執行級的切換

查看 用戶操作 回車 water hat ntsysv tde 文件表 config 1.Linux系統與其它的操作系統不同，它設有執行級別。該執行級指定操作系統所處的狀態。Linux系統在不論什麽時候都執行於某個執行級上，且在不同的執行級上執行的程序和服務都不同，所要

【Unity 3D】學習筆記三十：遊戲元素——遊戲地形

nbsp 3d遊戲 strong 直觀 分辨率 == 摩擦力 fill 世界 遊戲地形 在遊戲的世界中，必然會有非常多豐富多彩的遊戲元素融合當中。它們種類繁多。作用也不大同樣。一般對於遊戲元素可分為兩種：經經常使用。不經經常使用。經常使用的元素是遊戲中比較重要的元素。一

MYSQL學習筆記三：日期和時間函數

div content minute name top fonts table hmm 指定 MYSQL學習筆記三：日期和時間函數 1. 獲取當前日期的函數和獲取當前時間的函數 /*獲取當前日期的函數和獲取當前時間的函數。將日期以‘YYYY-MM-DD‘或者’YYYYM

Hadoop權威指南學習筆記三

支持 第三方 handle line src factory 模式 多個 重要 HDFS簡單介紹 聲明：本文是本人基於Hadoop權威指南學習的一些個人理解和筆記，僅供學習參考。有什麽不到之處還望指出，一起學習一起進步。 轉載請註明：http://blog.cs

NLTK學習筆記(三):NLTK的一些工具

ast 關註 code 值範圍 通過 自動 ive 叠代器 emma 主要總結一下簡單的工具：條件頻率分布、正則表達式、詞幹提取器和歸並器。 條件分布頻率 《自然語言學習》很多地方都用到了條件分布頻率，nltk提供了兩種常用的接口：FreqDist 和 Condit

Tomcat學習筆記(三)

containe 請求 container connect 技術 http 簡單 img 容器 Tomcat連接器 tomcat連接器是tomcat的一個核心組件，在tomcat4中的實現原理如下 1.實現Connector接口 2.創建Reques

mybatis學習筆記(三）-- 優化數據庫連接配置

bsp pro 新建 數據 配置信息 onf ron XML oca 原來直接把數據庫連接配置信息寫在conf.xml配置中，如下 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE configura

Odoo10學習筆記三：模型（結構化的應用數據）、視圖（用戶界面設計）

其他 描述 用戶界面 列表 支持 字段 界面設計 允許 學習 一：模型 1：創建模型 模型屬性：模型類可以使用一些屬性來控制它們的一些行為： _name ：創建odoo模型的內部標識符，必含項。 _description ：當用戶界面顯示模型時，一個方便用戶的模型記錄標題。

tensorflow學習筆記(三)：實現自編碼器

sea start ear var logs cos soft 編碼 red 黃文堅的tensorflow實戰一書中的第四章，講述了tensorflow實現多層感知機。Hiton早年提出過自編碼器的非監督學習算法，書中的代碼給出了一個隱藏層的神經網絡，本人擴展到了多層，改進

CSS學習筆記三：自定義單選框，復選框，開關

sla checked 移動 transform 第一個 16px 位移 block back 一點一點學習CCS，這次學習了如何自定義單選框，復選框以及開關。 一、單選框 1、先寫好body裏面的樣式，先寫幾個框 1 <body> 2 <d

git 學習筆記三 （windows環境）

clas 環境 check pre div nbsp windows name cnblogs 分支管理 查看分支 git branch 創建dev分支 git branch <name> 切換到dev分支 git checkout <name&

遊戲開發學習筆記三

nor scrip 筆記 nsrunloop posit ppr 遊戲開發 tor http sdk%E6%9B%B4%E6%96%B0%E4%B8%8D%E6%88%90%E5%8A%9F%E6%B1%82%E5%A4%A7%E7%A5%9E%E5%B8%AE%E5%BF

學習筆記(三）

type 指向 des 函數 句柄 釋放內存 服務類 pat play OpenSCManager：function OpenSCManager(lpMachineName, lpDatabaseName: PChar;dwDesiredAccess: DWORD): SC

Android學習筆記三：用Intent串聯activity

conda data activity setresult result 意圖 prot 其他 cte 一：Intent Intent可以理解為 意圖。 我們可以通過創建intent實例來定義一個跳轉意圖，意圖包括：要跳轉到哪個頁面、需要傳遞什麽

redis 學習筆記三

緩解 實時 代理 水平擴展 命令連接 事件 都沒有 分數 能力 一、redis 復制 數據庫復制指的是發生在不同數據庫實例之間，單向的信息傳播的行為，通常由被復制方和復制方組成，被復制方和復制方之間建立網絡連接，復制方式通常為被復制方主動將數據發送到復制方，復制方接收到數據

Java學習筆記三---unable to launch

world 學習筆記 .com image 新工程 hello unable sta ava 環境配置好後，在eclipse下編寫HelloWorld程序： ①創建新工程 ②創建.java文件，命名為HelloWorld ③在源文件中添加main方法，代碼如下： p

vue學習筆記(三)：vue-cli腳手架搭建

node log ins 版本 返回 ges 技術分享 安裝webpack webp 一：安裝vue-cli腳手架： 1：為了確保你的node版本在4.*以上，輸入 node -v 查看本機node版本，低於4請更新。 2：輸入： npm install -g vue-c