利用gridview控件,实现9宫格布局。 图标自选,图标下发实现菜单名称,展示具体步骤,具体代码
时间: 2024-03-08 08:49:04 浏览: 15
好的,下面是一个简单的实现9宫格布局的示例代码:
首先,在 XML 布局文件中,添加 GridView 控件:
```xml
<GridView
android:id="@+id/grid_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:numColumns="3" />
```
其中,`numColumns` 属性设置为 3,表示每行显示 3 个图标。
接下来,在 Java 代码中,为 GridView 添加适配器,并设置图标、菜单名称和步骤:
```java
public class MainActivity extends AppCompatActivity {
private GridView mGridView;
private String[] mMenuNames = {"菜单1", "菜单2", "菜单3", "菜单4", "菜单5", "菜单6", "菜单7", "菜单8", "菜单9"};
private String[] mSteps = {
"步骤1:打开菜单1",
"步骤2:选择操作",
"步骤3:确认操作",
"步骤1:打开菜单2",
"步骤2:选择操作",
"步骤3:确认操作",
"步骤1:打开菜单3",
"步骤2:选择操作",
"步骤3:确认操作",
"步骤1:打开菜单4",
"步骤2:选择操作",
"步骤3:确认操作",
"步骤1:打开菜单5",
"步骤2:选择操作",
"步骤3:确认操作",
"步骤1:打开菜单6",
"步骤2:选择操作",
"步骤3:确认操作",
"步骤1:打开菜单7",
"步骤2:选择操作",
"步骤3:确认操作",
"步骤1:打开菜单8",
"步骤2:选择操作",
"步骤3:确认操作",
"步骤1:打开菜单9",
"步骤2:选择操作",
"步骤3:确认操作"
};
private int[] mIconIds = {
R.drawable.icon1,
R.drawable.icon2,
R.drawable.icon3,
R.drawable.icon4,
R.drawable.icon5,
R.drawable.icon6,
R.drawable.icon7,
R.drawable.icon8,
R.drawable.icon9
};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mGridView = findViewById(R.id.grid_view);
// 创建适配器
MyAdapter adapter = new MyAdapter(this, mMenuNames, mSteps, mIconIds);
// 为 GridView 设置适配器
mGridView.setAdapter(adapter);
}
// 自定义适配器
class MyAdapter extends BaseAdapter {
private Context mContext;
private String[] mMenuNames;
private String[] mSteps;
private int[] mIconIds;
public MyAdapter(Context context, String[] menuNames, String[] steps, int[] iconIds) {
mContext = context;
mMenuNames = menuNames;
mSteps = steps;
mIconIds = iconIds;
}
@Override
public int getCount() {
return mMenuNames.length;
}
@Override
public Object getItem(int position) {
return mMenuNames[position];
}
@Override
public long getItemId(int position) {
return position;
}
@Override
public View getView(int position, View convertView, ViewGroup parent) {
ViewHolder holder;
if (convertView == null) {
convertView = LayoutInflater.from(mContext).inflate(R.layout.grid_item, parent, false);
holder = new ViewHolder();
holder.icon = convertView.findViewById(R.id.icon);
holder.menuName = convertView.findViewById(R.id.menu_name);
holder.step = convertView.findViewById(R.id.step);
convertView.setTag(holder);
} else {
holder = (ViewHolder) convertView.getTag();
}
holder.icon.setImageResource(mIconIds[position]);
holder.menuName.setText(mMenuNames[position]);
holder.step.setText(mSteps[position]);
return convertView;
}
class ViewHolder {
ImageView icon;
TextView menuName;
TextView step;
}
}
}
```
在适配器中,我们为每个图标设置了菜单名称和步骤,并使用 ViewHolder 对象缓存了每个图标的视图,提高了列表的性能。
最后,我们还需要为 GridView 的每个图标创建一个布局文件 `grid_item.xml`,定义图标、菜单名称和步骤的显示方式:
```xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:id="@+id/icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:src="@drawable/icon1" />
<TextView
android:id="@+id/menu_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="菜单名称" />
<TextView
android:id="@+id/step"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="步骤" />
</LinearLayout>
```
以上就是利用 GridView 控件实现9宫格布局的示例代码,希望能对你有所帮助!