Android开发学习之Gallery和GridView浅析

一.Gallery的简介

Gallery（画廊）是一个锁定中心条目并且拥有水平滚动列表的视图，一般用来浏览图片，并且可以响应事件显示信息。Gallery还可以和ImageSwitcher组件结合使用来实现一个通过缩略图来浏览图片的效果。

Gallery常用的XML属性

属性名称

描述

android:animationDuration

设置布局变化时动画的转换所需的时间（毫秒级）。仅在动画开始时计时。该值必须是整数，比如：100。

android:gravity

指定在对象的X和Y轴上如何放置内容。指定一下常量中的一个或多个（使用 “|”分割）

Constant	Value	Description
top	0x30	紧靠容器顶端，不改变其大小
bottom	0x50	紧靠容器底部，不改变其大小
left	0x03	紧靠容器左侧，不改变其大小
right	0x05	紧靠容器右侧，不改变其大小
center_vertical	0x10	垂直居中，不改变其大小
fill_vertical	0x70	垂直方向上拉伸至充满容器
center_horizontal	0x01	水平居中，不改变其大小
Fill_horizontal	0x07	水平方向上拉伸使其充满容器
center	0x11	居中对齐，不改变其大小
fill	0x77	在水平和垂直方向上拉伸，使其充满容器
clip_vertical	0x80	垂直剪切（当对象边缘超出容器的时候，将上下边缘超出的部分剪切掉）
clip_horizontal	0x08	水平剪切（当对象边缘超出容器的时候，将左右边缘超出的部分剪切掉）

android:spacing

图片之间的间距

android:unselectedAlpha

设置未选中的条目的透明度(Alpha)。该值必须是float类型，比如：“1.2”。

首先介绍Gallery单独使用的例子：

MainActivity.java

1. package com.android.gallerydemo;
2. import android.app.Activity;
3. import android.content.Context;
4. import android.os.Bundle;
5. import android.view.View;
6. import android.view.ViewGroup;
7. import android.widget.AdapterView;
8. import android.widget.AdapterView.OnItemClickListener;
9. import android.widget.BaseAdapter;
10. import android.widget.Gallery;
11. import android.widget.ImageView;
12. import android.widget.Toast;
13. public class MainActivity extends Activity {
14. private Gallery gallery;
15. @Override
16. public void onCreate(Bundle savedInstanceState) {
17. super.onCreate(savedInstanceState);
18. setContentView(R.layout.main);
19. gallery = (Gallery)findViewById(R.id.gallery);
20. //设置图片适配器
21. gallery.setAdapter(new ImageAdapter(this));
22. //设置监听器
23. gallery.setOnItemClickListener(new OnItemClickListener() {
24. @Override
25. public void onItemClick(AdapterView<?>parent, View v, int position, long id) {
26. Toast.makeText(MainActivity.this, "点击了第"+(position+1)+"张图片", Toast.LENGTH_LONG).show();
27. }
28. });
29. }
30. }
31. class ImageAdapter extends BaseAdapter{
32. //声明Context
33. private Context context;
34. //图片源数组
35. private Integer[] imageInteger={
36. R.drawable.pic1,
37. R.drawable.pic2,
38. R.drawable.pic3,
39. R.drawable.pic4,
40. R.drawable.pic5,
41. R.drawable.pic6,
42. R.drawable.pic7
43. };
44. //声明 ImageAdapter
45. public ImageAdapter(Context c){
46. context = c;
47. }
48. @Override
49. //获取图片的个数
50. public int getCount() {
51. return imageInteger.length;
52. }
53. @Override
54. //获取图片在库中的位置
55. public Object getItem(int position) {
56. return position;
57. }
58. @Override
59. //获取图片在库中的位置
60. public long getItemId(int position) {
61. // TODO Auto-generated method stub
62. return position;
63. }
64. @Override
65. public View getView(int position, View convertView, ViewGroup parent) {
66. ImageView imageView = new ImageView(context);
67. //给ImageView设置资源
68. imageView.setImageResource(imageInteger[position]);
69. //设置比例类型
70. imageView.setScaleType(ImageView.ScaleType.FIT_XY);
71. //设置布局 图片128x192显示
72. imageView.setLayoutParams(new Gallery.LayoutParams(128, 192));
73. return imageView;
74. }
75. }

main.xml

1. <?xml version="1.0" encoding="utf-8"?>
2. <Gallery xmlns:android="http://schemas.android.com/apk/res/android"
3. android:id="@+id/gallery"
4. android:layout_width="fill_parent"
5. android:layout_height="wrap_content"
6. android:gravity="center_vertical"
7. android:background="?android:galleryItemBackground"
8. />

效果图：

Gallery和ImageSwitcher组件结合使用的例子：

MainActivity.java

1. package com.android.gallerytest;
2. import android.app.Activity;
3. import android.content.Context;
4. import android.os.Bundle;
5. import android.view.View;
6. import android.view.ViewGroup;
7. import android.view.Window;
8. import android.view.animation.AnimationUtils;
9. import android.widget.AdapterView;
10. import android.widget.BaseAdapter;
11. import android.widget.Gallery;
12. import android.widget.ImageSwitcher;
13. import android.widget.ImageView;
14. import android.widget.AdapterView.OnItemSelectedListener;
15. import android.widget.Gallery.LayoutParams;
16. import android.widget.ViewSwitcher.ViewFactory;
17. public class MainActivity extends Activity implements OnItemSelectedListener,
18. ViewFactory {
19. private ImageSwitcher mSwitcher;
20. //大图片对应的缩略图源数组
21. private Integer[] mThumbIds = { R.drawable.sample_thumb_0,
22. R.drawable.sample_thumb_1, R.drawable.sample_thumb_2,
23. R.drawable.sample_thumb_3, R.drawable.sample_thumb_4,
24. R.drawable.sample_thumb_5, R.drawable.sample_thumb_6,
25. R.drawable.sample_thumb_7 };
26. //大图片源数组
27. private Integer[] mImageIds = { R.drawable.sample_0, R.drawable.sample_1,
28. R.drawable.sample_2, R.drawable.sample_3, R.drawable.sample_4,
29. R.drawable.sample_5, R.drawable.sample_6, R.drawable.sample_7 };
30. @Override
31. public void onCreate(Bundle savedInstanceState) {
32. super.onCreate(savedInstanceState);
33. //设置窗口无标题
34. requestWindowFeature(Window.FEATURE_NO_TITLE);
35. setContentView(R.layout.main);
36. mSwitcher = (ImageSwitcher) findViewById(R.id.switcher);
37. //注意在使用一个ImageSwitcher之前，
38. //一定要调用setFactory方法，要不setImageResource这个方法会报空指针异常。
39. mSwitcher.setFactory(this);
40. //设置动画效果
41. mSwitcher.setInAnimation(AnimationUtils.loadAnimation(this,
42. android.R.anim.fade_in));
43. mSwitcher.setOutAnimation(AnimationUtils.loadAnimation(this,
44. android.R.anim.fade_out));
45. Gallery g = (Gallery) findViewById(R.id.gallery);
46. //添加OnItemSelectedListener监听器
47. g.setAdapter(new ImageAdapter(this));
48. g.setOnItemSelectedListener(this);
49. }
50. //创建内部类ImageAdapter
51. public class ImageAdapter extends BaseAdapter {
52. public ImageAdapter(Context c) {
53. mContext = c;
54. }
55. public int getCount() {
56. return mThumbIds.length;
57. }
58. public Object getItem(int position) {
59. return position;
60. }
61. public long getItemId(int position) {
62. return position;
63. }
64. public View getView(int position, View convertView, ViewGroup parent) {
65. ImageView i = new ImageView(mContext);
66. i.setImageResource(mThumbIds[position]);
67. //设置边界对齐
68. i.setAdjustViewBounds(true);
69. //设置布局参数
70. i.setLayoutParams(new Gallery.LayoutParams(
71. LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
72. //设置背景资源
73. i.setBackgroundResource(R.drawable.picture_frame);
74. return i;
75. }
76. private Context mContext;
77. }
78. @Override
79. //实现onItemSelected()方法，更换图片
80. public void onItemSelected(AdapterView<?> adapter, View v, int position,
81. long id) {
82. //设置图片资源
83. mSwitcher.setImageResource(mImageIds[position]);
84. }
85. @Override
86. public void onNothingSelected(AdapterView<?> arg0) {
87. }
88. @Override
89. //实现makeView()方法，为ImageView设置布局格式
90. public View makeView() {
91. ImageView i = new ImageView(this);
92. //设置背景颜色
93. i.setBackgroundColor(0xFF000000);
94. //设置比例类型
95. i.setScaleType(ImageView.ScaleType.FIT_CENTER);
96. //设置布局参数
97. i.setLayoutParams(new ImageSwitcher.LayoutParams(
98. LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT));
99. return i;
100. }
101. }

main.xml

1. <?xml version="1.0" encoding="utf-8"?>
2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
3. android:layout_width="fill_parent"
4. android:layout_height="fill_parent"
5. >
6. <ImageSwitcher
7. android:id="@+id/switcher"
8. android:layout_width="fill_parent"
9. android:layout_height="fill_parent"
10. android:layout_alignParentTop="true"
11. android:layout_alignParentLeft="true"
12. />
13. <Gallery
14. android:id="@+id/gallery"
15. android:background="#55000000"
16. android:layout_width="fill_parent"
17. android:layout_height="60dp"
18. android:layout_alignParentBottom="true"
19. android:layout_alignParentLeft="true"
20. android:gravity="center_vertical"
21. android:spacing="16dp"
22. />
23. </RelativeLayout>

效果图:

二.GridView的简介

GridView(网格视图)是按照行列的方式来显示内容的，一般用于显示图片，图片等内容，比如实现九宫格图，用GridView是首选，也是最简单的。主要用于设置Adapter。

GridView常用的XML属性：

属性名称	描述
android:columnWidth	设置列的宽度。
android:gravity	设置此组件中的内容在组件中的位置。可选的值有：top、bottom、left、right、center_vertical、fill_vertical、center_horizontal、fill_horizontal、center、fill、clip_vertical可以多选，用“|”分开。
android:horizontalSpacing	两列之间的间距。
android:numColumns	设置列数。
android:stretchMode	缩放模式。
android:verticalSpacing	两行之间的间距。

下面有三个例子，第一个是只显示图片的，第二个是显示图片文字的(这里的图片是Android系统自带的图片)，第三个是显示自定义的图片文字。前面两个例子的实现都不是很难，第三个例子的实现有些复杂，学习GridView的时候，就想着能不能自定义自己喜欢的图片加上文字，在网上找些资料，一般都是第二个例子的形式的，最后在视频学习上找到了能实现自定义自己的图片的例子。自己就照着例子去学习，修改成了第三个例子。

第一个例子：

MainActivity.java

1. package com.android.gridview.activity;
2. import android.app.Activity;
3. import android.content.Context;
4. import android.os.Bundle;
5. import android.view.View;
6. import android.view.ViewGroup;
7. import android.widget.AdapterView;
8. import android.widget.AdapterView.OnItemClickListener;
9. import android.widget.BaseAdapter;
10. import android.widget.GridView;
11. import android.widget.ImageView;
12. import android.widget.Toast;
13. public class MainActivity extends Activity {
14. @Override
15. public void onCreate(Bundle savedInstanceState) {
16. super.onCreate(savedInstanceState);
17. setContentView(R.layout.main);
18. GridView gv = (GridView)findViewById(R.id.GridView1);
19. //为GridView设置适配器
20. gv.setAdapter(new MyAdapter(this));
21. //注册监听事件
22. gv.setOnItemClickListener(new OnItemClickListener()
23. {
24. public void onItemClick(AdapterView<?> parent, View v, int position, long id)
25. {
26. Toast.makeText(MainActivity.this, "pic" + position, Toast.LENGTH_SHORT).show();
27. }
28. });
29. }
30. }
31. //自定义适配器
32. class MyAdapter extends BaseAdapter{
33. //上下文对象
34. private Context context;
35. //图片数组
36. private Integer[] imgs = {
37. R.drawable.pic0, R.drawable.pic1, R.drawable.pic2,
38. R.drawable.pic3, R.drawable.pic4, R.drawable.pic5,
39. R.drawable.pic6, R.drawable.pic7, R.drawable.pic8,
40. R.drawable.pic0, R.drawable.pic1, R.drawable.pic2,
41. R.drawable.pic3, R.drawable.pic4, R.drawable.pic5,
42. R.drawable.pic6, R.drawable.pic7, R.drawable.pic8,
43. };
44. MyAdapter(Context context){
45. this.context = context;
46. }
47. public int getCount() {
48. return imgs.length;
49. }
50. public Object getItem(int item) {
51. return item;
52. }
53. public long getItemId(int id) {
54. return id;
55. }
56. //创建View方法
57. public View getView(int position, View convertView, ViewGroup parent) {
58. ImageView imageView;
59. if (convertView == null) {
60. imageView = new ImageView(context);
61. imageView.setLayoutParams(new GridView.LayoutParams(75, 75));//设置ImageView对象布局
62. imageView.setAdjustViewBounds(false);//设置边界对齐
63. imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);//设置刻度的类型
64. imageView.setPadding(8, 8, 8, 8);//设置间距
65. }
66. else {
67. imageView = (ImageView) convertView;
68. }
69. imageView.setImageResource(imgs[position]);//为ImageView设置图片资源
70. return imageView;
71. }
72. }

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. >
7. <GridView
8. android:id="@+id/GridView1"
9. android:layout_width="wrap_content"
10. android:layout_height="wrap_content"
11. android:columnWidth="90dp"
12. android:numColumns="3"
13. android:verticalSpacing="10dp"
14. android:horizontalSpacing="10dp"
15. android:stretchMode="columnWidth"
16. android:gravity="center"
17. />
18. </LinearLayout>

效果图：

第二个例子：

MainActivity.java

1. package com.android.gridview2.activity;
2. import java.util.ArrayList;
3. import java.util.HashMap;
4. import java.util.List;
5. import java.util.Map;
6. import android.app.Activity;
7. import android.os.Bundle;
8. import android.widget.GridView;
9. import android.widget.SimpleAdapter;
10. public class MainActivity extends Activity {
11. private GridView gv;
12. @Override
13. protected void onCreate(Bundle savedInstanceState) {
14. // TODO Auto-generated method stub
15. super.onCreate(savedInstanceState);
16. setContentView(R.layout.gridview);
17. //准备要添加的数据条目
18. List<Map<String, Object>> items = new ArrayList<Map<String,Object>>();
19. for (int i = 0; i < 9; i++) {
20. Map<String, Object> item = new HashMap<String, Object>();
21. item.put("imageItem", R.drawable.icon);//添加图像资源的ID
22. item.put("textItem", "icon" + i);//按序号添加ItemText
23. items.add(item);
24. }
25. //实例化一个适配器
26. SimpleAdapter adapter = new SimpleAdapter(this,
27. items,
28. R.layout.grid_item,
29. new String[]{"imageItem", "textItem"},
30. new int[]{R.id.image_item, R.id.text_item});
31. //获得GridView实例
32. gv = (GridView)findViewById(R.id.mygridview);
33. //为GridView设置适配器
34. gv.setAdapter(adapter);
35. }
36. }

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="wrap_content"
4. android:layout_height="wrap_content"
5. >
6. <GridView
7. android:id="@+id/mygridview"
8. android:numColumns="3"
9. android:gravity="center_horizontal"
10. android:layout_width="wrap_content"
11. android:layout_height="wrap_content"
12. android:stretchMode="columnWidth"
13. />
14. </LinearLayout>

grid_item.xml

1. <?xml version="1.0" encoding="utf-8"?>
2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
3. android:id="@+id/RelativeLayout1"
4. android:layout_width="wrap_content"
5. android:layout_height="fill_parent"
6. android:paddingBottom="6dip"
7. >
8. <ImageView
9. android:id="@+id/image_item"
10. android:layout_width="wrap_content"
11. android:layout_height="wrap_content"
12. android:layout_centerHorizontal="true"
13. />
14. <TextView
15. android:id="@+id/text_item"
16. android:layout_below="@+id/image_item"
17. android:layout_height="wrap_content"
18. android:layout_width="wrap_content"
19. android:layout_centerHorizontal="true"
20. />
21. </RelativeLayout>

效果图：

第三个例子：

MainActivity.java

1. package com.android.gridview3;
2. import java.util.ArrayList;
3. import java.util.List;
4. import android.app.Activity;
5. import android.content.Context;
6. import android.os.Bundle;
7. import android.view.LayoutInflater;
8. import android.view.View;
9. import android.view.ViewGroup;
10. import android.widget.AdapterView;
11. import android.widget.BaseAdapter;
12. import android.widget.GridView;
13. import android.widget.ImageView;
14. import android.widget.TextView;
15. import android.widget.Toast;
16. import android.widget.AdapterView.OnItemClickListener;
17. public class MainActivity extends Activity
18. {
19. private GridView gridView;
20. //图片的文字标题
21. private String[] titles = new String[]
22. { "pic1", "pic2", "pic3", "pic4", "pic5", "pic6", "pic7", "pic8", "pic9"};
23. //图片ID数组
24. private int[] images = new int[]{
25. R.drawable.pic1, R.drawable.pic2, R.drawable.pic3,
26. R.drawable.pic4, R.drawable.pic5, R.drawable.pic6,
27. R.drawable.pic7, R.drawable.pic8,R.drawable.pic9
28. };
29. @Override
30. public void onCreate(Bundle savedInstanceState){
31. super.onCreate(savedInstanceState);
32. setContentView(R.layout.main);
33. gridView = (GridView) findViewById(R.id.gridview);
34. PictureAdapter adapter = new PictureAdapter(titles, images, this);
35. gridView.setAdapter(adapter);
36. gridView.setOnItemClickListener(new OnItemClickListener()
37. {
38. public void onItemClick(AdapterView<?> parent, View v, int position, long id)
39. {
40. Toast.makeText(MainActivity.this, "pic" + (position+1), Toast.LENGTH_SHORT).show();
41. }
42. });
43. }
44. }
45. //自定义适配器
46. class PictureAdapter extends BaseAdapter{
47. private LayoutInflater inflater;
48. private List<Picture> pictures;
49. public PictureAdapter(String[] titles, int[] images, Context context)
50. {
51. super();
52. pictures = new ArrayList<Picture>();
53. inflater = LayoutInflater.from(context);
54. for (int i = 0; i < images.length; i++)
55. {
56. Picture picture = new Picture(titles[i], images[i]);
57. pictures.add(picture);
58. }
59. }
60. @Override
61. public int getCount()
62. {
63. if (null != pictures)
64. {
65. return pictures.size();
66. } else
67. {
68. return 0;
69. }
70. }
71. @Override
72. public Object getItem(int position)
73. {
74. return pictures.get(position);
75. }
76. @Override
77. public long getItemId(int position)
78. {
79. return position;
80. }
81. @Override
82. public View getView(int position, View convertView, ViewGroup parent)
83. {
84. ViewHolder viewHolder;
85. if (convertView == null)
86. {
87. convertView = inflater.inflate(R.layout.picture_item, null);
88. viewHolder = new ViewHolder();
89. viewHolder.title = (TextView) convertView.findViewById(R.id.title);
90. viewHolder.image = (ImageView) convertView.findViewById(R.id.image);
91. convertView.setTag(viewHolder);
92. } else
93. {
94. viewHolder = (ViewHolder) convertView.getTag();
95. }
96. viewHolder.title.setText(pictures.get(position).getTitle());
97. viewHolder.image.setImageResource(pictures.get(position).getImageId());
98. return convertView;
99. }
100. }
101. class ViewHolder
102. {
103. public TextView title;
104. public ImageView image;
105. }
106. class Picture
107. {
108. private String title;
109. private int imageId;
110. public Picture()
111. {
112. super();
113. }
114. public Picture(String title, int imageId)
115. {
116. super();
117. this.title = title;
118. this.imageId = imageId;
119. }
120. public String getTitle()
121. {
122. return title;
123. }
124. public void setTitle(String title)
125. {
126. this.title = title;
127. }
128. public int getImageId()
129. {
130. return imageId;
131. }
132. public void setImageId(int imageId)
133. {
134. this.imageId = imageId;
135. }
136. }

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:columnWidth="90dp"
7. android:numColumns="auto_fit"
8. android:verticalSpacing="10dp"
9. android:horizontalSpacing="10dp"
10. android:stretchMode="columnWidth"
11. android:gravity="center"
12. />

picture_item.xml

1. <?xml version="1.0" encoding="utf-8"?>
2. <LinearLayout
3. xmlns:android="http://schemas.android.com/apk/res/android"
4. android:id="@+id/root"
5. android:orientation="vertical"
6. android:layout_width="wrap_content"
7. android:layout_height="wrap_content"
8. android:layout_marginTop="5dp"
9. >
10. <ImageView
11. android:id="@+id/image"
12. android:layout_width="100dp"
13. android:layout_height="150dp"
14. android:layout_gravity="center"
15. android:scaleType="fitXY"
16. android:padding="4dp"
17. />
18. <TextView
19. android:id="@+id/title"
20. android:layout_width="wrap_content"
21. android:layout_height="wrap_content"
22. android:layout_gravity="center"
23. android:gravity="center_horizontal"
24. />
25. </LinearLayout>

效果图：