,
类似的九宫格 上面是图片,下面是文字
这里用的是“GridView”表格布局,下面我来给大家讲一下:
首先,请大家理解一下“迭代显示”这个概念,这个好比布局嵌套,我们在一个大布局里面重复的放入一些布局相同的小布局,
那些重复的部分是由图片和文字组成的小控件,图片在上方,文字在下方,之后我们只需要把这些小控件迭代进入主容器里即可。
首先看看主容器的布局
1 "1.0" encoding="utf-8"?> 2 "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/GridView" 9 android:layout_width="fill_parent" 10 android:layout_height="fill_parent" 11 android:numColumns="auto_fit" 12 android:columnWidth="70dp" 13 android:stretchMode="columnWidth" 14 android:gravity="center"> 15 16
介绍一下里面的某些属性:
android:numColumns=”auto_fit” ,GridView的列数设置为自动
android:columnWidth=”90dp”,每列的宽度,也就是Item的宽度
android:stretchMode=”columnWidth”,缩放与列宽大小同步
在这里需要关注的属性是columnWidth,这里指定了列的宽度,一个列对象,对应一个 “可重复的子项”,这个子项就是我们 的图片项和图片下方文字显示的部分。如果不指定这个宽度的话,默认是每行(展示的行,界面)仅仅只显示一个 “可重复的子项”,而当指定了宽度时,本文指定为90dp,如果每行实际行尺寸大于90,他就会继续将下一个的“可重复的子项”,放置在本行。于是就呈现一种 一行显示多个子项的情况。numColumns属性,指定一个自动填充的值,指示了自动填充行。
然后是一个布局,放重复显示的小布局
1 "1.0" encoding="utf-8"?> 2 "http://schemas.android.com/apk/res/android" 3 android:layout_width="fill_parent" 4 android:layout_height="wrap_content" 5 > 6 <ImageView 7 android:layout_width="wrap_content" 8 android:id="@+id/ItemImage" 9 android:layout_height="wrap_content" 10 android:layout_centerHorizontal="true"/> 11 <TextView 12 android:layout_width="wrap_content" 13 android:layout_height="wrap_content" 14 android:layout_below="@+id/ItemImage" 15 android:id="@+id/ItemText" 16 android:layout_centerHorizontal="true" 17 /> 18
这里使用了一个相对布局,在TextView 里使用属性android:layout_below=”@+id/ItemImage”指示了文本在图片的下方。
构建ArrayList作为数据源,再构建SimpleAdapter 作为数据适配器,为gridView指定适配器对象。
采用了java中的数据结构:HashMap
1 package jiabin.activity; 2 3 import java.util.ArrayList; 4 import java.util.HashMap; 5 6 import android.app.Activity; 7 import android.os.Bundle; 8 import android.view.View; 9 import android.widget.AdapterView; 10 import android.widget.AdapterView.OnItemClickListener; 11 import android.widget.GridView; 12 import android.widget.SimpleAdapter; 13 import android.widget.Toast; 14 15 public class layout_gridview extends Activity { 16 /** Called when the activity is first created. */ 17 @Override 18 public void onCreate(Bundle savedInstanceState) { 19 super.onCreate(savedInstanceState); 20 setContentView(R.layout.main); 21 GridView gridview = (GridView) findViewById(R.id.GridView); 22 ArrayList> meumList = new ArrayList>(); 23 for(int i = 1;i < 10;i++) 24 { 25 HashMap map = new HashMap(); 26 map.put("ItemImage", R.drawable.i1); 27 map.put("ItemText", ""+i); 28 meumList.add(map); 29 } 30 SimpleAdapter saItem = new SimpleAdapter(this, 31 meumList, //数据源 32 R.layout.item, //xml实现 33 new String[]{ "ItemImage","ItemText"}, //对应map的Key 34 new int[]{R.id.ItemImage,R.id.ItemText}); //对应R的Id 35 36 //添加Item到网格中 37 gridview.setAdapter(saItem); 38 //添加点击事件 39 gridview.setOnItemClickListener( 40 new OnItemClickListener() 41 { 42 public void onItemClick(AdapterView arg0, View arg1, int arg2,long arg3) 43 { 44 int index=arg2+1;//id是从0开始的,所以需要+1 45 Toast.makeText(getApplicationContext(), "你按下了选项:"+index, 0).show(); 46 //Toast用于向用户显示一些帮助/提示 47 } 48 } 49 ); 50 } 51 }
效果图
:
上面是全部显示相同的图片
如果想要显示不同的图片和文字
则可以把图片,文字放到数组里
1 int[] itemimage = new int[]{R.drawable.image_people_shu_zhangfei,R.drawable.image_people_shu_zhugeliang,R.drawable.image_people_shu_liubei,R.drawable.image_people_shu_huatuo,R.drawable.image_people_shu_guanyu}; //放图片 7 String[] itemname = new String[]{ "张飞","诸葛亮","刘备","华佗","关羽"}; //放文字
for(int i=0;i<6;i++)
{
HashMap map = new HashMap();
map.put("ItemImage", itemimage[i]);
map.put("ItemText", ""+itemname[i]);
meumList.add(map);
}
便可以实现不同图片和文字了