[英]How to set border for android recyclerview grid layout.
我想要一個看起來像這樣的視圖,一個沒有項目間距的邊框。
目前我的視圖看起來像這樣,我正在使用帶有卡片視圖布局的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邊界? 提前致謝 :)
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>
添加以下代碼以設置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
背景顏色(在您的情況下為灰色),它將顯示為分隔線的顏色。
如果您在drawVertical中使用childCount-1而在DividerItemDecoration中使用drawHorizontal,則它將不適用於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
編輯:這只適用於透明背景。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.