如何为安卓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的边框？提前感谢您 :)

- calveeen

---

从你的recyclerView中删除CardView并添加以下内容：recyclerView.addItemDecoration(new DividerItemDecoration(this, DividerItemDecoration.HORIZONTAL)) recyclerView.addItemDecoration(new DividerItemDecoration(this, DividerItemDecoration.VERTICAL)) - Maddy

首先去掉CardView的边距，然后查看以下链接，可能会对您有所帮助：https://dev59.com/A10Z5IYBdhLWcg3wnRgA - Payal Sorathiya

@Maddy如果卡片视图被删除，您将使用哪种布局替换它？ - calveeen

@calveeen 把它放在 LinearLayout 中。 - Maddy

@calveeen，请检查我的答案。 - Maddy

Answer 1

主页活动.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);

单项主页布局文件

<?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>

- Maddy

---

谢谢 :) 这是最有帮助的答案。 - calveeen

我可以问一下padding对线性布局有什么作用吗？如果不添加padding，可能会出现额外的边框。 - calveeen

@calveeen 1) padding仅用于设计目的，您可以根据需要更改/删除它。2）边框是显示的，因为我在垂直和水平方向上都添加了DividerItemDecoration，请在帮助的情况下投赞成票。 - Maddy

最右边的网格线看起来有点奇怪，有没有办法避免绘制最后一列的网格线？@Maddy - Mihir Patel

@Maddy 有没有办法创建一个完全围绕边框的布局？每个项目都应该用边框封闭。 - Navas pk

@Navaspk 你的意思是像个盒子吗？ - Maddy

Answer 2

将以下代码添加到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 的背景颜色设置为灰色，这将显示为分隔线的颜色。

- Priyank Patel

---

那么我在single_item_homepage.xml中使用线性布局作为根布局？ - calveeen

是的，您可以根据设计要求使用任何线性或相对的方式。 - Priyank Patel

Answer 3

如果您在DividerItemDecoration的drawVertical和drawHorizontal中使用childCount-1，它将无法适用于GridLayoutManager。

我修改了DividerItemDecoration类，添加了对仅具有内部分隔线的GridLayoutManager的支持。它还支持普通的LinearLayoutManager。

您可以尝试一下。

MiddleDividerItemDecoration

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

如何使用？

网格布局管理器

//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

编辑：此方法仅适用于透明背景。

- veeyikpong

---

这个能支持外边框吗，比如每个项目周围的框？ - Sampson