TwinklingRefreshLayout 小而強大的刷新控件，自帶順滑的越界回彈，v1.04 版

2501207950 發(fā)布于2019-08-16 10:28 / 1528人閱讀

摘要：為了達到更好的顯示效果，最好禁用系統(tǒng)的，如上給添加。頭部固定高度在此高度上顯示刷新狀態(tài)底部高度設(shè)置最大的越界高度靈活的設(shè)置是否禁用上下拉。是否允許越界回彈。表示向上拉下拉釋放時回調(diào)的狀態(tài)。

TwinklingRefreshLayout v1.04 版精心重構(gòu)，優(yōu)化 UI、刷新及越界動畫效果，修復(fù)眾多 bug，完美發(fā)布！
TwinklingRefreshLayout延伸了Google的SwipeRefreshLayout的思想,不在列表控件上動刀,而是使用一個ViewGroup來包含列表控件,以保持其較低的耦合性和較高的通用性。其主要特性有：

支持RecyclerView、ScrollView、AbsListView系列(ListView、GridView)、WebView以及其它可以獲取到scrollY的控件

支持加載更多

默認支持 越界回彈，隨手勢速度有不同的效果

可開啟沒有刷新控件的純凈越界回彈模式

setOnRefreshListener中擁有大量可以回調(diào)的方法

將Header和Footer抽象成了接口,并回調(diào)了滑動過程中的系數(shù),方便實現(xiàn)個性化的Header和Footer

Demo

下載Demo

You can download the Video for more details.

Music - ListView - FixedHeader

Food - RecyclerView - PureScrollMode

Science - GridView - SinaHeader

Photo - RecyclerView - BezierLayout

Story - ScrollView - GoogleDotView

Dribbble - WebView - FloatRefresh

使用方法 1.添加gradle依賴

將libray模塊復(fù)制到項目中,或者直接在build.gradle中依賴:

compile "com.lcodecorex:tkrefreshlayout:1.0.4"

2.在xml中添加TwinklingRefreshLayout

Android系統(tǒng)為了跟iOS不一樣，當界面OverScroll的時候會顯示一個陰影。為了達到更好的顯示效果，最好禁用系統(tǒng)的overScroll，如上給RecyclerView添加android:overScrollMode="never"。

3.在Activity或者Fragment中配置

TwinklingRefreshLayout不會自動結(jié)束刷新或者加載更多，需要手動控制

refreshLayout.setOnRefreshListener(new RefreshListenerAdapter(){
            @Override
            public void onRefresh(final TwinklingRefreshLayout refreshLayout) {
                new Handler().postDelayed(new Runnable() {
                    @Override
                    public void run() {
                        refreshLayout.finishRefreshing();
                    }
                },2000);
            }

            @Override
            public void onLoadMore(final TwinklingRefreshLayout refreshLayout) {
                new Handler().postDelayed(new Runnable() {
                    @Override
                    public void run() {
                        refreshLayout.finishLoadmore();
                    }
                },2000);
            }
        });
    }

使用finishRefreshing()方法結(jié)束刷新，finishLoadmore()方法結(jié)束加載更多。此處OnRefreshListener還有其它方法，可以選擇需要的來重寫。

如果你想進入到界面的時候主動調(diào)用下刷新，可以調(diào)用startRefresh()/startLoadmore()方法。

setWaveHeight、setHeaderHeight、setBottomHeight、setOverScrollHeight

setWaveHeight 設(shè)置頭部可拉伸的最大高度。

setHeaderHeight 頭部固定高度(在此高度上顯示刷新狀態(tài))

setBottomHeight 底部高度

setOverScrollHeight 設(shè)置最大的越界高度

setEnableRefresh、setEnableLoadmore

靈活的設(shè)置是否禁用上下拉。

setHeaderView(IHeaderView headerView)、setBottomView(IBottomView bottomView)

設(shè)置頭部/底部個性化刷新效果，頭部需要實現(xiàn)IHeaderView，底部需要實現(xiàn)IBottomView。

setEnableOverScroll

是否允許越界回彈。

setOverScrollTopShow、setOverScrollBottomShow、setOverScrollRefreshShow

是否允許在越界的時候顯示刷新控件，默認是允許的，也就是Fling越界的時候Header或Footer照常顯示，反之就是不顯示；可能有特殊的情況，刷新控件會影響顯示體驗才設(shè)立了這個狀態(tài)。

setPureScrollModeOn()

開啟純凈的越界回彈模式，也就是所有刷新相關(guān)的View都不顯示，只顯示越界回彈效果

setAutoLoadMore

是否在底部越界的時候自動切換到加載更多模式

addFixedExHeader

添加一個固定在頂部的Header(效果還需要優(yōu)化)

startRefresh、startLoadMore、finishRefreshing、finishLoadmore

setFloatRefresh(boolean)

支持切換到像SwipeRefreshLayout一樣的懸浮刷新模式了。

4.擴展屬性

tr_wave_height 頭部拉伸允許的最大高度

tr_head_height 頭部高度

tr_bottom_height 底部高度

tr_overscroll_height 允許越界的最大高度

tr_enable_loadmore 是否允許加載更多,默認為true

tr_pureScrollMode_on 是否開啟純凈的越界回彈模式

tr_overscroll_top_show - 否允許頂部越界時顯示頂部View

tr_overscroll_bottom_show 是否允許底部越界時顯示底部View

tr_enable_overscroll 是否允許越界回彈

其它說明 1.默認支持越界回彈，并可以隨手勢越界不同的高度

這一點很多類似SwipeRefreshLayout的刷新控件都沒有做到(包括SwipeRefreshLayout),因為沒有攔截下來的時間會傳遞給列表控件，而列表控件的滾動狀態(tài)很難獲取。解決方案就是給列表控件設(shè)置了OnTouchListener并把事件交給GestureDetector處理,然后在列表控件的OnScrollListener中監(jiān)聽View是否滾動到了頂部(沒有OnScrollListener的則采用延時監(jiān)聽策略)。

2.setOnRefreshListener大量可以回調(diào)的方法

onPullingDown(TwinklingRefreshLayout refreshLayout, float fraction) 正在下拉的過程

onPullingUp(TwinklingRefreshLayout refreshLayout, float fraction) 正在上拉的過程

onPullDownReleasing(TwinklingRefreshLayout refreshLayout, float fraction) 下拉釋放過程

onPullUpReleasing(TwinklingRefreshLayout refreshLayout, float fraction) 上拉釋放過程

onRefresh(TwinklingRefreshLayout refreshLayout) 正在刷新

onLoadMore(TwinklingRefreshLayout refreshLayout) 正在加載更多

其中fraction表示當前下拉的距離與Header高度的比值(或者當前上拉距離與Footer高度的比值)。

3.Header和Footer

BezierLayout(pic 4)

setWaveColor

setRippleColor

GoogleDotView(pic 5)

SinaRefreshView(pic 3)

setArrowResource

setTextColor

setPullDownStr

setReleaseRefreshStr

setRefreshingStr

ProgressLayout(SwipeRefreshLayout pic 6)

setProgressBackgroundColorSchemeResource(@ColorRes int colorRes)

setProgressBackgroundColorSchemeColor(@ColorInt int color)

setColorSchemeResources(@ColorRes int... colorResIds)

Footer

BottomProgressView(pic 2)

setNormalColor(@ColorInt int color)

setAnimatingColor(@ColorInt int color)

LoadingView(pic 3)

更多動效可以參考AVLoadingIndicatorView庫。

3.實現(xiàn)個性化的Header和Footer

相關(guān)接口分別為IHeaderView和IBottomView,代碼如下:

public interface IHeaderView {
    View getView();

    void onPullingDown(float fraction,float maxHeadHeight,float headHeight);

    void onPullReleasing(float fraction,float maxHeadHeight,float headHeight);

    void startAnim(float maxHeadHeight,float headHeight);

    void reset();
}

其中g(shù)etView()方法用于在TwinklingRefreshLayout中獲取到實際的Header,因此不能返回null。

實現(xiàn)像新浪微博那樣的刷新效果(有部分修改,具體請看源碼),實現(xiàn)代碼如下:

1.首先定義SinaRefreshHeader繼承自FrameLayout并實現(xiàn)IHeaderView方法

2.getView()方法中返回this

3.在onAttachedToWindow()或者構(gòu)造函數(shù)方法中獲取一下需要用到的布局

@Override
    protected void onAttachedToWindow() {
        super.onAttachedToWindow();

        if (rootView == null) {
            rootView = View.inflate(getContext(), R.layout.view_sinaheader, null);
            refreshArrow = (ImageView) rootView.findViewById(R.id.iv_arrow);
            refreshTextView = (TextView) rootView.findViewById(R.id.tv);
            loadingView = (ImageView) rootView.findViewById(R.id.iv_loading);
            addView(rootView);
        }
    }

4.實現(xiàn)其它方法

@Override
    public void onPullingDown(float fraction, float maxHeadHeight, float headHeight) {
        if (fraction < 1f) refreshTextView.setText(pullDownStr);
        if (fraction > 1f) refreshTextView.setText(releaseRefreshStr);
        refreshArrow.setRotation(fraction * headHeight / maxHeadHeight * 180);


    }

    @Override
    public void onPullReleasing(float fraction, float maxHeadHeight, float headHeight) {
        if (fraction < 1f) {
            refreshTextView.setText(pullDownStr);
            refreshArrow.setRotation(fraction * headHeight / maxHeadHeight * 180);
            if (refreshArrow.getVisibility() == GONE) {
                refreshArrow.setVisibility(VISIBLE);
                loadingView.setVisibility(GONE);
            }
        }
    }

    @Override
    public void startAnim(float maxHeadHeight, float headHeight) {
        refreshTextView.setText(refreshingStr);
        refreshArrow.setVisibility(GONE);
        loadingView.setVisibility(VISIBLE);
    }

5.布局文件

注意fraction的使用,比如上面的代碼refreshArrow.setRotation(fraction * headHeight / maxHeadHeight * 180)，fraction * headHeight表示當前頭部滑動的距離，然后算出它和最大高度的比例，然后乘以180，可以使得在滑動到最大距離時Arrow恰好能旋轉(zhuǎn)180度。

onPullingDown/onPullingUp表示正在下拉/正在上拉的過程。
onPullReleasing表示向上拉/下拉釋放時回調(diào)的狀態(tài)。
startAnim則是在onRefresh/onLoadMore之后才會回調(diào)的過程（此處是顯示了加載中的小菊花）

如上所示，輕而易舉就可以實現(xiàn)一個個性化的Header或者Footer。（更簡單的實現(xiàn)請參考Demo中的 TextHeaderView(圖四)）。

TODO

制作一個star相關(guān)的動效

CoordinateLayout及NestedScroll支持

帶視差效果的Header

更新日志 v1.04

新增功能

第二次重構(gòu)完成,將核心邏輯拆分為RefreshProcessor、AnimProcessor、OverScrollProcessor、CoProcessor

優(yōu)化越界策越，手勢決定越界高度

優(yōu)化界面流暢度

添加類似SwipeRefreshLayout的懸浮刷新功能(ProgressLayout)

滑到底部自動加載更多or回彈可選，默認為回彈

允許在結(jié)束刷新之前執(zhí)行一個動效：IHeadView.onFinish(animEndListener)

新增支持Header(Beta)

優(yōu)化BezierLayout、SinaRefreshLayout等的顯示并增加調(diào)節(jié)屬性

新增支持設(shè)置是否允許OverScroll

fixed bugs

修復(fù)刷新或加載更多時，列表item沒有鋪滿列表控件，滑動無效的問題

添加主動刷新/加載更多的方法：startRefresh(),startLoadMore()

修復(fù)頂部和底部越界高度不一致的問題

修復(fù)WebView在底部fling時不能越界的問題

動畫執(zhí)行時間與高度相關(guān)，動效更加柔和

v1.03

擴展了更多的屬性

修復(fù)Fragment回收導(dǎo)致的空指針異常問題

加入x方向判斷,減小了滑動沖突

優(yōu)化加載更多列表顯示問題

可以靈活的設(shè)置是否禁用上下拉

修復(fù)GridView滑動過程中出現(xiàn)的白條問題

Demo中添加輪播條展示

v1.02

修復(fù)加載更多列表控件的顯示問題

v1.01

支持了RecyclerView、ScrollView、AbsListView、WebView

支持越界回彈

支持個性化Header、Footer

ps：如有任何問題或者是建議，可以郵箱聯(lián)系我?。╨[email protected]）

云服務(wù)器 GPU云服務(wù)器下拉刷新控件 extjs刷新控件 js設(shè)置控件刷新強大的js

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/69847.html

發(fā)表評論

登陸后可評論

0條評論

2501207950

男|高級講師

我要關(guān)注我要私信

TA的文章

c語言是如何解析表達式語句"2+3*4；"的？

閱讀 1155·2021-11-24 09:38
人民日報評論：理性看待當前的元宇宙熱潮

閱讀 3264·2021-11-19 09:56
4000字詳細說明，推薦20個好用到爆的Pandas函數(shù)方法

閱讀 2980·2021-11-18 10:02
CSS Animations vs Web Animations API

閱讀 750·2019-08-29 12:50
zhilizhili-ui 2016 web app啟動界面制作

閱讀 2589·2019-08-28 18:30
CSS和Js一些筆記

閱讀 885·2019-08-28 18:10
NPM酷庫：numeral，格式化數(shù)字

閱讀 3698·2019-08-26 11:36
javascript 數(shù)組排序（sort,冒泡）

閱讀 2671·2019-08-23 18:23

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！