Android itemDecoration接口實(shí)現(xiàn)吸頂懸浮標(biāo)題
更新時(shí)間：2022年11月15日 16:19:44 作者：Super-B
這篇文章主要介紹了Android中使用itemdecoration實(shí)現(xiàn)吸頂懸浮標(biāo)題,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
方案
1.設(shè)置一個(gè)懸浮的視圖掛在recycleView頂部，隨著item的移動(dòng)位置，懸浮標(biāo)題自動(dòng)跟隨移動(dòng)或者是保持原地不動(dòng)。
2.使用recyclerView的ItemDecoration，給指定的item設(shè)置不同的itemDecoration，并且跟隨item的移動(dòng)而移動(dòng)或者保持不變。
本文采用第二種方式實(shí)現(xiàn)，效果圖：
了解ItemDecoration
這是個(gè)接口，一共有六個(gè)方法：
public static abstract class ItemDecoration {
/**
* Draw any appropriate decorations into the Canvas supplied to the RecyclerView.
* Any content drawn by this method will be drawn before the item views are drawn,
* and will thus appear underneath the views.
*
* @param c Canvas to draw into
* @param parent RecyclerView this ItemDecoration is drawing into
* @param state The current state of RecyclerView
*/
public void onDraw(Canvas c, RecyclerView parent, State state) {
onDraw(c, parent);
}
/**
* Draw any appropriate decorations into the Canvas supplied to the RecyclerView.
* Any content drawn by this method will be drawn after the item views are drawn
* and will thus appear over the views.
*
* @param c Canvas to draw into
* @param parent RecyclerView this ItemDecoration is drawing into
* @param state The current state of RecyclerView.
*/
public void onDrawOver(Canvas c, RecyclerView parent, State state) {
onDrawOver(c, parent);
}
/**
* Retrieve any offsets for the given item. Each field of <code>outRect</code> specifies
* the number of pixels that the item view should be inset by, similar to padding or margin.
* The default implementation sets the bounds of outRect to 0 and returns.
*
* <p>
* If this ItemDecoration does not affect the positioning of item views, it should set
* all four fields of <code>outRect</code> (left, top, right, bottom) to zero
* before returning.
*
* <p>
* If you need to access Adapter for additional data, you can call
* {@link RecyclerView#getChildAdapterPosition(View)} to get the adapter position of the
* View.
*
* @param outRect Rect to receive the output.
* @param view The child view to decorate
* @param parent RecyclerView this ItemDecoration is decorating
* @param state The current state of RecyclerView.
*/
public void getItemOffsets(Rect outRect, View view, RecyclerView parent, State state) {
getItemOffsets(outRect, ((LayoutParams) view.getLayoutParams()).getViewLayoutPosition(),
parent);
}
/**
* @deprecated
* Override {@link #onDrawOver(Canvas, RecyclerView, RecyclerView.State)}
*/
@Deprecated
public void onDrawOver(Canvas c, RecyclerView parent) {
}
/**
* @deprecated
* Override {@link #onDraw(Canvas, RecyclerView, RecyclerView.State)}
*/
@Deprecated
public void onDraw(Canvas c, RecyclerView parent) {
}
/**
* @deprecated
* Use {@link #getItemOffsets(Rect, View, RecyclerView, State)}
*/
@Deprecated
public void getItemOffsets(Rect outRect, int itemPosition, RecyclerView parent) {
outRect.set(0, 0, 0, 0);
}
}其中有三個(gè)方法是@deprecated的，那么我們只需要看以下三個(gè)方法：
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è)方法的意思是繪制分割線本身；
第二個(gè)方法是在item項(xiàng)目繪制完成之后進(jìn)行的繪制操作（這個(gè)會(huì)覆蓋在item上面）；
第三個(gè)方法是設(shè)置分割線的左間距，上間距，右間距，下間距，保存在outRect中。
如圖所示：
其中最底層黃色部分大小是getItemOffsets方法返回的itemDecoration的矩陣設(shè)置邊距寬度，onDraw方法根據(jù)設(shè)置的間距寬度來(lái)進(jìn)行繪制黃色區(qū)域，其中棕紅色部分是onDrawOver方法覆蓋繪制在item上層的部分。
利用ItemDecoration來(lái)繪制懸浮標(biāo)題欄
我們給每個(gè)需要title的item設(shè)置rect.top = titleHeight（標(biāo)題欄高度）;其他的間距可以先不考慮，不重要；
重寫(xiě)onDraw方法，繪制我們的itemDecoration標(biāo)題欄；
我們需要重寫(xiě)onDrawOver方法，在滑動(dòng)的時(shí)候去判斷，
1）如果頂部標(biāo)題區(qū)域是在該標(biāo)題的items范圍之內(nèi)的滑動(dòng)的話，那么我們需要覆蓋繪制一個(gè)處于recyclerView.getpaddingTop位置的title，這樣的話這個(gè)范圍內(nèi)滑動(dòng)就有一個(gè)懸停的標(biāo)題欄；
2）如果頂部的標(biāo)題欄區(qū)域恰好下面緊跟著下一個(gè)標(biāo)題欄，那么繼續(xù)向上滑動(dòng)的時(shí)候，需要下面的標(biāo)題欄把上面的標(biāo)題欄頂出界面之外。那么繪制的頂部標(biāo)題欄的起始位置就是所處的item.bottom - titleHeight的位置。
使用以上三個(gè)步驟就可以做出一個(gè)流暢并且定制化很高的懸浮標(biāo)題欄功能了。
代碼
class MyDecoration(context: Context): RecyclerView.ItemDecoration() {
var mPaint:Paint? = null
var mPaint2:Paint? = null
var mTextPaint:Paint? = null
var mTitleHeight:Int? = null
var mTitleHeight2:Int? = null
var mTitleTextSize:Float? = null
init {
mTitleHeight =
TypedValue.applyDimension(
TypedValue.COMPLEX_UNIT_DIP,
30f,
context.getResources().getDisplayMetrics()
).toInt()
mTitleHeight2 =
TypedValue.applyDimension(
TypedValue.COMPLEX_UNIT_DIP,
3f,
context.getResources().getDisplayMetrics()
).toInt()
mTitleTextSize =
TypedValue.applyDimension(
TypedValue.COMPLEX_UNIT_SP,
16f,
context.getResources().getDisplayMetrics()
)
mTextPaint = Paint()
mTextPaint?.let {
it.setTextSize(mTitleTextSize!!)
it.setAntiAlias(true)
it.setColor(Color.WHITE)
}
mPaint = Paint()
mPaint?.let {
it.setAntiAlias(true)
it.setColor(Color.RED)
}
mPaint2 = Paint()
mPaint2?.let {
it.setAntiAlias(true)
it.setColor(Color.BLUE)
}
}
/**
* recyclerView繪制onDraw -> item.onDraw -> onDrawOver
*/
override fun onDraw(c: Canvas, parent: RecyclerView, state: RecyclerView.State) {
for (index in 0 until parent.childCount) {
val childView = parent.getChildAt(index)
childView?.let {
val rect = Rect()
val position = parent.getChildAdapterPosition(it)
if (isTitleItem(position)) {
rect.top = childView.top - mTitleHeight!!
rect.bottom = childView.top
} else {
rect.top = childView.top - mTitleHeight2!!
rect.bottom = childView.top
}
rect.left = parent.paddingLeft
rect.right = parent.width - parent.paddingRight
if (isTitleItem(position)) {
mPaint?.let { it1 -> c.drawRect(rect, it1) }
mTextPaint?.let { it3 ->
c.drawText(
getTitleStr(position),
0f,
rect.top.toFloat() + (mTitleHeight?.div(2.00f)?:0f),
it3)}
} else {
mPaint2?.let { it1 -> c.drawRect(rect, it1) }
}
}
}
}
/**
* recyclerView繪制onDraw -> item.onDraw -> onDrawOver
* 繪制覆蓋在item上面的分割線效果
*/
override fun onDrawOver(c: Canvas, parent: RecyclerView, state: RecyclerView.State) {
val childView = parent.getChildAt(0)
var nextView:View? = null;
if (1 < parent.childCount) {
nextView = parent.getChildAt(1)
}
childView?.let {
val rect = Rect()
val position = parent.getChildAdapterPosition(it)
mTitleHeight?.let { height ->
if (nextView != null
&& it.bottom - height < parent.paddingTop
&& isTitleItem(parent.getChildAdapterPosition(nextView))
&& !isSameTitle(parent.getChildAdapterPosition(nextView),position)) {
rect.top = it.bottom - height
rect.bottom = it.bottom
} else {
rect.top = parent.paddingTop
rect.bottom = rect.top + height
}
}
rect.left = parent.paddingLeft
rect.right = parent.width - parent.paddingRight
mPaint?.let { it1 -> c.drawRect(rect, it1) }
mTextPaint?.let { it3 ->
c.drawText(
getTitleStr(position),
0f,
rect.top + (mTitleHeight?.div(2.00f)?:0f),
it3)}
}
}
/**
* 用于設(shè)置item周?chē)钠屏康?，?lèi)似于設(shè)置padding喝margin效果，
* 空出的效果用于繪制分割線
*/
override fun getItemOffsets(
outRect: Rect,
view: View,
parent: RecyclerView,
state: RecyclerView.State
) {
val position:Int = parent.getChildAdapterPosition(view)
if (position % 4 == 0) {
outRect.top = mTitleHeight!!
} else{
outRect.top = mTitleHeight2!!
}
}
fun isTitleItem(position: Int):Boolean {
return position % 4 == 0
}
fun getTitleStr(position: Int):String {
return "標(biāo)題：${position / 4}"
}
fun isSameTitle(position1: Int,position2: Int):Boolean {
return (position1 / 4) == (position2 / 4)
}
}到此這篇關(guān)于Android itemDecoration接口實(shí)現(xiàn)吸頂懸浮標(biāo)題的文章就介紹到這了,更多相關(guān)Android吸頂懸浮標(biāo)題內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了Android 獲取屏幕尺寸實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下2017-06-06
本文是安卓代碼分享的第一篇，給大家分享了一段簡(jiǎn)單的設(shè)置安卓全屏的代碼，后續(xù)還會(huì)為大家分享一些。2014-10-10
這篇文章主要介紹了Android完整Socket解決方案并通過(guò)代碼給大家做了實(shí)例分析，對(duì)此有興趣的朋友學(xué)習(xí)下。2018-02-02
在Flutter中制作翻轉(zhuǎn)卡片動(dòng)畫(huà)的完整實(shí)例代碼
最近Flutter的勢(shì)頭是越來(lái)越猛了,作為一個(gè)Android程序猿,我自然也是想要趕緊嘗試一把,這篇文章主要給大家介紹了關(guān)于在Flutter中制作翻轉(zhuǎn)卡片動(dòng)畫(huà)的相關(guān)資料,需要的朋友可以參考下2021-10-10
Android實(shí)現(xiàn)圖片的高斯模糊(兩種方式)
本文給大家分享兩種實(shí)現(xiàn)圖片的高斯模糊效果，非常不錯(cuò)，具有參考借鑒價(jià)值，對(duì)android圖片高斯模糊效果感興趣的朋友一起看看吧2017-03-03
Android 中WallpaperManager用法實(shí)例
這篇文章主要介紹了Android 中WallpaperManager用法實(shí)例的相關(guān)資料,希望通過(guò)本文能幫助到大家實(shí)現(xiàn)這樣的功能，需要的朋友可以參考下2017-09-09
Android?Studio實(shí)現(xiàn)簡(jiǎn)易計(jì)算器設(shè)計(jì)
這篇文章主要為大家詳細(xì)介紹了Android?Studio實(shí)現(xiàn)簡(jiǎn)易計(jì)算器設(shè)計(jì)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-05-05
在Android中通過(guò)Intent使用Bundle傳遞對(duì)象的使用方法
這篇文章主要介紹了在Android中通過(guò)Intent使用Bundle傳遞對(duì)象的使用方法，詳細(xì)介紹Intent使用Bundle傳遞對(duì)象的方法。有需要的可以了解一下。2016-11-11
本篇文章小編為大家介紹，Android 程序應(yīng)用的生命周期。需要的朋友參考下2013-04-04
Android開(kāi)發(fā)中使用sqlite實(shí)現(xiàn)新聞收藏和取消收藏的功能
本篇文章主要介紹了sqlite實(shí)現(xiàn)新聞收藏和取消收藏功能，主要涉及到oracle數(shù)據(jù)庫(kù)方面的內(nèi)容，對(duì)于Android開(kāi)發(fā)sqlite實(shí)現(xiàn)收藏和取消功能感興趣的朋友可以參考下本文2016-11-11