Android 自学之网格试图(GridView)和图片切换器(ImageSwitcher)功能和用法

网格试图(GridView)用于在界面上按行，列分布的方式来显示多个组件。

GridView和ListView有共同的父类：AbsListView，因此GridView和ListView具有一定的相似性。GridView和ListView的主要区别在于：ListView只是一个方向上的分布；而GridView则会在两个方向上分布。

与ListView相似的是，GridView也需要通过Adapter来提供显示数据：可以通过SimpleAdapter来为GridView提供数据，也可以通过开发BaseAdapter的子类来问GridView提供数据，不管使用那种方式，GridView和ListView的用法基本是一致的。

GridView中提供了常用的XML属性：

XML属性	相关方法	说明
android：columnWidth	setColumnWidth(int)	设置列的宽度
android：gravity	setGravity(int)	设置对齐方式
android：horizontalSpacing	setHorizontalSpac(int)	设置各个元素之间的水平间距
android：numColumn	setNumColumn(int)	设置列数
android：stretchMode	setStretchMode(int)	设置拉伸模式
android：verticalSpacing	setVerticalSpacing(int)	设置各个元素之间的垂直间距

注意：使用GridView时一般都应该指定numColumn大于1，否则该属性默认值为1，如果将属性设置为1，则意味着该Gridview只有一列，那Gridview就变成了Listview。

在上面表中提到的android：stretchMode属性支持如下几个属性值：

• NO_STRETCH : 不拉伸
• STRETCH_SPACING：仅拉伸元素之间的间距
• STRETCH_SPACING_UNIFORM：表格元素本身、元素之间的间距一起拉伸
• STRETCH_COLUMN_WIDTH：仅拉伸元素表格元素本身。

 

图片切换器(ImageSwitcher)是由FrameLayout派生而出，ImageSwitcher组件和ImageView很相似，他们都可用于显示图片，但是ImageView比ImageView多了一个功能：它所显示的图片切换是可以设置动画效果。

使用ImageSwitcher时往往需要为它设置一个ImageSwitcher.ViewFactory,来实现ImageSwitcher.ViewFactory时需要实现一个makeView()方法，该方法通常会返回一个Imageview而ImageSwitcher则负责显示这个ImageView。

下面我们用个GridView 以行列的形式来组织所有图片的预览视图，然后启用一个ImageSwitcher来显示图片。

界面布局文件：layout/main.xml

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

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

 3     android:orientation="vertical"

 4     android:layout_width="fill_parent"

 5     android:layout_height="fill_parent"

 6     android:gravity="center_horizontal"

 7     >

 8 <!-- 定义一个GridView组件 -->

 9 <GridView  

10     android:id="@+id/grid01"

11     android:layout_width="fill_parent" 

12     android:layout_height="wrap_content" 

13     android:horizontalSpacing="pt"

14     android:verticalSpacing="2pt"

15     android:numColumns="4"

16     android:gravity="center"

17     />

18 <!-- 定义一个ImageSwitcher组件 -->

19 <ImageSwitcher android:id="@+id/switcher"

20     android:layout_width="320dp"

21     android:layout_height="320dp"

22     android:layout_gravity="center_horizontal"

23     />    

24 </LinearLayout>

上面的布局文件中只是简单的定义了一个GridView、一个ImageSwitcher。定义GridView指定了android：numColumns=“4”,这个属性的指定意味着该网格包含了4列，GridView到底包含了多少行，其实跟ListView一样都是有Adapter去决定的。

主程序：GridViewTest.java

 1 package com.yangjing.gridviewtest;

 2 

 3 import java.util.ArrayList;

 4 import java.util.HashMap;

 5 import java.util.List;

 6 import java.util.Map;

 7 

 8 import android.app.Activity;

 9 import android.os.Bundle;

10 import android.view.View;

11 import android.view.ViewGroup.LayoutParams;

12 import android.view.animation.Animation;

13 import android.view.animation.AnimationUtils;

14 import android.view.animation.GridLayoutAnimationController;

15 import android.widget.AdapterView.OnItemClickListener;

16 import android.widget.AdapterView.OnItemSelectedListener;

17 import android.widget.AdapterView;

18 import android.widget.GridView;

19 import android.widget.ImageSwitcher;

20 import android.widget.ImageView;

21 import android.widget.SimpleAdapter;

22 import android.widget.Switch;

23 import android.widget.ViewSwitcher.ViewFactory;

24 

25 public class GridViewTest extends Activity{

26     int[] imageIds = new int[]

27     {

28             R.drawable.bomb5,R.drawable.bomb6,R.drawable.bomb7,

29             R.drawable.bomb8,R.drawable.bomb9,R.drawable.bomb10,

30             R.drawable.bomb11,R.drawable.bomb12,R.drawable.bomb13,

31             R.drawable.bomb14,R.drawable.bomb15,R.drawable.bomb16,

32     }; 

33     

34     @Override

35     protected void onCreate(Bundle savedInstanceState) {

36         super.onCreate(savedInstanceState);

37         setContentView(R.layout.main);

38         //创建一个list对象，list对象的元素是map

39         List<Map<String,Object>> listItems = new ArrayList<Map<String, Object>>();

40         

41         for (int i = 0; i < imageIds.length; i++) {

42             Map<String, Object> listItem = new HashMap<String, Object>();

43             listItem.put("image", imageIds[i]);

44             listItems.add(listItem);

45         }

46         //获取显示图片的ImageSwitcher

47         final ImageSwitcher switcher = (ImageSwitcher) findViewById(R.id.switcher);

48         //设置图片更换的动画效果

49         switcher.setInAnimation(AnimationUtils.loadAnimation(this, android.R.anim.fade_in));

50         switcher.setOutAnimation(AnimationUtils.loadAnimation(this, android.R.anim.fade_out));

51         //为ImageSwitcher设置图片切换的动画效果

52         switcher.setFactory(new ViewFactory() {

53             

54             @Override

55             public View makeView() {

56                 ImageView imageView = new ImageView(GridViewTest.this);

57                 imageView.setBackgroundColor(0xff0000);

58                 imageView.setScaleType(ImageView.ScaleType.FIT_CENTER);

59                 imageView.setLayoutParams(new ImageSwitcher.LayoutParams(

60                         LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));

61                 return imageView;

62             }

63         });

64         

65         //创建一个SimpleAdapter

66         SimpleAdapter simpleAdapter = new SimpleAdapter(this, listItems, R.layout.cell, new String[]{"image"}, new int[]{R.id.image1}); 67         

68         GridView grid = (GridView) findViewById(R.id.grid01);

69         //为GridView设置Adapter

70         grid.setAdapter(simpleAdapter);

71         //添加列表项被选中的监听器

72         grid.setOnItemSelectedListener(new OnItemSelectedListener() {

73             @Override

74             public void onItemSelected(AdapterView<?> parent, View view, 

75                     int position , long id) {

76                 //显示当前被选中的图片

77                 switcher.setImageResource(imageIds[position % imageIds.length]);

78             }

79 

80             @Override

81             public void onNothingSelected(AdapterView<?> arg0) {}

82         });

83         //添加列表被单击的监听

84         grid.setOnItemClickListener(new OnItemClickListener() {

85 

86             @Override

87             public void onItemClick(AdapterView<?> parent, View view, int position,

88                     long id) {

89                 switcher.setImageResource(imageIds[position % imageIds.length]);

90             }

91             

92         });

93         

94     }

95 }

 

上面蓝色字体在创建SimpleAdapter时指定使用R.Layout.cell作为界面布局：cell.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     android:gravity="center_horizontal"

 7     android:padding="5pt"

 8     >

 9     <!-- android:gravity="center_horizontal"   这个是针对控件里的元素来说的，用来控制元素在该控件里的显示位置。 -->

10     <ImageView android:id="@+id/image1"

11         android:layout_width="50dp"

12         android:layout_height="50dp"/>

13 

14 </LinearLayout>

最后的运行效果：