Android RecyclerView打造懸浮效果的實(shí)現(xiàn)代碼
本文介紹了Android RecyclerView懸浮效果，分享給大家，具體如下：
先看個(gè)效果
這是一個(gè)City列表，每個(gè)City都有所屬的Province，需要在滑動(dòng)的時(shí)候，將對(duì)應(yīng)的Province懸浮在頂部。懸浮頂部的Province需要根據(jù)列表的滑動(dòng)而適當(dāng)改變位置，實(shí)現(xiàn)“頂上去”的效果。
實(shí)現(xiàn)思路：
- 利用RecyclerView.ItemDecoration繪制Province（就像繪制分割線一樣）
- 同一組的City，只繪制一個(gè)Province
- 計(jì)算偏移，將當(dāng)前Province固定在頂部
- 根據(jù)列表滑動(dòng)，實(shí)現(xiàn)偏移效果
ItemDecoration
既然是利用RecyclerView.ItemDecoration實(shí)現(xiàn)的懸浮效果，那么有必要了解下它。
ItemDecoration字面意思：Item的裝飾。是的！是裝飾！不只是畫(huà)分割線。
其實(shí)ItemDecoration的功能非常強(qiáng)大，而我們平時(shí)只是用它來(lái)實(shí)現(xiàn)分割線的效果（至少我是這樣）。因此，可能很多同學(xué)認(rèn)為ItemDecoration就是用來(lái)繪制分割線的。其實(shí)不然，ItemDecoration的功能遠(yuǎn)不止是分割線的繪制。
先看下RecyclerView.ItemDecoration的源碼（部分）：
public static abstract class ItemDecoration {
...
public void onDraw(Canvas c, RecyclerView parent, State state) {
onDraw(c, parent);
}
public void onDrawOver(Canvas c, RecyclerView parent, State state) {
onDrawOver(c, parent);
}
public void getItemOffsets(Rect outRect, View view, RecyclerView parent, State state) {
getItemOffsets(outRect, ((LayoutParams) view.getLayoutParams()).getViewLayoutPosition(),
parent);
}
}
里面是我們常用的三個(gè)方法：
- getItemOffsets：通過(guò)Rect為每個(gè)Item設(shè)置偏移，用于繪制Decoration。
- onDraw：通過(guò)該方法，在Canvas上繪制內(nèi)容，在繪制Item之前調(diào)用。（如果沒(méi)有通過(guò)getItemOffsets設(shè)置偏移的話，Item的內(nèi)容會(huì)將其覆蓋）
- onDrawOver：通過(guò)該方法，在Canvas上繪制內(nèi)容,在Item之后調(diào)用。(畫(huà)的內(nèi)容會(huì)覆蓋在item的上層)
RecyclerView 的背景、onDraw繪制的內(nèi)容、Item、onDrawOver繪制的內(nèi)容，各層級(jí)關(guān)系如下：
層級(jí)關(guān)系
繪制分割線
先看看一般的分割線繪制。
定義分割線高度
private int mHeight = 5; //分割線高度
通過(guò)getItemOffsets預(yù)留空間
@Override
public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
super.getItemOffsets(outRect, view, parent, state);
int position = parent.getChildAdapterPosition(view);
if (position != 0) {
//第一個(gè)item預(yù)留空間
outRect.top = mHeight;
}
}
然后在onDraw中繪制
@Override
public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) {
super.onDraw(c, parent, state);
final int left = parent.getLeft();
final int right = parent.getRight();
final int childCount = parent.getChildCount();
for (int i = 0; i < childCount; i++) {
final View childView = parent.getChildAt(i);
final int bottom = childView.getTop();
final int top = bottom - mHeight;
c.drawRect(left, top, right, bottom, mPaint);
}
}
獲取當(dāng)前RecyclerView的Item數(shù)量，遍歷每個(gè)Item。在對(duì)應(yīng)的位置繪制一個(gè)高度為mHeight的矩形 ，從而實(shí)現(xiàn)分割線的效果。
（詳情代碼見(jiàn)底部鏈接）
打造懸浮效果
這是一個(gè)城市列表，根據(jù)省份分組，相同的城市只會(huì)顯示一個(gè)省份。滾動(dòng)城市列表時(shí)，省份會(huì)懸浮在頂部。效果如下：
實(shí)現(xiàn)
由于需要懸浮效果，所以需要在onDrawOver中繪制分組。
定義一個(gè)interface，根據(jù)position通過(guò)接口方法getGroupName獲取當(dāng)前省名（由Activity實(shí)現(xiàn)）
public interface GroupListener {
String getGroupName(int position);
}
創(chuàng)建StickyDecoration繼承RecyclerView.ItemDecoration
定義isFirstInGroup方法。根據(jù)前一個(gè)省份，判斷當(dāng)前是否為新的省份
//判斷是不是組中的第一個(gè)位置
//根據(jù)前一個(gè)組名，判斷當(dāng)前是否為新的組
private boolean isFirstInGroup(int pos) {
if (pos == 0) {
return true;
} else {
String prevGroupId = getGroupName(pos - 1);
String groupId = getGroupName(pos);
return !TextUtils.equals(prevGroupId, groupId);
}
}
通過(guò)position，對(duì)比上一個(gè)省份名稱，判斷當(dāng)前省是否為第一個(gè)
重寫(xiě)getItemOffsets方法，為懸浮欄預(yù)留空間
@Override
public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
super.getItemOffsets(outRect, view, parent, state);
int pos = parent.getChildAdapterPosition(view);
String groupId = getGroupName(pos);
if (groupId == null) return;
//只有是同一組的第一個(gè)才顯示懸浮欄
if (pos == 0 || isFirstInGroup(pos)) {
outRect.top = mGroupHeight;
}
}
只有第一個(gè)Item或者新的省份才為懸浮欄預(yù)留空間
重寫(xiě)onDrawOver方法（重點(diǎn)）
@Override
public void onDrawOver(Canvas c, RecyclerView parent, RecyclerView.State state) {
super.onDrawOver(c, parent, state);
final int itemCount = state.getItemCount();
final int childCount = parent.getChildCount();
final int left = parent.getLeft() + parent.getPaddingLeft();
final int right = parent.getRight() - parent.getPaddingRight();
String preGroupName; //標(biāo)記上一個(gè)item對(duì)應(yīng)的Group
String currentGroupName = null; //當(dāng)前item對(duì)應(yīng)的Group
for (int i = 0; i < childCount; i++) {
View view = parent.getChildAt(i);
int position = parent.getChildAdapterPosition(view);
preGroupName = currentGroupName;
currentGroupName = getGroupName(position);
if (currentGroupName == null || TextUtils.equals(currentGroupName, preGroupName))
continue;
int viewBottom = view.getBottom();
float top = Math.max(mGroupHeight, view.getTop());//top 決定當(dāng)前頂部第一個(gè)懸浮Group的位置
if (position + 1 < itemCount) {
//獲取下個(gè)GroupName
String nextGroupName = getGroupName(position + 1);
//下一組的第一個(gè)View接近頭部
if (!currentGroupName.equals(nextGroupName) && viewBottom < top) {
top = viewBottom;
}
}
//根據(jù)top繪制group
c.drawRect(left, top - mGroupHeight, right, top, mGroutPaint);
Paint.FontMetrics fm = mTextPaint.getFontMetrics();
//文字豎直居中顯示
float baseLine = top - (mGroupHeight - (fm.bottom - fm.top)) / 2 - fm.bottom;
c.drawText(currentGroupName, left + mLeftMargin, baseLine, mTextPaint);
}
}
通過(guò)變量preGroupId和currentGroupId來(lái)保存當(dāng)前分組名和上一個(gè)分組名。當(dāng)前Item與上一個(gè)Item為同一個(gè)分組時(shí)，跳過(guò)該Item的繪制。
其中代碼：
float top = Math.max(mGroupHeight, view.getTop());
根據(jù)當(dāng)前Item的位置確定繪制分組的位置。top將在mGroupHeight和view.getTop()中取最大值，也就是說(shuō)top將不會(huì)小于mGroupHeight，這樣就能實(shí)現(xiàn)吸頂效果。
其中代碼：
if (!currentGroupName.equals(nextGroupName) && viewBottom < top) {
top = viewBottom;
}
當(dāng)下個(gè)分組的頂部（當(dāng)前Item的底部viewBottom可近似認(rèn)為下個(gè)Item的頂部）距離RecyclerView頂部小于top時(shí)，偏移當(dāng)前分組位置。實(shí)現(xiàn)下一組上滑時(shí)候，當(dāng)前分組上移；上一組下滑的時(shí)候，當(dāng)前分組下移。
最后計(jì)算baseLine，并繪制背景和文字。
到目前為止，一個(gè)帶有懸浮功能的列表就實(shí)現(xiàn)了。
（詳細(xì)代碼見(jiàn)底部鏈接）
進(jìn)階
當(dāng)我們利用ItemDecoration實(shí)現(xiàn)文字的懸浮的時(shí)候，是不是還可以搞點(diǎn)事情~ ~我有個(gè)大膽的想法
只有文字的懸浮怎么行！我還希望可以再來(lái)個(gè)icon？再來(lái)幾個(gè)TextView？來(lái)個(gè)自定義布局？那就來(lái)個(gè)自定義布局吧。
實(shí)現(xiàn)
實(shí)現(xiàn)的原理跟上面一樣，由于需要自定義布局，所以需要在接口中添加一個(gè)獲取View的方法。
定義PowerGroupListener
public interface PowerGroupListener {
String getGroupName(int position);
View getGroupView(int position);
}
相比之前，多了個(gè)getGroupView方法，用來(lái)獲取View。
在onDrawOver中繪制
@Override
public void onDrawOver(Canvas c, RecyclerView parent, RecyclerView.State state) {
...
for (int i = 0; i < childCount; i++) {
...
//根據(jù)position獲取View
View groupView = mGroupListener.getGroupView(position);
if (groupView == null) return;
ViewGroup.LayoutParams layoutParams = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, mGroupHeight);
groupView.setLayoutParams(layoutParams);
groupView.setDrawingCacheEnabled(true);
groupView.measure(
View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED),
View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED));
//指定高度、寬度的groupView
groupView.layout(0, 0, right, mGroupHeight);
groupView.buildDrawingCache();
Bitmap bitmap = groupView.getDrawingCache();
c.drawBitmap(bitmap, left, top - mGroupHeight, null);
}
}
在原來(lái)的基礎(chǔ)上做了點(diǎn)修改，通過(guò)接口的getGroupView方法獲取需要繪制的分組View，將得到的View繪制到指定位置。
效果：
（詳細(xì)代碼見(jiàn)底部鏈接）
源碼鏈接
已封裝成庫(kù)，歡迎來(lái)提Issues
repositories {
jcenter()// If not already there
}
dependencies {
compile 'com.gavin.com.library:stickyDecoration:1.0.2'
}
詳細(xì)用法級(jí)源碼請(qǐng)看Github
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Android開(kāi)發(fā)中Activity創(chuàng)建跳轉(zhuǎn)及傳值的方法
這篇文章主要介紹了Android開(kāi)發(fā)中Activity創(chuàng)建跳轉(zhuǎn)及傳值的方法的相關(guān)資料,需要的朋友可以參考下2016-05-05
Flutter實(shí)現(xiàn)可以縮放拖拽的圖片示例代碼
這篇文章主要給大家介紹了關(guān)于利用Flutter實(shí)現(xiàn)可以縮放拖拽的圖片的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用Flutter具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
Android平臺(tái)生成二維碼并實(shí)現(xiàn)掃描 & 識(shí)別功能
這篇文章主要介紹了Android平臺(tái)生成二維碼并實(shí)現(xiàn)掃描 & 識(shí)別功能的相關(guān)資料,需要的朋友可以參考下2016-06-06
android獲取相冊(cè)圖片和路徑的實(shí)現(xiàn)方法
這篇文章主要介紹了android獲取相冊(cè)圖片和路徑的實(shí)現(xiàn)方法，本文介紹的是Android4.4后的方法，感興趣的小伙伴們可以參考一下2016-04-04
Android RecyclerView設(shè)置下拉刷新的實(shí)現(xiàn)方法
這篇文章主要介紹了Android RecyclerView設(shè)置下拉刷新的實(shí)現(xiàn)方法,希望通過(guò)本文通過(guò)SwipeRefreshLayout方式實(shí)現(xiàn)下拉刷新，需要的朋友可以參考下2017-10-10
Android實(shí)戰(zhàn)教程第二篇之簡(jiǎn)單實(shí)現(xiàn)兩種進(jìn)度條效果
這篇文章主要為大家詳細(xì)介紹了Android實(shí)戰(zhàn)教程第二篇，簡(jiǎn)單實(shí)現(xiàn)兩種進(jìn)度條效果,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-11-11
Android中RecyclerView實(shí)現(xiàn)商品分類功能
這篇文章主要為大家詳細(xì)介紹了Android中RecyclerView實(shí)現(xiàn)商品分類功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-02-02
Android編程開(kāi)發(fā)中的正則匹配操作示例
這篇文章主要介紹了Android編程開(kāi)發(fā)中的正則匹配操作,結(jié)合具體實(shí)例形式分析了Android針對(duì)手機(jī)號(hào)、郵箱及IP的正則匹配操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-06-06
Android開(kāi)發(fā)中Activity之間切換出現(xiàn)短暫黑屏的解決方法
這篇文章主要介紹了Android開(kāi)發(fā)中Activity之間切換出現(xiàn)短暫黑屏的解決方法,較為詳細(xì)的分析了Android中Activity之間切換出現(xiàn)短暫黑屏的原因與解決方法,需要的朋友可以參考下2016-02-02
Android應(yīng)用中使用及實(shí)現(xiàn)系統(tǒng)“分享”接口實(shí)例
為了應(yīng)用的推廣、傳播，很多的應(yīng)用中都有“分享”功能，這篇文章主要介紹了Android應(yīng)用中使用及實(shí)現(xiàn)系統(tǒng)“分享”接口實(shí)例，有興趣的可以了解一下。2016-12-12