Android GridView：网格视图

悠悠 2021-12-09 23:21 243阅读 0赞

GridView 提供了一个二维的可滚动的网格，按照行列的方式来显示内容，一般适合显示图标、图片等，适合浏览。  
  
下面通过一个实例来了解一下GridView组件的使用方法。在工程WidgetDemo的布局文件main.xml中添加一个名为GridViewDemo的Button，用以启动GridViewActivity。  
  
在main.xml中添加代码如下：

1.  <Button
2.  android:id="@+id/button12"
3.  android:layout\_width="wrap\_content"
4.  android:layout\_height="wrap\_content"
5.  android:text="GridViewDemo"/>

单击 Button 并启动 GridViewActivity 的代码如下：

1.  Button gridviewbtn = (Button)this.findViewById(R.id.button12);
2.  gridviewbtn.setOnClickListener(new View.OnClickListener()\{
3.  @Override
4.  public void onClick(View v)\{
5.  Intent intent;
6.  intent = new Intent(MainActivity.this, GridViewActivity .class);
7.  startActivity(intent);
8.  \}
9.  \});

同时在 [Android][]Manifest.xml 文件中声明该 Activity：

GridViewActivity 的运行效果如图 1 所示。

![GridViewActivity的运行效果][GridViewActivity]  
图 1 GridViewActivity的运行效果

GridViewActivity 使用的布局文件为 gridview.xml，其内容如下：

1.  <?xml version="1.0" encoding="utf-8"?>
2.  <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
3.  android:layout\_width="match\_parent"
4.  android:layout\_height="match\_parent"
5.  android:orientation="vertical">
6.  
7.  <GridView
8.  android:id="@+id/gridView1"
9.  android:layout\_width="match\_parent"
10. android:layout\_height="match\_parent"
11. android:numColumns="3" />
12. </LinearLayout>

该视图采用 LinearLayout 的布局方式，其中放置了一个 GridView 组件，该组件由三列组成。  
  
GridViewActivity.java 的代码如下：

1.  package introduction.android.widgetdemo;
2.  
3.  import android.app.Activity;
4.  import android.content.Context;
5.  import android.os.Bundle;
6.  import android.util.Log;
7.  import android.view.View;
8.  import android.view.ViewGroup;
9.  import android.widget.AdapterView;
10. 
11. import android.widget.AdapterView.OnItemClickListener;
12. import android.widget.BaseAdapter;
13. import android.widget.GridView;
14. import android.widget.ImageView;
15. 
16. public class GridViewActivity extends Activity \{
17. 
18. public void onCreate(Bundle savedInstanceState) \{
19. super.onCreate(savedInstanceState);
20. setContentView(R.layout.gridview);
21. 
22. GridView gridview = (GridView) findViewById(R.id.gridView1);
23. gridview.setAdapter(new ImageAdapter(this));
24. 
25. gridview.setOnItemClickListener(new OnItemClickListener() \{
26. public void onItemClick(AdapterView<?> parent, View v, int position, long id) \{
27. Log.i("gridview", "这是第" + position + "幅图像。");
28. \}
29. \});
30. \}
31. 
32. public class ImageAdapter extends BaseAdapter \{
33. private Context mContext;
34. 
35. public ImageAdapter(Context c) \{
36. mContext = c;
37. \}
38. 
39. /\*获取当前图片数量\*/
40. @Override
41. public int getCount() \{
42. return mThumbIds.length;
43. \}
44. 
45. /\* 根据需要position获得在GridView中的对象\*/
46. @Override
47. public Object getItem(int position) \{
48. return position;
49. \}
50. 
51. /\*获得在GridView中对象的ID \*/
52. @Override
53. public long getItemId(int id) \{
54. return id;
55. \}
56. 
57. @Override
58. public View getView(int position, View convertView, ViewGroup parent) \{
59. ImageView imageView;
60. if (convertView == null) \{
61. /\*实例化ImageView对象\*/
62. imageView = new ImageView(mContext);
63. /\* 设置ImageView对象布局，设置View的height和width \*/
64. imageView.setLayoutParams(new GridView.LayoutParams(85, 85));
65. /\* 设置边界对齐\*/
66. imageView.setAdjustViewBounds(false);
67. /\* 按比例同意缩放图片（保持图片的尺寸比例）\*/
68. imageView.setScaleType(ImageView.ScaleType.CENTER\_CROP);
69. /\* 设置间距\*/
70. imageView.setPadding(8, 8, 8, 8);
71. \} else \{
72. imageView = (ImageView) convertView;
73. \}
74. imageView.setImageResource(mThumbIds\[position\]);
75. return imageView;
76. \}
77. 
78. // references to our images
79. private Integer\[\] mThumbIds = \{R.drawable.img\_1, R.drawable.img\_2,
80. R.drawable.img\_3, R.drawable.img\_4, R.drawable.img\_5,
81. R.drawable.img\_6, R.drawable.img\_1, R.drawable.img\_2,
82. R.drawable.img\_3, R.drawable.img\_4, R.drawable.img\_5,
83. R.drawable.img\_6, R.drawable.img\_1, R.drawable.img\_2,
84. R.drawable.img\_3, R.drawable.img\_4, R.drawable.img\_5,
85. R.drawable.img\_6\};
86. \}
87. \}

在主程序 GridViewActivity 中，为 GridView 设置了一个数据适配器，并处理了 GridView 的单击事件。适配器继承自 BaseAdapter 类，与图片切换器和图库中用到的适配器高度相似，在此不再重复（网址：[http://c-local.biancheng.net/view/3027.html?1554716644][http_c-local.biancheng.net_view_3027.html_1554716644]）。

[Android]: http://c.biancheng.net/android/
[GridViewActivity]: /images/20211209/f79377a95b16459a88f4afb09e1f30f8.png
[http_c-local.biancheng.net_view_3027.html_1554716644]: http://c-local.biancheng.net/view/3027.html?1554716644