RecyclerView設置間距和添加分割線的方法
使用RecyclerView布局,經(jīng)常需要調(diào)整間距和添加分割線以達到更美觀的效果,雖然一直接觸和使用,但卻從來沒有認真研究過,經(jīng)常忘記如何使用,現(xiàn)在就來好好研究一番
先放上一個沒有分割線的效果圖
添加默認的分割線
使用RecyclerView.addItemDecoration(ItemDecoration decor)
方法,添加默認的分割線
最簡單的方式就是,添加一個簡單的DividerItemDecoration
類:
//添加默認的分割線 recyclerView.addItemDecoration(new DividerItemDecoration(this,DividerItemDecoration.VERTICAL));
得到的效果圖
另外,可以使用DividerItemDecoration.setDrawble()
傳入一個Drawable對象來定義我們想要的效果
繪制一個高度為2dp,顏色為綠色的矩形并將它傳入
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android"> ? ? <solid android:color="#00ff00"/> ? ? <size android:height="2dp" /> </shape>
//添加默認分割線 DividerItemDecoration decoration = new DividerItemDecoration(this,DividerItemDecoration.VERTICAL); decoration.setDrawable(getResources().getDrawable(R.drawable.divider_green)); recyclerView.addItemDecoration(decoration);
得到的效果圖
然后,我發(fā)現(xiàn)RecyclerView添加分割線還有一個重載方法:
RecyclerView.addItemDecoration(ItemDecoration decor, int index)
想也沒想,還以為是在指定的位置添加分割線,隨便打了個數(shù)字測試,結(jié)果程序閃退了
翻開源碼一看,原來內(nèi)部用了一個數(shù)組存儲添加進來的ItemDecoration,怪不得方法名是addItemDecoration()而不是setItemDecoration(),也就是說RecyclerView可以添加多個ItemDecoration,那么就來試試吧:
繪制了三個矩形,顏色分別為綠色、紅色和藍色,高度分別為4dp、8dp和12dp,將它們都傳入
//添加默認分割線 DividerItemDecoration decoration1 = new DividerItemDecoration(this,DividerItemDecoration.VERTICAL); decoration1.setDrawable(getResources().getDrawable(R.drawable.divider_green)); DividerItemDecoration decoration2 = new DividerItemDecoration(this,DividerItemDecoration.VERTICAL); decoration2.setDrawable(getResources().getDrawable(R.drawable.divider_red)); DividerItemDecoration decoration3 = new DividerItemDecoration(this,DividerItemDecoration.VERTICAL); decoration3.setDrawable(getResources().getDrawable(R.drawable.divider_blue));
recyclerView.addItemDecoration(decoration1); recyclerView.addItemDecoration(decoration2); recyclerView.addItemDecoration(decoration3);
效果圖:
換個順序傳入
recyclerView.addItemDecoration(decoration3); recyclerView.addItemDecoration(decoration2); recyclerView.addItemDecoration(decoration1);
效果圖:
很顯然,繪制順序是以內(nèi)部數(shù)組中的存儲順序為基準的,并且間距是由所有傳入的ItemDecoration的高度或?qū)挾裙餐嬎愕玫降模ㄋ詴霈F(xiàn)除了三種顏色外的灰色分割線)
添加自定義分割線
默認的分割線效果不好,想要自定義分割線該怎么做?
很簡單,我們只需要自定義一個類去繼承ItemDecoration類,并重寫相關的方法就可以了。添加默認分割線時使用的DividerItemDecoration也是如此。
編寫一個MyDecoration類,繼承RecyclerView.ItemDecoration類,Ctrl+O,發(fā)現(xiàn)除去已棄用的方法和構造方法,ItemDecoration類主要有三個方法:
public void onDraw(Canvas c, RecyclerView parent, State state) public void onDrawOver(Canvas c, RecyclerView parent, State state) public void getItemOffsets(Rect outRect, View view, RecyclerView parent, State state)
大概描述一下幾個方法的作用:
- getItemOffsets(),獲取Item的偏移量,調(diào)整參數(shù)中outRect的相關值,可以實現(xiàn)類似padding的效果。
- onDraw(),用這種方法繪制的任何內(nèi)容都將在繪制項目視圖之前繪制,繪圖的內(nèi)容將出現(xiàn)在視圖下方。
- onDrawOver(),用這種方法繪制的任何內(nèi)容都將在繪制項目視圖之后繪制,繪圖的內(nèi)容會出現(xiàn)在視圖上方。
百聞不如一見,直接看實際效果
getItemOffsets()方法:
//添加自定義分割線 class MyDecoration extends RecyclerView.ItemDecoration { ?? ?@Override ?? ?public void getItemOffsets(@NonNull Rect outRect, @NonNull View view, @NonNull RecyclerView parent, @NonNull RecyclerView.State state) { ?? ??? ?super.getItemOffsets(outRect, view, parent, state); ?? ??? ?//設置間距 ?? ??? ?outRect.bottom = 10; ?? ?} } //添加裝飾 recyclerView.addItemDecoration(new MyDecoration());
這里僅設置了底部間距,實現(xiàn)的效果類似之前使用的DividerItemDecoration
再給每個方向上都設置間距,看看效果
//添加自定義分割線 class MyDecoration extends RecyclerView.ItemDecoration { ?? ?@Override ?? ?public void getItemOffsets(@NonNull Rect outRect, @NonNull View view, @NonNull RecyclerView parent, @NonNull RecyclerView.State state) { ?? ??? ?super.getItemOffsets(outRect, view, parent, state); ?? ??? ?//設置間距 ?? ??? ?outRect.left = 30; ? ? ? ? outRect.right = 50; ? ? ? ? outRect.top = 15; ? ? ? ? outRect.bottom = 10; ?? ?} } //添加裝飾 recyclerView.addItemDecoration(new MyDecoration());
可以看到,實現(xiàn)了類似padding的效果
onDraw()方法:
//添加自定義分割線 class MyDecoration extends RecyclerView.ItemDecoration { ?? ?@Override ?? ?public void getItemOffsets(@NonNull Rect outRect, @NonNull View view, @NonNull RecyclerView parent, @NonNull RecyclerView.State state) { ?? ??? ?super.getItemOffsets(outRect, view, parent, state); ?? ??? ?//設置間距 ? ? ? ? outRect.bottom = 10; ? ? } ? ?? ?? ?@Override ?? ?public void onDraw(@NonNull Canvas c, @NonNull RecyclerView parent, @NonNull RecyclerView.State state) { ? ? ?? ?super.onDraw(c, parent, state); ? ? ? ? Paint paint = new Paint(); ? ? ? ? paint.setColor(Color.BLUE); ?? ??? ?//獲取item的數(shù)量 ? ? ? ? int count = parent.getChildCount(); ? ? ? ? //設置要繪制的矩形的left、right、top、bottom值 ? ? ? ? int left = parent.getPaddingLeft(); ? ? ? ? int right = parent.getWidth() - parent.getPaddingRight(); ? ? ? ? for (int i = 0; i < count; i++){ ? ? ? ? ?? ?//獲取對應的item ?? ? ? ? ? ?View view = parent.getChildAt(i); ?? ? ? ? ? ?float top = view.getBottom(); ?? ? ? ? ? ?float bottom = view.getBottom() + 10; ?? ? ? ? ? ?//繪制矩形 ?? ? ? ? ? ?c.drawRect(left,top,right,bottom,paint); ? ? ?? ?} ?? ?} } recyclerView.addItemDecoration(new MyDecoration());
這里仍僅設置底部間距,并在onDraw()方法中實例化一個paint對象,設置顏色為藍色,用于最終的繪制。之后獲取item的數(shù)量,通過一個循環(huán)來繪制每一個item下方的分割線(當然也可以通過某些條件判斷,以達到只繪制部分分割線的效果),這個分割線的頂部恰好是item的底部,分割線的底部則是item的底部+間距,所以有:
float top = view.getBottom(); float bottom = view.getBottom() + 10; //繪制矩形 c.drawRect(left,top,right,bottom,paint);
實際效果圖:
onDrawOver()方法:
直接在剛才的基礎上,重寫onDrawOver()方法
@Override public void onDrawOver(@NonNull Canvas c, @NonNull RecyclerView parent, @NonNull RecyclerView.State state) { ?? ?super.onDrawOver(c, parent, state); ? ? Paint paint = new Paint(); ? ? paint.setColor(Color.RED); ? ? int count = parent.getChildCount(); ? ? float left = parent.getRight() - 40; ? ? float right = parent.getRight(); ? ? for (int i = 0; i < count; i++){ ?? ? ? ?View view = parent.getChildAt(i); ?? ? ? ?float top = view.getTop(); ?? ? ? ?//會覆蓋掉部分藍色分割線 ?? ? ? ?float bottom = view.getBottom() + 5; ?? ? ? ?c.drawRect(left,top,right,bottom,paint); ?? ?} }
之前說過,onDraw()方法繪圖的內(nèi)容將出現(xiàn)在視圖下方,而onDrawOver()方法的繪圖內(nèi)容會出現(xiàn)在視圖上方,因此這里的紅色分割線會略微覆蓋掉一部分之前的藍色分割線
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
android webview 中l(wèi)ocalStorage無效的解決方法
這篇文章主要介紹了android webview 中l(wèi)ocalStorage無效的解決方法,本文直接給出解決方法實現(xiàn)代碼,需要的朋友可以參考下2015-06-06Android使用popupWindow仿微信彈出框使用方法
這篇文章主要為大家詳細介紹了Android使用popupWindow仿微信彈出框使用方法,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-09-09android內(nèi)存優(yōu)化之圖片優(yōu)化
對圖片本身進行操作。盡量不要使用setImageBitmap、setImageResource、BitmapFactory.decodeResource來設置一張大圖,因為這些方法在完成decode后,最終都是通過java層的createBitmap來完成的,需要消耗更多內(nèi)存2012-12-12Android實現(xiàn)Back功能代碼片段總結(jié)
今天把在公司實現(xiàn)某功能所用到的Back鍵功能模塊代碼片段做一個整理。方便以后直接拿出來使用2014-09-09Android 使用自定義RecyclerView控件實現(xiàn)Gallery效果
這篇文章主要介紹了Android 使用自定義RecyclerView 實現(xiàn)Gallery效果,本文給大家簡單介紹了RecyclerView的基本用法,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2017-10-10Android?Compose狀態(tài)改變動畫animateXxxAsState使用詳解
這篇文章主要為大家介紹了Android?Compose狀態(tài)改變動畫animateXxxAsState使用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-11-11Android 中View.onDraw(Canvas canvas)的使用方法
這篇文章主要介紹了Android 中View.onDraw(Canvas canvas)的使用方法的相關資料,希望通過本文能幫助到大家,需要的朋友可以參考下2017-09-09Android Handler內(nèi)存泄漏詳解及其解決方案
在android開發(fā)過程中,我們可能會遇到過令人奔潰的OOM異常,這篇文章主要介紹了Android Handler內(nèi)存泄漏詳解及其解決方案,具有一定的參考價值,感興趣的小伙伴們可以參考一下2018-08-08