一 概述
這是這個系列的第二篇文章欧芽,第一篇
ItemDecoration深入解析與實(shí)戰(zhàn)(一)——源碼分析 是偏原理性的涝涤,而這篇是偏應(yīng)用性的句占。沒看過上一篇文章對閱讀此文也基本沒多大影響哨免,不過了解原理會加深對本文Demo的理解茎活。
這篇文章將會實(shí)現(xiàn)上篇文章最后說的幾個實(shí)戰(zhàn)點(diǎn),包括:
- (
LinearLayoutManager
) 最簡單的分割線實(shí)現(xiàn) - (
LinearLayoutManager
) 自定義分割線實(shí)現(xiàn) - (
GridLayoutManager
) 網(wǎng)格布局下的均分等距間距(分割線) - (
StaggeredLayoutManger
) 瀑布流布局下均分等距間距(分割線) - (
GridLayoutManager
) 網(wǎng)格布局下實(shí)現(xiàn)表格式邊框 - 打造粘性頭部
看完這6點(diǎn)標(biāo)題琢唾,應(yīng)該會知道這篇文章的篇幅會稍長载荔,不過因?yàn)槭菍?shí)戰(zhàn)類型的文章,所以也不會特別枯燥采桃。
建議
1. 你需要具備怎樣的前提知識
- 閱讀本文應(yīng)該有一定的 RecyclerView 使用基礎(chǔ)
- 對 View 的基礎(chǔ)繪制使用有了解(沒有影響也不大)
2. 閱讀順序
- 從頭到尾懒熙,這有個難易順序,讀下去會比較順暢
- 由于文章較長普办,可以挑上面6點(diǎn)其中一個感興趣的進(jìn)行閱讀工扎,拉到下方每個點(diǎn)的第一部分都會有一個實(shí)現(xiàn)圖,可以觀看實(shí)際效果決定是否想要閱讀
二 實(shí)戰(zhàn)
1. (LinearLayoutManager
) 最簡單的分割線實(shí)現(xiàn)
(1) 實(shí)現(xiàn)效果
(2) 具體實(shí)現(xiàn)
像這種單一顏色的分割線實(shí)現(xiàn)起來很簡單衔蹲,就是一行代碼:
public class SimpleDividerDecoration extends RecyclerView.ItemDecoration {
@Override
public void getItemOffsets(@NonNull Rect outRect, @NonNull View view,
@NonNull RecyclerView parent, @NonNull RecyclerView.State state) {
outRect.set(0,0,0,5);
}
}
這個5對應(yīng)的就是outRect.bottom
肢娘,看過這系列的上篇文章就能容易理解,這個跟在 ItemView
的布局文件中增加一個 marginBottom
是一樣的效果的舆驶。不過這樣默認(rèn)是沒有顏色的橱健,這個分割線的顏色就取決于 RecyclerView
的背景顏色。如我們的效果圖的實(shí)現(xiàn):
RecyclerView rvTest = findViewById(R.id.rv_test);
rvTest.addItemDecoration(new SimpleDividerDecoration());
這種實(shí)現(xiàn)很簡單沙廉,但是缺點(diǎn)也很突出拘荡,因?yàn)樗且蕾囉?RecyclerView 的背景的,而如果我們?yōu)?RecyclerView 設(shè)置一個padding,就會變成這樣:
就是說萬一我們的需求是有padding,而且背景顏色要跟分割線顏色不同那就沒辦法了撬陵。如果要解決這一問題珊皿,就要看第2點(diǎn)网缝。
2. (LinearLayoutManager
) 自定義分割線實(shí)現(xiàn)
(1) 實(shí)現(xiàn)效果
(2) 使用
由于 support 包中已經(jīng)有了一個默認(rèn)的實(shí)現(xiàn),所以就沒有自己寫了蟋定,這是官方自帶的 ItemDecoration
實(shí)現(xiàn)類粉臊,先看下怎么用:
rvTest.setLayoutManager(new LinearLayoutManager(this));
DividerItemDecoration decoration = new DividerItemDecoration(this,DividerItemDecoration.VERTICAL);
decoration.setDrawable(getResources().getDrawable(R.drawable.divider_gradient));
rvTest.addItemDecoration(decoration);
在示例中,我為這個Decoration添加了一個 Drawable
驶兜,這個 Drawable
就是上圖的一個分割線效果维费,如果沒有設(shè)置這個,那么將會有一個默認(rèn)的灰色分割線:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:endColor="#19f5e7"
android:startColor="#b486e2" />
<size android:height="4dp" />
</shape>
分割線的高度就是這個Drawable
的高促王。
(3) 具體實(shí)現(xiàn)
用法很簡單犀盟,但正所謂知其然,還要知其所以然蝇狼,我們看一下這個 DividerItemDecoration
里面的具體實(shí)現(xiàn)是怎樣的:
-
先看
getItemOffsets
方法的具體實(shí)現(xiàn)
// DividerItemDecoration.java
private Drawable mDivider;
@Override
public void getItemOffsets(Rect outRect, View view, RecyclerView parent,
RecyclerView.State state) {
if (mDivider == null) {
outRect.set(0, 0, 0, 0);
return;
}
if (mOrientation == VERTICAL) {
outRect.set(0, 0, 0, mDivider.getIntrinsicHeight()); //注釋1
} else {
outRect.set(0, 0, mDivider.getIntrinsicWidth(), 0);
}
}
直接看注釋1阅畴,mOrientation == VERTICA
的情況,在 getItemOffsets
方法中迅耘,也是用了我們第1個實(shí)戰(zhàn)點(diǎn)中最簡單的那種方式贱枣,只不過他的高度變成了mDivider.getIntrinsicHeight()
而已,這個mDivider
就是我們 setDrawable
中設(shè)置的一個 Drawable
對象颤专,如果沒有設(shè)置纽哥,那就會有一個默認(rèn)的。
-
再看
onDraw
方法
@Override
public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) {
if (parent.getLayoutManager() == null || mDivider == null) {
return;
}
if (mOrientation == VERTICAL) {
drawVertical(c, parent);
} else {
drawHorizontal(c, parent);
}
}
這里也分為兩種情況栖秕,我們直接看 VERTICAL
下的春塌,即 drawVertical(c, parent)
方法:
private void drawVertical(Canvas canvas, RecyclerView parent) {
canvas.save();
final int left;
final int right;
//noinspection AndroidLintNewApi - NewApi lint fails to handle overrides.
if (parent.getClipToPadding()) {
left = parent.getPaddingLeft();
right = parent.getWidth() - parent.getPaddingRight();
canvas.clipRect(left, parent.getPaddingTop(), right,
parent.getHeight() - parent.getPaddingBottom());
} else {
left = 0;
right = parent.getWidth();
}
/***************分割***************/
final int childCount = parent.getChildCount();
for (int i = 0; i < childCount; i++) {
final View child = parent.getChildAt(i);
parent.getDecoratedBoundsWithMargins(child, mBounds); //注釋1
final int bottom = mBounds.bottom + Math.round(child.getTranslationY());
final int top = bottom - mDivider.getIntrinsicHeight();
mDivider.setBounds(left, top, right, bottom);
mDivider.draw(canvas);
}
canvas.restore();
}
我們先看注釋分割線的上邊,邏輯很簡單簇捍,主要就是為了拿到 Child 最大可用空間的左右邊界只壳,如果我們沒有設(shè)置,parent.getClipToPadding()
默認(rèn)是返回 ture
的暑塑,即最大可用空間的要減去RecyclerView
的padding,這是為了讓padding不被分割線覆蓋吼句。
再看注釋分割線的下邊,這里遍歷了所有的 Child 事格。先看注釋1這句代碼惕艳,parent.getDecoratedBoundsWithMargins(child, mBounds)
,這個方法有什么用呢,其實(shí)看名稱就能大概猜出來,這個方法可以拿到
child邊界+decoration + margin
所組成的Rect的邊界值mbounds
驹愚,即下圖里面的橙色區(qū)域的外邊框所對應(yīng)的值远搪。
注意:此圖不嚴(yán)謹(jǐn),詳細(xì)內(nèi)容請看這系列的上一篇文章
然后便會將mbounds
的 bottom 跟 top ,以及 上面得到的 left 跟 right 設(shè)置到 mDivider
的邊界中么鹤,就獲得的我們上圖的紅色虛線邊框的矩形终娃,如果我們沒有為 itemView 設(shè)置 margin味廊,那么就會得到綠色虛線邊框的范圍蒸甜,再將這部分畫出來棠耕,就得到了我們想要的分割線了。
3. (GridLayoutManager) 網(wǎng)格布局下的均分等距間距(分割線)
GridSpaceDecoration
(1) 實(shí)現(xiàn)效果
效果如上圖柠新,解決了下面的常見問題:
- 某些 item 占用多個 span 情況
- item 之前的間距相等
- item 的寬高可以保持一致窍荧,不會有某個 item 被壓扁的情況
- 上下左右的邊框可以與中間的分割線寬度不一致,每個都可以單獨(dú)設(shè)置
(2) 使用方法
public GridSpaceDecoration(int horizontal, int vertical){
//...
}
public GridSpaceDecoration(int horizontal, int vertical, int left, int right){
//...
}
/**
* @param horizontal 內(nèi)部水平距離(px)
* @param vertical 內(nèi)部豎直距離(px)
* @param left 最左邊距離(px)恨憎,默認(rèn)為0
* @param right 最右邊距離(px),默認(rèn)為0
* @param top 最頂端距離(px),默認(rèn)為0
* @param bottom 最底端距離(px),默認(rèn)為0
*/
public GridSpaceDecoration(int horizontal, int vertical, int left, int right, int top, int bottom){
//...
}
該類提供了三個構(gòu)造方法蕊退,直接設(shè)置相應(yīng)的值,然后 add 到
RecyclerView
中即可憔恳。
(3) 具體實(shí)現(xiàn)
step1: 分析
要實(shí)現(xiàn)的功能很清晰瓤荔,就是要解決上面的常見問題。其中钥组,第2输硝、3點(diǎn)比較麻煩,為什么呢?先分析一下
先看下上圖程梦,當(dāng)使用 GridLayoutManager
時点把,GridLayoutManager
會將每個 Item 的最大可用空間平均分配開來,就像上圖黑線所對應(yīng)的三個框就是3個 Item 的最大可分配空間屿附。橙色區(qū)域就是 Decoration 設(shè)置的值跟 item 的 margin 郎逃,如果 margin 為0,那么橙色區(qū)域便是在 getItemOffsets
方法中設(shè)置的值(下面簡稱 offsets)挺份。綠色虛線所圍成的區(qū)域就是我們 itemView 的實(shí)際空間褒翰。
通過上圖,當(dāng)我們?yōu)?item 設(shè)置相同的間距時匀泊,會發(fā)現(xiàn) item 1 的空間被壓縮了影暴,那么怎么解決這一問題呢?
- 每個item 寬度相同
- item 之前的間距一樣
我們要解決的就是上面的問題
-
先討論第1點(diǎn)探赫,因?yàn)槊總€ item 的最大可用空間(黑色框格子)是一致的型宙,所以想要讓 item 的寬度一樣,就是讓每個 item 的 offsets 保持一致伦吠。我們可以得到下面的公式:
sizeAvg = (left + right + center * (spanCount-1)) / spanCount
其中妆兑,left 、right 為最左毛仪、左右邊間距搁嗓,center 為中間間距,spanCount 為每一行的 span 個數(shù)箱靴,就可以得出每個 item 需要設(shè)置的 offsets 大小 sizeAvg腺逛,這樣就可以保證每個 item 的寬度一致(均分)
-
再看第2點(diǎn),我們要保證每個中間間距都一樣衡怀,左右間距達(dá)到我們設(shè)置的大小棍矛。首先安疗,最左邊的間距是已經(jīng)確定了的,即 left,那么最左邊 item 的右邊 right1 就可以得出為 sizeAvg - left,第二個 item 左邊間距 left2 就是 center - right1 同理可以推出接下來的 item 够委,看下圖會更清晰:
image然后把中間的實(shí)體線給去掉:
image就可以看到每個 item 的寬度一樣了荐类,而且間距也是符合預(yù)期的效果。(圖片是人工畫的茁帽,可能會有點(diǎn)小誤差)
step2 實(shí)現(xiàn)
上面分析完成玉罐,接著看看算法實(shí)現(xiàn):
@Override
public void getItemOffsets(@NonNull Rect outRect, @NonNull View view,
@NonNull RecyclerView parent, @NonNull RecyclerView.State state) {
if (isFirst) {
init(parent);
isFirst = false;
}
if (mManager.getOrientation() == LinearLayoutManager.VERTICAL) {
handleVertical(outRect, view, parent, state); //注釋1
} else {
handleHorizontal(outRect, view, parent, state);
}
}
很簡單,先是做了一點(diǎn)初始化潘拨,然后分兩個方向進(jìn)行不同處理吊输。直接看注釋1(orientation == VERTICAL)部分:
private void handleVertical(Rect outRect, View view, RecyclerView parent,
RecyclerView.State state) {
GridLayoutManager.LayoutParams lp = (GridLayoutManager.LayoutParams) view.getLayoutParams();
int childPos = parent.getChildAdapterPosition(view);
int sizeAvg = (int) ((mHorizontal * (mSpanCount - 1) + mLeft + mRight) * 1f / mSpanCount);
int spanSize = lp.getSpanSize();
int spanIndex = lp.getSpanIndex();
outRect.left = computeLeft(spanIndex, sizeAvg); //注釋1
if (spanSize == 0 || spanSize == mSpanCount) {
outRect.right = sizeAvg - outRect.left;
} else {
outRect.right = computeRight(spanIndex + spanSize - 1, sizeAvg);
}
outRect.top = mVertical / 2;
outRect.bottom = mVertical / 2;
if (isFirstRaw(childPos)) {
outRect.top = mTop;
}
if (isLastRaw(childPos)) {
outRect.bottom = mBottom;
}
}
這里的 sizeAvg 就是我們上面分析的那個 sizeAvg,然后再調(diào)用 computeLeft
方法(注釋1)铁追,先看下這個方法這怎樣的實(shí)現(xiàn):
private int computeLeft(int spanIndex, int sizeAvg) {
if (spanIndex == 0) {
return mLeft;
} else if (spanIndex >= mSpanCount / 2) {
//從右邊算起
return sizeAvg - computeRight(spanIndex, sizeAvg);
} else {
//從左邊算起
return mHorizontal - computeRight(spanIndex - 1, sizeAvg);
}
}
private int computeRight(int spanIndex, int sizeAvg) {
if (spanIndex == mSpanCount - 1) {
return mRight;
} else if (spanIndex >= mSpanCount / 2) {
//從右邊算起
return mHorizontal - computeLeft(spanIndex + 1, sizeAvg);
} else {
//從左邊算起
return sizeAvg - computeLeft(spanIndex, sizeAvg);
}
}
其實(shí)就是一個遞歸的算法璧亚,用的就是上面分析的邏輯,不清楚可以回去翻翻上面的圖脂信。計算出水平的 offsets 后癣蟋,后面的就很簡單了,接下來會判斷是否第一行跟最后一行來設(shè)置最頂部 top 跟最底部 bottom 狰闪。
這個GridSpaceDecoration
就算完成了疯搅,主要就是完成一個 offsets 的設(shè)置,如果想要自定義一些分割線的效果埋泵,可以繼承此類并實(shí)現(xiàn) onDraw
方法即可幔欧。
4. (StaggeredLayoutManger
) 瀑布流布局下均分等距間距(分割線)
(1) 實(shí)現(xiàn)效果
(3) 具體實(shí)現(xiàn)
這個實(shí)現(xiàn)跟上面的基本差不多,所以貼一下代碼就好了:
@Override
public void getItemOffsets(@NonNull Rect outRect, @NonNull View view,
@NonNull RecyclerView parent, @NonNull RecyclerView.State state) {
RecyclerView.LayoutManager originalManager = parent.getLayoutManager();
if (originalManager == null || !(originalManager instanceof StaggeredGridLayoutManager)) {
return;
}
StaggeredGridLayoutManager manager = (StaggeredGridLayoutManager) originalManager;
if (manager.getOrientation() == StaggeredGridLayoutManager.VERTICAL) {
handleVertical(outRect, view, parent);
} else {
handleHorizontal(outRect, view, parent);
}
}
private void handleVertical(@NonNull Rect outRect, @NonNull View view,
@NonNull RecyclerView parent) {
StaggeredGridLayoutManager.LayoutParams params =
(StaggeredGridLayoutManager.LayoutParams) view.getLayoutParams();
int spanIndex = params.getSpanIndex();
int adapterPos = parent.getChildAdapterPosition(view);
int sizeAvg = (int) ((mHorizontal * (mSpanCount - 1) + mLeft + mRight) * 1f / mSpanCount);
int left = computeLeft(spanIndex, sizeAvg);
int right = computeRight(spanIndex, sizeAvg);
outRect.left = left;
outRect.right = right;
outRect.top = mVertical / 2;
outRect.bottom = mVertical / 2;
if (isFirstRaw(adapterPos, spanIndex)) {
//第一行
outRect.top = mTop;
}
if (isLastRaw(spanIndex)) {
//最后一行
outRect.bottom = mBottom;
}
}
5. (GridLayoutManager
) 網(wǎng)格布局下實(shí)現(xiàn)表格式邊框
StaggeredSpaceDecoration
(1) 實(shí)現(xiàn)效果
(2) 具體實(shí)現(xiàn)
TableDecoration
TableDecoration
是繼承于上面第3點(diǎn)的 GridSpaceDecoration
來實(shí)現(xiàn)的丽声,GridSpaceDecoration
負(fù)責(zé)間距處理礁蔗,TableDecoration
則是將分割線給畫出來。所以主要就是 onDraw
方法的實(shí)現(xiàn):
先看構(gòu)造方法:
public class TableDecoration extends GridSpaceDecoration {
private Drawable mDivider;
private int mSize;
private Rect mBounds;
/**
* @param color 邊框顏色
* @param size 邊框大醒闵纭(px)
*/
public TableDecoration(@ColorInt int color, int size) {
super(size, size, size, size, size, size);
mSize = size;
mDivider = new ColorDrawable(color);
mBounds = new Rect();
}
}
就是將 item 的所有邊框都設(shè)置為 size ,然后根據(jù)傳進(jìn)來的 color 創(chuàng)建一個 Drawable 對象浴井。接著看 onDraw
方法:
@Override
public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) {
int childCount = parent.getChildCount();
for (int i = 0; i < childCount; i++) {
View view = parent.getChildAt(i);
draw(c, parent, view);
}
drawLast(c, parent);
}
先是遍歷所有 child ,然后進(jìn)行每個 child 的繪制:
private void draw(Canvas canvas, RecyclerView parent, View view) {
canvas.save();
int translationX = Math.round(view.getTranslationX());
int translationY = Math.round(view.getTranslationY());
int viewLeft = view.getLeft() + translationX;
int viewRight = view.getRight() + translationX;
int viewTop = view.getTop() + translationY;
int viewBottom = view.getBottom() + translationY;
parent.getDecoratedBoundsWithMargins(view, mBounds);
drawLeft(canvas, mBounds, viewLeft);
drawRight(canvas, mBounds, viewRight);
drawTop(canvas, mBounds, viewTop);
drawBottom(canvas, mBounds, viewBottom);
canvas.restore();
}
private void drawLeft(Canvas canvas, Rect bounds, int left) {
mDivider.setBounds(bounds.left, bounds.top, left, bounds.bottom);
mDivider.draw(canvas);
}
//...
邏輯也不難,跟第2點(diǎn) 自定義分割線實(shí)現(xiàn) 里的邏輯差不多霉撵,將我們設(shè)置的 item 的所有間距畫出來磺浙,這里就不細(xì)說了。畫完所有 item 后徒坡,還會在 onDraw
調(diào)用一個 drawLast
方法撕氧,我們先看看沒有調(diào)用這個方法是怎樣的效果:
可以很明顯看出,最后那里如果 item 不是鋪滿整一行的話喇完,會導(dǎo)致后面那里有一部分的缺陷伦泥,這個缺陷其實(shí)我們在第3點(diǎn) 網(wǎng)格布局下的均分等距間距(分割線) 即 GridSpaceDecoration
時分析過程中就可以發(fā)現(xiàn)了,由于每個 item 的上下左右 offsets 并不一定一致,所以會導(dǎo)致當(dāng)沒有最后一行有空缺的話就會造成一個邊框的缺陷不脯。
原因了解了府怯,那么問題解決應(yīng)該也不難:
private void drawLast(Canvas canvas, RecyclerView parent) {
View lastView = parent.getChildAt(parent.getChildCount() - 1);
int pos = parent.getChildAdapterPosition(lastView);
if (isLastColumn((GridLayoutManager.LayoutParams) lastView.getLayoutParams(),pos)){
return;
}
int translationX = Math.round(lastView.getTranslationX());
int translationY = Math.round(lastView.getTranslationY());
int viewLeft = lastView.getLeft() + translationX;
int viewRight = lastView.getRight() + translationX;
int viewTop = lastView.getTop() + translationY;
int viewBottom = lastView.getBottom() + translationY;
parent.getDecoratedBoundsWithMargins(lastView, mBounds);
canvas.save();
if (mManager.getOrientation() == LinearLayoutManager.VERTICAL) {
int contentRight = parent.getRight() - parent.getPaddingRight() - Math.round(parent.getTranslationX());
//空白區(qū)域上邊緣
mDivider.setBounds(mBounds.right, mBounds.top, contentRight, viewTop);
mDivider.draw(canvas);
//空白區(qū)域左邊緣
mDivider.setBounds(viewRight, viewTop, viewRight + mSize, mBounds.bottom);
mDivider.draw(canvas);
}else {
int contentBottom = parent.getBottom()-parent.getPaddingBottom()-Math.round(parent.getTranslationY());
//空白區(qū)域上邊緣
mDivider.setBounds(mBounds.left,viewBottom,mBounds.right,viewBottom+mSize);
mDivider.draw(canvas);
//空白區(qū)域左邊緣
mDivider.setBounds(mBounds.left,mBounds.bottom,viewLeft,contentBottom);
mDivider.draw(canvas);
}
canvas.restore();
}
主要邏輯就是將空缺出來的地方給補(bǔ)齊。
6. (GridLayoutManager
) 打造粘性頭部
StickHeaderDecoration
(1) 實(shí)現(xiàn)效果
(2) 具體實(shí)現(xiàn)
-
分析
上面的幾個例子中跨新,
getItemOffsets
以及onDraw
方法都用過了,Decoration 中三大方法還有一個onDrawOver
,這個效果就是用onDrawOver
來實(shí)現(xiàn)的坏逢。邏輯是這樣的:要實(shí)現(xiàn)這樣的效果域帐,我們需要在 RecyclerView 的頂部畫上一個 StickHeader,也就是我們的第一個 Child。 同時也有一個問題就是我們怎么知道哪個 item 是可以當(dāng)成頭部(StickHeader)的是整,這里我提供了一個接口來進(jìn)行判斷:
public interface StickProvider { boolean isStick(int position); }
這是
StickHeaderDecoration
的一個內(nèi)部實(shí)現(xiàn)類肖揣,需要將它的一個對象作為StickHeaderDecoration
的構(gòu)造方法的參數(shù),例如:StickHeaderDecoration decoration = new StickHeaderDecoration(new StickHeaderDecoration.StickProvider() { @Override public boolean isStick(int position) { return mList.get(position).type == StickBean.TYPE_HEADER; } }); //使用labamda會更簡潔 StickHeaderDecoration decoration = new StickHeaderDecoration(position -> mList.get(position).type == StickBean.TYPE_HEADER);
然后我們就可以通過這個
StickProvider
對象進(jìn)行判斷是否是需要顯示的頭部了浮入,接著看主要的方法onDrawOver
:public void onDrawOver(@NonNull Canvas c, @NonNull RecyclerView parent, @NonNull RecyclerView.State state) { RecyclerView.Adapter adapter = parent.getAdapter(); if (adapter == null || !(adapter instanceof StickProvider)) { return; } int itemCount = adapter.getItemCount(); if (itemCount == 1) { return; } //找到當(dāng)前的StickHeader對應(yīng)的position int currStickPos = currStickPos(parent); //注釋1 if (currStickPos == -1) { return; } c.save(); if (parent.getClipToPadding()) { //考慮padding的情況 c.clipRect(parent.getPaddingLeft(), parent.getPaddingTop(), parent.getWidth() - parent.getPaddingRight(), parent.getHeight() - parent.getPaddingBottom()); } int currStickType = adapter.getItemViewType(currStickPos); //當(dāng)前顯示的StickHeader相應(yīng)的ViewHolder龙优,先看有沒有緩存 RecyclerView.ViewHolder currHolder = mViewMap.get(currStickType); if (currHolder == null) { //沒有緩存則新生成 currHolder = adapter.createViewHolder(parent, currStickType); //主動測量并布局 measure(currHolder.itemView, parent); mViewMap.put(currStickType, currHolder); } adapter.bindViewHolder(currHolder, currStickPos); c.translate(currHolder.itemView.getLeft(), currHolder.itemView.getTop()); currHolder.itemView.draw(c); c.restore(); }
整體邏輯并不難,先是找到當(dāng)前要顯示的頭部事秀,這個頭部怎么來的呢彤断,看看注釋1處的
currStickPos
方法:private int currStickPos(RecyclerView parent) { int childCount = parent.getChildCount(); int paddingTop = parent.getPaddingTop(); int currStickPos = -1; for (int i = 0; i < childCount; i++) { //考慮到parent padding 的情況,第一個item有可能不可見情況 //從第1個child向后找 View child = parent.getChildAt(i); if (child.getTop() >= paddingTop) { break; } int pos = parent.getChildAdapterPosition(child); if (mProvider.isStick(pos)) { currStickPos = pos; } } if (currStickPos != -1) { return currStickPos; } for (int i = parent.getChildAdapterPosition(parent.getChildAt(0)) - 1; i >= 0; i--) { //從第一個child的前一個開始找 if (mProvider.isStick(i)) { return i; } } return -1; }
主要邏輯分為兩步:
- 因?yàn)楫?dāng) RecyclerView 設(shè)置 paddingTop 時易迹,第一個 Item 有可能是不可見的(被padding蓋住了)宰衙,所以第一步是從當(dāng)前第一個 child 開始向后找(child的top<paddingTop),當(dāng)找到時則返回對應(yīng)的 Adapter position,如果沒有找到睹欲,則進(jìn)行二步供炼。
- 第二步就是從第一個child的 Adapter 前一個 position 開始找,找到則返回窘疮,如果都沒找到袋哼,則返回-1。
再回到
onDrawOver
方法中闸衫,當(dāng)找到當(dāng)前要顯示的 Header 后涛贯,并會為他進(jìn)行測量,然后布局(具體看項(xiàng)目源碼),接著再調(diào)用 Adapter 的bindViewHolder
方法進(jìn)行數(shù)據(jù)綁定蔚出,最后再畫出來就ok了疫蔓,接著看看效果:
看到效果圖并不是我們想要達(dá)到的效果,很明顯缺少一個推動的效果身冬,那么這個怎么實(shí)現(xiàn)呢:
@Override
public void onDrawOver(@NonNull Canvas c, @NonNull RecyclerView parent,
@NonNull RecyclerView.State state) {
//...
//尋找下一個StickHeader
RecyclerView.ViewHolder nextStickHolder = nextStickHolder(parent, currStickPos);
if (nextStickHolder != null) {
RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) currHolder.itemView.getLayoutParams();
int bottom = parent.getPaddingTop() + params.topMargin + currHolder.itemView.getMeasuredHeight();
int nextStickTop = nextStickHolder.itemView.getTop();
//下一個StickHeader如果頂部碰到了當(dāng)前StickHeader的屁股衅胀,那么將當(dāng)前的向上推
if (nextStickTop < bottom && nextStickTop > 0) {
c.translate(0, nextStickTop - bottom);
}
}
adapter.bindViewHolder(currHolder, currStickPos);
c.translate(currHolder.itemView.getLeft(), currHolder.itemView.getTop());
currHolder.itemView.draw(c);
c.restore();
}
邏輯也不難,就是找到下一個 Header 酥筝,如果它碰到了上面那個的屁股的話滚躯,就將上面那個向上移動一點(diǎn),就可以形成我們的推動效果啦。
三 總結(jié)
從決定說要學(xué)習(xí)這個開始掸掏,到寫完Demo,寫完文章茁影,大概花了2個星期,其中有一些點(diǎn)也是深入了解了部分源碼丧凤,掉了不少頭發(fā)才總結(jié)出來募闲。其中也碰到不少坑,而且這個系列目前網(wǎng)上的文章比較雜愿待,很少有一個整體的分析浩螺,甚至有一些理解是錯的,所以這篇文章寫了相對詳細(xì)很多仍侥。
由于編者水平有限要出,文章難免會有錯漏的地方,如有發(fā)現(xiàn)农渊,懇請指正患蹂,如果有更好的實(shí)現(xiàn)思路也可以提供。
要看項(xiàng)目源碼或者Demo的戳這里