欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

RecyclerView設置間距和添加分割線的方法

 更新時間:2022年09月05日 15:19:02   作者:Mondarzy  
在使用RecyclerView布局,經(jīng)常需要調(diào)整間距和添加分割線以達到更美觀效果,這篇文章主要介紹了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)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。

相關文章

最新評論