在使用网格视图(GridView)时,首先需要在屏幕上添加GridView组件,通常使用<GridView>标记在XML布局文件中添加,其基本语法:
<GridView 属性列表 > </GridView>
GridView组件所支持的属性如下:
属性 | 描述 |
columnWidth | 设置列的宽度 |
gravity | 设置对齐方式 |
horizintalSpaing | 设置各元素之间的水平间距 |
numColumns | 设置列数,大于1的常数 |
stretchMode | 拉伸模式 |
verticalSpacing | 设置各元素之间的垂直间距 |
GridVew和ListVew类似,需要通过Adapter来提供需要显示的数据。
如图:我们需要使用Grid实现如下的效果(即一个图片和一个标题):
首先,添加主页面的XML布局:
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <GridView android:id="@+id/gridView" android:layout_width="match_parent" android:layout_height="wrap_content" android:numColumns="4" android:stretchMode="columnWidth" > </GridView> </LinearLayout>
其次,每个表格的布局,即一个图片和一个文本
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <ImageView android:id="@+id/imgView" android:layout_width="wrap_content" android:layout_height="70px" android:paddingLeft="10px" android:scaleType="fitCenter" /> <TextView android:id="@+id/imgTitle" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:padding="5px" /> </LinearLayout>
每项的信息实体:
public class MyGridViewItemInfo { private int imgId; private String title; public int getImgId() { return imgId; } public void setImgId(int imgId) { this.imgId = imgId; } public String getTitle() { return title; } public void setTitle(String title) { this.title = title; } }
自定义Adapter:
public class MyGridViewAdapter extends BaseAdapter{ private final List<MyGridViewItemInfo> infos = new ArrayList<MyGridViewItemInfo>(); private Context context; public MyGridViewAdapter(Context context,List<MyGridViewItemInfo> infos){ this.infos.clear(); this.infos.addAll(infos); this.context = context; } @Override public int getCount() { return this.infos.size(); } @Override public Object getItem(int arg0) { return this.infos.get(arg0); } @Override public long getItemId(int arg0) { return arg0; } @Override public View getView(int arg0, View view, ViewGroup arg2) { if(view == null){ View view2 = LayoutInflater.from(this.context).inflate(R.layout.grid_view_item, null); MyGridViewItemInfo info = (MyGridViewItemInfo)this.getItem(arg0); ImageView imageView = (ImageView)view2.findViewById(R.id.imgView); imageView.setImageResource(info.getImgId()); TextView textView = (TextView)view2.findViewById(R.id.imgTitle); textView.setText(info.getTitle()); return view2; } return view; } }
最后:
public class MyGridViewAvtivity extends Activity { private final int[] imageleds = new int[] { R.drawable.img01, R.drawable.img02, R.drawable.img03, R.drawable.img04, R.drawable.img05, R.drawable.img06, R.drawable.img07, R.drawable.img08, R.drawable.img09, R.drawable.img10, R.drawable.img11, R.drawable.img12, R.drawable.img01, R.drawable.img02, R.drawable.img03, R.drawable.img04, R.drawable.img05, R.drawable.img06, R.drawable.img07, R.drawable.img08, R.drawable.img09, R.drawable.img10, R.drawable.img11, R.drawable.img12 }; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.grid_view); final GridView gridView = (GridView) findViewById(R.id.gridView); List<MyGridViewItemInfo> infos = new ArrayList<MyGridViewItemInfo>(); for (int i = 0; i < imageleds.length; i++) { MyGridViewItemInfo info = new MyGridViewItemInfo(); info.setImgId(imageleds[i]); info.setTitle("这是标题" + i); infos.add(info); } MyGridViewAdapter adapter = new MyGridViewAdapter(this, infos); gridView.setAdapter(adapter); } }