具有两列的 GridView,第一项跨越两列
GridView with two columns, first item spans both columns
我有一个 Imageview 和一个 gridview..
这里是我的版面设计..
我想将这两个视图组合成一个网格视图
我的问题:
如何在两列中设置 gridview 第一项跨度?
在研究您的问题时,我学到了一些新东西:我碰巧在 GridLayoutManager
中查看 RecyclerView
,我注意到您可以设置自定义 SpanSizeLookup
。现在,如果您垂直滚动,"span" 只是一列;如果您水平滚动,则它只是一行。因此 SpanSizeLookup
允许您指定,例如,项目 0 占用 2 列,项目 1 占用 1 列,等等。
事实证明,如果将 RecyclerView
与 GridLayoutManager
一起使用,解决方案很简单:
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// Create a grid layout with two columns
GridLayoutManager layoutManager = new GridLayoutManager(this, 2);
// Create a custom SpanSizeLookup where the first item spans both columns
layoutManager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {
@Override
public int getSpanSize(int position) {
return position == 0 ? 2 : 1;
}
});
RecyclerView recyclerView = (RecyclerView) findViewById(R.id.recyclerview);
recyclerView.setLayoutManager(layoutManager);
recyclerView.setAdapter(new MyGridAdapter());
}
我创建了一个测试项目只是为了试用它并确保它按照我的预期进行,并且它非常有效。
关于适配器的注意事项:RecyclerView.Adapter
与 ListAdapter
不兼容。您需要从 RecyclerView.Adapter
扩展您的适配器并进行适当的更改。
这是我为测试项目创建的适配器:
public static class MyViewHolder extends RecyclerView.ViewHolder {
ImageView mImageView;
TextView mTextView;
public MyViewHolder(View itemView) {
super(itemView);
mImageView = (ImageView) itemView.findViewById(R.id.imageView);
mTextView = (TextView) itemView.findViewById(R.id.textView);
}
}
public static class MyGridAdapter extends RecyclerView.Adapter<MyViewHolder> {
private int[] mDrawables;
public MyGridAdapter() {
this.mDrawables = new int[] {
R.drawable.images_01,
R.drawable.images_02,
.
.
.
};
}
@Override
public int getItemCount() {
return mDrawables.length;
}
@Override
public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
LayoutInflater inflater = (LayoutInflater) parent.getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View view = inflater.inflate(R.layout.layout_grid_item, parent, false);
MyViewHolder holder = new MyViewHolder(view);
// set up any onClickListener you need on the view here
return holder;
}
@Override
public void onBindViewHolder(MyViewHolder holder, int position) {
holder.mImageView.setImageResource(mDrawables[position]);
holder.mTextView.setText("Image " + position);
}
}
首先,创建一个RecyclerView.ViewHolder
子类。视图持有者模式现在是这种处理适配器视图的新方法的一个组成部分。您的 ViewHolder
将为您的视图设置所有子视图。
然后在您的 RecyclerView.Adapter
子类中,覆盖 onCreateViewHolder()
和 onBindViewHolder()
。在 onCreateViewHolder()
中,您膨胀视图并构建 ViewHolder
。在 onBindViewHolder()
中,您使用 position
获取适配器数据并使用 ViewHolder
设置子视图。所以 RecyclerView
在技术上回收了包含 View
的 ViewHolder
。
一旦您对适配器进行了这些更改,您就应该准备就绪。
我有一个 Imageview 和一个 gridview..
这里是我的版面设计..
我想将这两个视图组合成一个网格视图
我的问题:
如何在两列中设置 gridview 第一项跨度?
在研究您的问题时,我学到了一些新东西:我碰巧在 GridLayoutManager
中查看 RecyclerView
,我注意到您可以设置自定义 SpanSizeLookup
。现在,如果您垂直滚动,"span" 只是一列;如果您水平滚动,则它只是一行。因此 SpanSizeLookup
允许您指定,例如,项目 0 占用 2 列,项目 1 占用 1 列,等等。
事实证明,如果将 RecyclerView
与 GridLayoutManager
一起使用,解决方案很简单:
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// Create a grid layout with two columns
GridLayoutManager layoutManager = new GridLayoutManager(this, 2);
// Create a custom SpanSizeLookup where the first item spans both columns
layoutManager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {
@Override
public int getSpanSize(int position) {
return position == 0 ? 2 : 1;
}
});
RecyclerView recyclerView = (RecyclerView) findViewById(R.id.recyclerview);
recyclerView.setLayoutManager(layoutManager);
recyclerView.setAdapter(new MyGridAdapter());
}
我创建了一个测试项目只是为了试用它并确保它按照我的预期进行,并且它非常有效。
关于适配器的注意事项:RecyclerView.Adapter
与 ListAdapter
不兼容。您需要从 RecyclerView.Adapter
扩展您的适配器并进行适当的更改。
这是我为测试项目创建的适配器:
public static class MyViewHolder extends RecyclerView.ViewHolder {
ImageView mImageView;
TextView mTextView;
public MyViewHolder(View itemView) {
super(itemView);
mImageView = (ImageView) itemView.findViewById(R.id.imageView);
mTextView = (TextView) itemView.findViewById(R.id.textView);
}
}
public static class MyGridAdapter extends RecyclerView.Adapter<MyViewHolder> {
private int[] mDrawables;
public MyGridAdapter() {
this.mDrawables = new int[] {
R.drawable.images_01,
R.drawable.images_02,
.
.
.
};
}
@Override
public int getItemCount() {
return mDrawables.length;
}
@Override
public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
LayoutInflater inflater = (LayoutInflater) parent.getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View view = inflater.inflate(R.layout.layout_grid_item, parent, false);
MyViewHolder holder = new MyViewHolder(view);
// set up any onClickListener you need on the view here
return holder;
}
@Override
public void onBindViewHolder(MyViewHolder holder, int position) {
holder.mImageView.setImageResource(mDrawables[position]);
holder.mTextView.setText("Image " + position);
}
}
首先,创建一个RecyclerView.ViewHolder
子类。视图持有者模式现在是这种处理适配器视图的新方法的一个组成部分。您的 ViewHolder
将为您的视图设置所有子视图。
然后在您的 RecyclerView.Adapter
子类中,覆盖 onCreateViewHolder()
和 onBindViewHolder()
。在 onCreateViewHolder()
中,您膨胀视图并构建 ViewHolder
。在 onBindViewHolder()
中,您使用 position
获取适配器数据并使用 ViewHolder
设置子视图。所以 RecyclerView
在技术上回收了包含 View
的 ViewHolder
。
一旦您对适配器进行了这些更改,您就应该准备就绪。