Android开发学习之Gallery和GridView浅析

时间：2024-05-18 18:07:32

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

效果图：

相关文章