ItemDecoration實踐之分割線與粘性頭部

RecyclerView提供了良好的設(shè)計哩盲,將各部分功能的實現(xiàn)都拆解開艰管,方便自定義滓侍,雖然加大了使用難度,但是卻大大的增加了可擴展性牲芋,稍微會使用之后撩笆,擴展起來非常的舒心。

項目地址

功能:適用于以下幾種布局的分割線和粘性頭部

  • LinearLayoutManager
  • GridLayoutManager (水平方向粘性頭部暫未實現(xiàn))
  • StaggeredGridLayoutManager (粘性頭部暫未實現(xiàn))

對于分割線缸浦,與大多數(shù)的實現(xiàn)不同夕冲,在GridLayoutManager和StaggeredGridLayoutManager布局時是平分Item的,分割線大的時候就能發(fā)現(xiàn)

先上效果圖

image.png
image.png

注意:其中這三種布局的分割線不管是水平還是垂直方向都是支持的裂逐,但是帶有header的只支持LinearLayoutManager的水平和垂直以及GridLayoutManager垂直方向

還可以下載Demo在手機上預(yù)覽一下歹鱼。

使用

1、在根目錄的build.gradle中加入如下配置

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

2卜高、在要用的module中增加如下引用

dependencies {
    ...
    implementation 'com.github.arvinljw:ItemDecorationHelper:v1.0.5'
    implementation 'com.android.support:recyclerview-v7:'.concat(supportVersion)
}

其中supportVersion換成自己app中的版本即可

3弥姻、為RecyclerView添加ItemDecoration,通過ItemDecorationFactory生成包括分割線的ItemDecoration和粘性頭部的ItemDecoration掺涛,后者包含了分割線

  • ItemDecorationFactory.DividerBuilder 分割線
itemDecoration = new ItemDecorationFactory.DividerBuilder()
        .dividerHeight(2)
        .dividerColor(Color.parseColor("#D8D8D8"))
        .showLastDivider(false)//默認是true
        .build(recyclerView);
recyclerView.addItemDecoration(itemDecoration);
  • ItemDecorationFactory.StickyDividerBuilder 粘性頭部
itemDecoration = new ItemDecorationFactory.StickyDividerBuilder()
        .dividerHeight(2)
        .dividerColor(Color.parseColor("#D8D8D8"))
        .callback(new StickyDividerCallback() {
            @Override
            public GroupData getGroupData(int position) {
                //生成GroupData
                return data;
            }
            @Override
            public View getStickyHeaderView(int position) {
                    //...生成headerView
                return headerView;
            }
        }).build(recyclerView);
recyclerView.addItemDecoration(itemDecoration);

其中如果是粘性頭部庭敦,需要自己生成GroupData和自定義View的設(shè)置,GroupData需要設(shè)置薪缆,分組標題秧廉,在分組中的位置以及該分組的長度;至于如何實現(xiàn)矮燎,需要根據(jù)數(shù)據(jù)格式定義不同的邏輯定血,可以參照demo中的實現(xiàn)邏輯去獲取,該類的getItemDecoration方法诞外。

對于分割線沒啥說的澜沟,可以設(shè)置分割線的顏色和大小。

默認頭部

其中對于顯示分組頭部峡谊,有一個默認實現(xiàn)DefaultHeaderCallBack茫虽,只需要重寫分組數(shù)據(jù)即可刊苍。例如:

headerCallBack = new DefaultHeaderCallBack(this) {
    @Override
    public GroupData getGroupData(int position) {
        //生成GroupData
        return data;
    }
};

注意如果添加在Adapter中添加了emptyView,那么這個時候其實是沒有數(shù)據(jù)項的濒析,所以在getGroupData方法中返回null即可

頭部點擊事件

為頭部增加點擊事件正什,其中回調(diào)中的position是當前header所在的item的實際位置。

((BaseStickyDividerItemDecoration) itemDecoration).setOnHeaderClickListener(new OnHeaderClickListener() {
    @Override
    public void onHeaderClicked(int position) {
        //TODO
    }
});

注意:在界面被銷毀時号杏,調(diào)用headerCallBack的onDestroy方法婴氮,避免內(nèi)存泄漏。

代碼混淆

-keep class net.arvin.itemdecorationhelper.**{*;}

TODO

  • 優(yōu)化實現(xiàn)方式

原理

繼承ItemDecoration盾致,然后重寫getItemOffsetsonDraw方法主经,實現(xiàn)分割線的繪制,通過重寫onDrawOver實現(xiàn)粘性頭部庭惜。

原理很簡單罩驻,就是首先讓itemView在你需要的方向偏移,例如left护赊,top惠遏,right,botton骏啰;然后再在onDraw或者onDrawOver方法中獲取到當前屏幕的view节吮,并根據(jù)他們的位置,按照偏移的邏輯在相應(yīng)區(qū)域繪制即可判耕。借用一張圖课锌,感謝【Android】RecyclerView:打造懸浮效果

image

很直觀祈秕,可以看到不同內(nèi)容繪制在不同層次渺贤,位置重合的話,上層會覆蓋下層的內(nèi)容请毛。

具體的實現(xiàn)全是根據(jù)這個邏輯計算繪制志鞍。其中為了保持平分內(nèi)容,將分割線拆分方仿,如圖:感謝RecyclerView的 GridItemDecoration等分itemView

image

具體的難點就在這兩個位置固棚。

至于粘性頭部,核心邏輯就是對數(shù)據(jù)的分組以及頭部的偏移計算和繪制仙蚜。也是萬變不離其中此洲。具體的實現(xiàn)請參考源碼,含有一定的注釋委粉。

感謝

RecyclerView 懸浮/粘性頭部——StickyHeaderDecoration

【Android】RecyclerView:打造懸浮效果

RecyclerView的 GridItemDecoration等分itemView

在實現(xiàn)過程中參考了很多文章呜师,如果沒有注明來源的,麻煩指出來贾节,會直接加上引用來源的汁汗。

源碼

項目地址

之后文章的更新都以項目的README為準衷畦。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市知牌,隨后出現(xiàn)的幾起案子祈争,更是在濱河造成了極大的恐慌,老刑警劉巖角寸,帶你破解...
    沈念sama閱讀 218,858評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件菩混,死亡現(xiàn)場離奇詭異,居然都是意外死亡扁藕,警方通過查閱死者的電腦和手機墨吓,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,372評論 3 395
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來纹磺,“玉大人,你說我怎么就攤上這事亮曹¢涎睿” “怎么了?”我有些...
    開封第一講書人閱讀 165,282評論 0 356
  • 文/不壞的土叔 我叫張陵照卦,是天一觀的道長式矫。 經(jīng)常有香客問我,道長役耕,這世上最難降的妖魔是什么采转? 我笑而不...
    開封第一講書人閱讀 58,842評論 1 295
  • 正文 為了忘掉前任,我火速辦了婚禮瞬痘,結(jié)果婚禮上故慈,老公的妹妹穿的比我還像新娘。我一直安慰自己框全,他們只是感情好察绷,可當我...
    茶點故事閱讀 67,857評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著津辩,像睡著了一般拆撼。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上喘沿,一...
    開封第一講書人閱讀 51,679評論 1 305
  • 那天闸度,我揣著相機與錄音,去河邊找鬼蚜印。 笑死莺禁,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的窄赋。 我是一名探鬼主播睁宰,決...
    沈念sama閱讀 40,406評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼肪获,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了柒傻?” 一聲冷哼從身側(cè)響起孝赫,我...
    開封第一講書人閱讀 39,311評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎红符,沒想到半個月后青柄,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,767評論 1 315
  • 正文 獨居荒郊野嶺守林人離奇死亡预侯,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,945評論 3 336
  • 正文 我和宋清朗相戀三年致开,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片萎馅。...
    茶點故事閱讀 40,090評論 1 350
  • 序言:一個原本活蹦亂跳的男人離奇死亡双戳,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出糜芳,到底是詐尸還是另有隱情飒货,我是刑警寧澤,帶...
    沈念sama閱讀 35,785評論 5 346
  • 正文 年R本政府宣布峭竣,位于F島的核電站塘辅,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏皆撩。R本人自食惡果不足惜扣墩,卻給世界環(huán)境...
    茶點故事閱讀 41,420評論 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望扛吞。 院中可真熱鬧呻惕,春花似錦、人聲如沸滥比。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,988評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽守呜。三九已至型酥,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間查乒,已是汗流浹背弥喉。 一陣腳步聲響...
    開封第一講書人閱讀 33,101評論 1 271
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留玛迄,地道東北人由境。 一個月前我還...
    沈念sama閱讀 48,298評論 3 372
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親虏杰。 傳聞我的和親對象是個殘疾皇子讥蟆,可洞房花燭夜當晚...
    茶點故事閱讀 45,033評論 2 355

推薦閱讀更多精彩內(nèi)容