码迷,mamicode.com
首页 > 其他好文 > 详细

表视图-GridView

时间:2015-03-03 18:18:48      阅读:187      评论:0      收藏:0      [点我收藏+]

标签:

与ListView用于显示列视图类似,GridView用于显示二维列表视图。下面通过一个简化的相册例子来演示GrdView的基本用法。

主界面如下。

Main.xml

1.   <?xml version="1.0" encoding="utf-8"?> 

2.   <GridView

    xmlns:android="http://schemas.android.com/apk/res/android"

3.   android:id="@+id/gridview" 

4.   android:layout_width="fill_parent"  

5.   android:layout_height="fill_parent" 

6.   android:numColumns="auto_fit" 第6行android:numColumns="auto_fit" 设置列数为根据屏幕宽度自动适配。

7.   android:verticalSpacing="8dp"   第7、8行的意义是设置了行间隔和列间隔都是8dp。

8.   android:horizontalSpacing="8dp" 

9.   android:columnWidth="80dp"  第9行设置每列的宽度,也就是item的宽度为80dp。

10.  android:stretchMode="columnWidth"  第10行设置将item里的内容缩放到列宽大小同步,即缩放到80dp。

11.  android:gravity="center"  /> 

主界面没有采用Layout布局,而是直接用Gridview。

第6行android:numColumns="auto_fit" 设置列数为根据屏幕宽度自动适配。

第7、8行的意义是设置了行间隔和列间隔都是8dp。

第9行设置每列的宽度,也就是item的宽度为80dp。

第10行设置将item里的内容缩放到列宽大小同步,即缩放到80dp。

第11行设置将显示的内容放在item的中央位置。

GridView里每个item的布局如下。

Griditem.xml

1.   <?xml version="1.0" encoding="utf-8"?> 

2.   <RelativeLayout  

3.   xmlns:android="http://schemas.android.com/apk/res/android"  

4.   android:id="@+id/R1"

5.   android:layout_height="wrap_content"  

6.   android:layout_width="fill_parent"> 

7.   <ImageView 

8.   android:id="@+id/ItemImage"

9.   android:layout_height="wrap_content"  

10.  android:layout_width="wrap_content"  

11.  android:layout_centerHorizontal="true"/>   

12.  <TextView

13.  android:id="@+id/ItemText"

14.  android:layout_below="@+id/ItemImage"

15.  android:layout_width="wrap_content"  

16.  android:layout_height="wrap_content"  

17.  android:text="名字"  

18.  android:layout_centerHorizontal="true"   /> 

19.  </RelativeLayout>

这个item布局和上个例子中的布局类似,item内有一个imageview和一个textview,textview位于imageview的下方。

最后就是Java源代码主要部分。

MyGridView.java

1.   public void onCreate(Bundle savedInstanceState) { 

2.   super.onCreate(savedInstanceState); 

3.   setContentView(R.layout.main); 

4.   GridView gridview;

5.   String[] titles={"赵1","钱2","张三","李四","王五"};

6.   int buf=R.drawable.sample;

7.   int[] resIds={buf,buf,buf,buf,buf};

8.   gridview=(GridView)this.findViewById(R.id.gridview);

9.   gridview.setAdapter(new MyAdapter(titles,resIds));

10.  gridview.setOnItemClickListener(new

    AdapterView.OnItemClickListener(){

11.  @Override

12.  public void onItemClick(AdapterView<?> arg0, View arg1, int arg2, long

    arg3) {

13.  TextView title = (TextView)arg1.findViewById(R.id.itemTitle);

14.  Log.d("mygridview:","我单击的是:"+title.getText()+"的照片");

15.  }});} 

16.  public class MyAdapter extends BaseAdapter {

17.  String[] itemTitles, itemTexts;

18.  int[] itemImageRes;

19.  public MyAdapter(String[] itemTitles,int[] itemImageRes)

20.  {

21.  this.itemTitles=itemTitles;

22.  this.itemImageRes=itemImageRes;

23.  } 

24.  public int getCount() {

25.  return itemTitles.length; 

26.  } 

27.  public Object getItem(int position) {

28.  return itemTitles[position]; 

29.  } 

30.  public long getItemId(int position) {

31.  return position; 

32.  } 

33.  public View getView(int position, View convertView, ViewGroup parent)
     { 

34.  if (convertView == null)

35.  {

36.  LayoutInflater inflater =

    (LayoutInflater)MyListView.this.getSystemService(Context.LAYOUT_INFLATER_SERVICE);

37.  View itemView = inflater.inflate(R.layout.item, null); 

38.  TextView title = (TextView) itemView.findViewById(R.id.itemTitle); 

39.  title.setText(itemTitles[position]);

40.  ImageView image = (ImageView) itemView.findViewById(R.id.itemImage); 

41.  image.setImageResource(itemImageRes[position]);

42.  return itemView;

43.  } else{

44.  TextView title = (TextView)

    convertView.findViewById(R.id.itemTitle); 

45.  title.setText(itemTitles[position]);

46.  ImageView image = (ImageView)

    convertView.findViewById(R.id.itemImage); 

47.  image.setImageResource(itemImageRes[position]);

48.  return convertView;

49.  }}}}

代码部分和上个例子类似,其中图片资源我选了一个取名为sample的图片,该图片宽度超过测试手机屏幕的一半,顺便测试一下girdview的stretchMode自动缩放功能。

第9行设置gridview的适配器对象MyAdapter。

第10~15行设置了item的单击事件监听器OnItemClickListener。单击后通过Log.d输出到Logcat窗口,显示我们单击了哪个图片。

第16~49行为适配器类MyAdapter,代码与上个例子类似。

运行效果如图10-5所示。

 

▲图  Gridview示例图

技术分享

单击item后Logcat输出示例。

1.   D/mygridview:(1164): 我单击的是:赵1的照片

2.   D/mygridview:(1164): 我单击的是:钱2的照片

3.   D/mygridview:(1164): 我单击的是:张三的照片

表视图-GridView

标签:

原文地址:http://www.cnblogs.com/zhoujn/p/4311607.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!