Gallery和GridView 小结

来源：互联网发布：安易数据恢复软件免费编辑：程序博客网时间：2024/05/21 12:08

一.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;

3. import android.app.Activity;

4. import android.content.Context;

5. import android.os.Bundle;

6. import android.view.View;

7. import android.view.ViewGroup;

8. import android.widget.AdapterView;

9. import android.widget.AdapterView.OnItemClickListener;

10. import android.widget.BaseAdapter;

11. import android.widget.Gallery;

12. import android.widget.ImageView;

13. import android.widget.Toast;

14.

15. public class MainActivity extends Activity {

16.

17. private Gallery gallery;

18. @Override

19. public void onCreate(Bundle savedInstanceState) {

20.

21. super.onCreate(savedInstanceState);

22. setContentView(R.layout.main);

23. gallery = (Gallery)findViewById(R.id.gallery);

24. //设置图片适配器

25. gallery.setAdapter(new ImageAdapter(this));

26. //设置监听器

27. gallery.setOnItemClickListener(new OnItemClickListener() {

28. @Override

29. public void onItemClick(AdapterView<?>parent, View v, int position, long id) {

30. Toast.makeText(MainActivity.this, "点击了第"+(position+1)+"张图片", Toast.LENGTH_LONG).show();

31. }

32. });

33. }

34. }

35.

36. class ImageAdapter extends BaseAdapter{

37. //声明Context

38. private Context context;

39. //图片源数组

40. private Integer[] imageInteger={

41. R.drawable.pic1,

42. R.drawable.pic2,

43. R.drawable.pic3,

44. R.drawable.pic4,

45. R.drawable.pic5,

46. R.drawable.pic6,

47. R.drawable.pic7

48. };

49.

50. //声明 ImageAdapter

51. public ImageAdapter(Context c){

52. context = c;

53. }

54.

55. @Override

56. //获取图片的个数

57. public int getCount() {

58. return imageInteger.length;

59. }

60.

61. @Override

62. //获取图片在库中的位置

63. public Object getItem(int position) {

64.

65. return position;

66. }

67.

68. @Override

69. //获取图片在库中的位置

70. public long getItemId(int position) {

71. // TODO Auto-generated method stub

72. return position;

73. }

74.

75. @Override

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

77.

78. ImageView imageView = new ImageView(context);

79. //给ImageView设置资源

80. imageView.setImageResource(imageInteger[position]);

81. //设置比例类型

82. imageView.setScaleType(ImageView.ScaleType.FIT_XY);

83. //设置布局图片128x192显示

84. imageView.setLayoutParams(new Gallery.LayoutParams(128, 192));

85. return imageView;

86. }

87. }

88.

89.

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;

3. import android.app.Activity;

4. import android.content.Context;

5. import android.os.Bundle;

6. import android.view.View;

7. import android.view.ViewGroup;

8. import android.view.Window;

9. import android.view.animation.AnimationUtils;

10. import android.widget.AdapterView;

11. import android.widget.BaseAdapter;

12. import android.widget.Gallery;

13. import android.widget.ImageSwitcher;

14. import android.widget.ImageView;

15. import android.widget.AdapterView.OnItemSelectedListener;

16. import android.widget.Gallery.LayoutParams;

17. import android.widget.ViewSwitcher.ViewFactory;

18.

19. public class MainActivity extends Activity implements OnItemSelectedListener,

20. ViewFactory {

21.

22. private ImageSwitcher mSwitcher;

23. //大图片对应的缩略图源数组

24. private Integer[] mThumbIds = { R.drawable.sample_thumb_0,

25. R.drawable.sample_thumb_1, R.drawable.sample_thumb_2,

26. R.drawable.sample_thumb_3, R.drawable.sample_thumb_4,

27. R.drawable.sample_thumb_5, R.drawable.sample_thumb_6,

28. R.drawable.sample_thumb_7 };

29. //大图片源数组

30. private Integer[] mImageIds = { R.drawable.sample_0, R.drawable.sample_1,

31. R.drawable.sample_2, R.drawable.sample_3, R.drawable.sample_4,

32. R.drawable.sample_5, R.drawable.sample_6, R.drawable.sample_7 };

33.

34. @Override

35. public void onCreate(Bundle savedInstanceState) {

36. super.onCreate(savedInstanceState);

37. //设置窗口无标题

38. requestWindowFeature(Window.FEATURE_NO_TITLE);

39. setContentView(R.layout.main);

40. mSwitcher = (ImageSwitcher) findViewById(R.id.switcher);

41. //注意在使用一个ImageSwitcher之前，

42. //一定要调用setFactory方法，要不setImageResource这个方法会报空指针异常。

43. mSwitcher.setFactory(this);

44. //设置动画效果

45. mSwitcher.setInAnimation(AnimationUtils.loadAnimation(this,

46. android.R.anim.fade_in));

47. mSwitcher.setOutAnimation(AnimationUtils.loadAnimation(this,

48. android.R.anim.fade_out));

49.

50. Gallery g = (Gallery) findViewById(R.id.gallery);

51.

52. //添加OnItemSelectedListener监听器

53. g.setAdapter(new ImageAdapter(this));

54. g.setOnItemSelectedListener(this);

55.

56. }

57. //创建内部类ImageAdapter

58. public class ImageAdapter extends BaseAdapter {

59. public ImageAdapter(Context c) {

60. mContext = c;

61. }

62. public int getCount() {

63. return mThumbIds.length;

64. }

65. public Object getItem(int position) {

66. return position;

67. }

68. public long getItemId(int position) {

69. return position;

70. }

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

72. ImageView i = new ImageView(mContext);

73.

74. i.setImageResource(mThumbIds[position]);

75. //设置边界对齐

76. i.setAdjustViewBounds(true);

77. //设置布局参数

78. i.setLayoutParams(new Gallery.LayoutParams(

79. LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));

80. //设置背景资源

81. i.setBackgroundResource(R.drawable.picture_frame);

82. return i;

83. }

84. private Context mContext;

85. }

86.

87. @Override

88. //实现onItemSelected()方法，更换图片

89. public void onItemSelected(AdapterView<?> adapter, View v, int position,

90. long id) {

91. //设置图片资源

92. mSwitcher.setImageResource(mImageIds[position]);

93. }

94.

95. @Override

96. public void onNothingSelected(AdapterView<?> arg0) {

97.

98. }

99.

100. @Override

101. //实现makeView()方法，为ImageView设置布局格式

102. public View makeView() {

103. ImageView i = new ImageView(this);

104. //设置背景颜色

105. i.setBackgroundColor(0xFF000000);

106. //设置比例类型

107. i.setScaleType(ImageView.ScaleType.FIT_CENTER);

108. //设置布局参数

109. i.setLayoutParams(new ImageSwitcher.LayoutParams(

110. LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT));

111. return i;

112. }

113. }

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>

24.

效果图:

二.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;

3. import android.app.Activity;

4. import android.content.Context;

5. import android.os.Bundle;

6. import android.view.View;

7. import android.view.ViewGroup;

8. import android.widget.AdapterView;

9. import android.widget.AdapterView.OnItemClickListener;

10. import android.widget.BaseAdapter;

11. import android.widget.GridView;

12. import android.widget.ImageView;

13. import android.widget.Toast;

14.

15. public class MainActivity extends Activity {

16. @Override

17. public void onCreate(Bundle savedInstanceState) {

18. super.onCreate(savedInstanceState);

19. setContentView(R.layout.main);

20. GridView gv = (GridView)findViewById(R.id.GridView1);

21. //为GridView设置适配器

22. gv.setAdapter(new MyAdapter(this));

23. //注册监听事件

24. gv.setOnItemClickListener(new OnItemClickListener()

25. {

26. public void onItemClick(AdapterView<?> parent, View v, int position, long id)

27. {

28. Toast.makeText(MainActivity.this, "pic" + position, Toast.LENGTH_SHORT).show();

29. }

30. });

31. }

32. }

33. //自定义适配器

34. class MyAdapter extends BaseAdapter{

35. //上下文对象

36. private Context context;

37. //图片数组

38. private Integer[] imgs = {

39. R.drawable.pic0, R.drawable.pic1, R.drawable.pic2,

40. R.drawable.pic3, R.drawable.pic4, R.drawable.pic5,

41. R.drawable.pic6, R.drawable.pic7, R.drawable.pic8,

42. R.drawable.pic0, R.drawable.pic1, R.drawable.pic2,

43. R.drawable.pic3, R.drawable.pic4, R.drawable.pic5,

44. R.drawable.pic6, R.drawable.pic7, R.drawable.pic8,

45. };

46. MyAdapter(Context context){

47. this.context = context;

48. }

49. public int getCount() {

50. return imgs.length;

51. }

52.

53. public Object getItem(int item) {

54. return item;

55. }

56.

57. public long getItemId(int id) {

58. return id;

59. }

60.

61. //创建View方法

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

63. ImageView imageView;

64. if (convertView == null) {

65. imageView = new ImageView(context);

66. imageView.setLayoutParams(new GridView.LayoutParams(75, 75));//设置ImageView对象布局

67. imageView.setAdjustViewBounds(false);//设置边界对齐

68. imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);//设置刻度的类型

69. imageView.setPadding(8, 8, 8, 8);//设置间距

70. }

71. else {

72. imageView = (ImageView) convertView;

73. }

74. imageView.setImageResource(imgs[position]);//为ImageView设置图片资源

75. return imageView;

76. }

77. }

78.

79.

80.

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;

3. import java.util.ArrayList;

4. import java.util.HashMap;

5. import java.util.List;

6. import java.util.Map;

7. import android.app.Activity;

8. import android.os.Bundle;

9. import android.widget.GridView;

10. import android.widget.SimpleAdapter;

11.

12. public class MainActivity extends Activity {

13.

14. private GridView gv;

15. @Override

16. protected void onCreate(Bundle savedInstanceState) {

17. // TODO Auto-generated method stub

18. super.onCreate(savedInstanceState);

19. setContentView(R.layout.gridview);

20.

21. //准备要添加的数据条目

22. List<Map<String, Object>> items = new ArrayList<Map<String,Object>>();

23. for (int i = 0; i < 9; i++) {

24. Map<String, Object> item = new HashMap<String, Object>();

25. item.put("imageItem", R.drawable.icon);//添加图像资源的ID

26. item.put("textItem", "icon" + i);//按序号添加ItemText

27. items.add(item);

28. }

29.

30. //实例化一个适配器

31. SimpleAdapter adapter = new SimpleAdapter(this,

32. items,

33. R.layout.grid_item,

34. new String[]{"imageItem", "textItem"},

35. new int[]{R.id.image_item, R.id.text_item});

36.

37. //获得GridView实例

38. gv = (GridView)findViewById(R.id.mygridview);

39. //为GridView设置适配器

40. gv.setAdapter(adapter);

41.

42. }

43. }

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>

15.

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>

22.

效果图：

第三个例子：

MainActivity.java

1. package com.android.gridview3;

3. import java.util.ArrayList;

4. import java.util.List;

5. import android.app.Activity;

6. import android.content.Context;

7. import android.os.Bundle;

8. import android.view.LayoutInflater;

9. import android.view.View;

10. import android.view.ViewGroup;

11. import android.widget.AdapterView;

12. import android.widget.BaseAdapter;

13. import android.widget.GridView;

14. import android.widget.ImageView;

15. import android.widget.TextView;

16. import android.widget.Toast;

17. import android.widget.AdapterView.OnItemClickListener;

18.

19. public class MainActivity extends Activity

20. {

21. private GridView gridView;

22. //图片的文字标题

23. private String[] titles = new String[]

24. { "pic1", "pic2", "pic3", "pic4", "pic5", "pic6", "pic7", "pic8", "pic9"};

25. //图片ID数组

26. private int[] images = new int[]{

27. R.drawable.pic1, R.drawable.pic2, R.drawable.pic3,

28. R.drawable.pic4, R.drawable.pic5, R.drawable.pic6,

29. R.drawable.pic7, R.drawable.pic8,R.drawable.pic9

30. };

31.

32. @Override

33. public void onCreate(Bundle savedInstanceState){

34. super.onCreate(savedInstanceState);

35. setContentView(R.layout.main);

36. gridView = (GridView) findViewById(R.id.gridview);

37. PictureAdapter adapter = new PictureAdapter(titles, images, this);

38. gridView.setAdapter(adapter);

39.

40. gridView.setOnItemClickListener(new OnItemClickListener()

41. {

42. public void onItemClick(AdapterView<?> parent, View v, int position, long id)

43. {

44. Toast.makeText(MainActivity.this, "pic" + (position+1), Toast.LENGTH_SHORT).show();

45. }

46. });

47. }

48. }

49. //自定义适配器

50. class PictureAdapter extends BaseAdapter{

51. private LayoutInflater inflater;

52. private List<Picture> pictures;

53.

54. public PictureAdapter(String[] titles, int[] images, Context context)

55. {

56. super();

57. pictures = new ArrayList<Picture>();

58. inflater = LayoutInflater.from(context);

59. for (int i = 0; i < images.length; i++)

60. {

61. Picture picture = new Picture(titles[i], images[i]);

62. pictures.add(picture);

63. }

64. }

65.

66. @Override

67. public int getCount()

68. {

69. if (null != pictures)

70. {

71. return pictures.size();

72. } else

73. {

74. return 0;

75. }

76. }

77.

78. @Override

79. public Object getItem(int position)

80. {

81. return pictures.get(position);

82. }

83.

84. @Override

85. public long getItemId(int position)

86. {

87. return position;

88. }

89.

90. @Override

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

92. {

93. ViewHolder viewHolder;

94. if (convertView == null)

95. {

96. convertView = inflater.inflate(R.layout.picture_item, null);

97. viewHolder = new ViewHolder();

98. viewHolder.title = (TextView) convertView.findViewById(R.id.title);

99. viewHolder.image = (ImageView) convertView.findViewById(R.id.image);

100. convertView.setTag(viewHolder);

101. } else

102. {

103. viewHolder = (ViewHolder) convertView.getTag();

104. }

105. viewHolder.title.setText(pictures.get(position).getTitle());

106. viewHolder.image.setImageResource(pictures.get(position).getImageId());

107. return convertView;

108. }

109.

110. }

111.

112. class ViewHolder

113. {

114. public TextView title;

115. public ImageView image;

116. }

117.

118. class Picture

119. {

120. private String title;

121. private int imageId;

122.

123. public Picture()

124. {

125. super();

126. }

127.

128. public Picture(String title, int imageId)

129. {

130. super();

131. this.title = title;

132. this.imageId = imageId;

133. }

134.

135. public String getTitle()

136. {

137. return title;

138. }

139.

140. public void setTitle(String title)

141. {

142. this.title = title;

143. }

144.

145. public int getImageId()

146. {

147. return imageId;

148. }

149.

150. public void setImageId(int imageId)

151. {

152. this.imageId = imageId;

153. }

154. }

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>