如何为 android recyclerview 网格布局设置边框。

Question

我想要一个看起来像这样的视图，即项目之间没有间距的边框。

目前我的视图看起来像这样，我正在使用带有卡片视图布局的 recyclerview。

下面是我对每个项目的代码

single_item_homepage xml：

<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="95dp"
android:layout_height="95dp"
android:layout_margin="8dp"
>

    <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <ImageView
        android:id="@+id/imageViewCategory"
        android:layout_width="match_parent"
        android:layout_height="75dp"
        />

    <TextView
        android:text="Shirt"
        android:id="@+id/textViewCategory"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:textSize="15sp"/>


    </LinearLayout>

</android.support.v7.widget.CardView>

主页活动：

public class HomepageActivity extends AppCompatActivity {


private RecyclerView recyclerView;
private ImageAdapter imageAdapter;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_homepage);

    recyclerView = findViewById(R.id.recyclerView);
    imageAdapter = new ImageAdapter(this);

    recyclerView.setHasFixedSize(true);
    recyclerView.setLayoutManager(new GridLayoutManager(HomepageActivity.this,3));
    recyclerView.setAdapter(imageAdapter);

    }
}

这是我的适配器类：

public class ImageAdapter extends RecyclerView.Adapter<ImageAdapter.ImageViewHolder> {


private Context context;

public ImageAdapter(Context context) {
    this.context = context;
}

private int[] resourceId = new int[] {R.drawable.shirt,R.drawable.sleeveless,R.drawable.outerwear,
        R.drawable.sweater,R.drawable.pants,R.drawable.shorts,R.drawable.skirt,R.drawable.dresses,
        R.drawable.shoes,R.drawable.bags,R.drawable.accessories,R.drawable.swimwear
};

private String[] names = new String[]{
        "Shirts","Sleevless","Outerwear","Sweater","Pants","Shorts","Skirts","Dresses","Shoes","Bags","Accessories","Swimwear"
};



@NonNull
@Override
public ImageAdapter.ImageViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
    View v = LayoutInflater.from(context).inflate(R.layout.single_item_homepage,parent,false);
    return new ImageViewHolder(v);
}

@Override
public void onBindViewHolder(@NonNull ImageAdapter.ImageViewHolder holder, int position) {
    String currName = names[position];
    int currResource = resourceId[position];
    holder.categoryName.setText(currName);
    holder.categoryImage.setImageResource(currResource);

}

@Override
public int getItemCount() {
    return names.length;
}

class ImageViewHolder extends RecyclerView.ViewHolder {

    TextView categoryName;
    ImageView categoryImage;


    public ImageViewHolder(View itemView) {
        super(itemView);

        categoryName = itemView.findViewById(R.id.textViewCategory);
        categoryImage = itemView.findViewById(R.id.imageViewCategory);
        }
    }
}

有没有办法改变 recyclerview 的边框？在此先感谢:)

Answer 1

添加以下代码为 RecylcerView 的 GridLayoutManager 设置分隔线。

recyclerView.addItemDecoration(new GridLayoutItemDecoration(2));

在GridLayoutItemDecoration类下面使用。

public class GridLayoutItemDecoration extends RecyclerView.ItemDecoration {
    private int space;

    public GridLayoutItemDecoration(int space) {
        this.space = space;
    }

    @Override
    public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
        int position = parent.getChildLayoutPosition(view);

        /// Only for GridLayoutManager 
        GridLayoutManager manager = (GridLayoutManager) parent.getLayoutManager();

        if (parent.getChildLayoutPosition(view) < manager.getSpanCount())
            outRect.top = space;

        if (position % 2 != 0) {
            outRect.right = space;
        }

        outRect.left = space;
        outRect.bottom = space;
    }
}

从single_item_homepage xml 中删除CardView 和根布局的边距并设置背景颜色（在您的情况下为白色）。

设置RecyclerView 的背景颜色（在您的情况下为灰色），它将显示为分隔线的颜色。

Answer 2

HomepageActivity.java

recyclerView = findViewById(R.id.recyclerView);
imageAdapter = new ImageAdapter(this);

recyclerView.setHasFixedSize(true);
recyclerView.addItemDecoration(new DividerItemDecoration(this,
                DividerItemDecoration.HORIZONTAL))
recyclerView.addItemDecoration(new DividerItemDecoration(this,
                DividerItemDecoration.VERTICAL))
recyclerView.setLayoutManager(new GridLayoutManager(HomepageActivity.this,2));
recyclerView.setAdapter(imageAdapter);

single_item_homepage.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:foreground="?android:selectableItemBackground"
    android:orientation="vertical"
    android:padding="@dimen/fifteen_dp">

    <ImageView
        android:id="@+id/ivGraphItemThumb"
        android:layout_width="match_parent"
        android:layout_height="125dp"
        tools:src="@drawable/ic_recent_exce" />

    <TextView
        android:id="@+id/tvMenu"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:textColor="@color/black"
        android:textSize="@dimen/fifteen_sp"
        tools:text="Item 1" />
</LinearLayout>

Answer 3

如果您在 drawVertical 中使用 childCount-1，在 DividerItemDecoration 中使用 drawHorizo​​ntal，则它不适用于 GridLayoutManager。

我已经修改了 DividerItemDecoration 类，添加了对 GridLayoutManager 的支持，只使用了内部分隔符。也可以支持普通的LinearLayoutManager。

你可以试试看。

MiddleDividerItemDecoration

https://gist.github.com/Veeyikpong/a376c6128e603b0dee316670a74b345b

如何使用？

GridLayoutManager

//MiddleDivideritemDecoration.ALL means both vertical and horizontal dividers
//You can also use MiddleDividerItemDecoration.VERTICAL / MiddleDividerItemDecoration.HORIZONTAL if you just want horizontal / vertical dividers
recyclerView.addItemDecoration(MiddleDividerItemDecoration(context!!, MiddleDividerItemDecoration.ALL))
recyclerView.layoutManager = GridLayoutManager(context!!, 3)
recyclerView.adapter = customAdapter

完整用法可以参考https://gist.github.com/Veeyikpong/a376c6128e603b0dee316670a74b345b#gistcomment-2897799

已编辑：这仅适用于透明背景。