標籤：

Android開發學習筆記：Gallery和GridView淺析

07-25

一.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. packagecom.android.gallerydemo;
  3. importandroid.app.Activity;
  4. importandroid.content.Context;
  5. importandroid.os.Bundle;
  6. importandroid.view.View;
  7. importandroid.view.ViewGroup;
  8. importandroid.widget.AdapterView;
  9. importandroid.widget.AdapterView.OnItemClickListener;
  10. importandroid.widget.BaseAdapter;
  11. importandroid.widget.Gallery;
  12. importandroid.widget.ImageView;
  13. importandroid.widget.Toast;
  15. publicclassMainActivityextendsActivity{
  17. privateGallerygallery;
  18. @Override
  19. publicvoidonCreate(BundlesavedInstanceState){
  21. super.onCreate(savedInstanceState);
  22. setContentView(R.layout.main);
  23. gallery=(Gallery)findViewById(R.id.gallery);
  24. //設置圖片適配器
  25. gallery.setAdapter(newImageAdapter(this));
  26. //設置監聽器
  27. gallery.setOnItemClickListener(newOnItemClickListener(){
  28. @Override
  29. publicvoidonItemClick(AdapterView<?>parent,Viewv,intposition,longid){
  30. Toast.makeText(MainActivity.this,"點擊了第"+(position+1)+"張圖片",Toast.LENGTH_LONG).show();
  31. }
  32. });
  33. }
  34. }
  36. classImageAdapterextendsBaseAdapter{
  37. //聲明Context
  38. privateContextcontext;
  39. //圖片源數組
  40. privateInteger[]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. };
  50. //聲明ImageAdapter
  51. publicImageAdapter(Contextc){
  52. context=c;
  53. }
  55. @Override
  56. //獲取圖片的個數
  57. publicintgetCount(){
  58. returnimageInteger.length;
  59. }
  61. @Override
  62. //獲取圖片在庫中的位置
  63. publicObjectgetItem(intposition){
  65. returnposition;
  66. }
  68. @Override
  69. //獲取圖片在庫中的位置
  70. publiclonggetItemId(intposition){
  71. //TODOAuto-generatedmethodstub
  72. returnposition;
  73. }
  75. @Override
  76. publicViewgetView(intposition,ViewconvertView,ViewGroupparent){
  78. ImageViewimageView=newImageView(context);
  79. //給ImageView設置資源
  80. imageView.setImageResource(imageInteger[position]);
  81. //設置比例類型
  82. imageView.setScaleType(ImageView.ScaleType.FIT_XY);
  83. //設置布局圖片128x192顯示
  84. imageView.setLayoutParams(newGallery.LayoutParams(128,192));
  85. returnimageView;
  86. }
  87. }

main.xml

  1. <?xmlversion="1.0"encoding="utf-8"?>
  2. <Galleryxmlns: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. packagecom.android.gallerytest;
  3. importandroid.app.Activity;
  4. importandroid.content.Context;
  5. importandroid.os.Bundle;
  6. importandroid.view.View;
  7. importandroid.view.ViewGroup;
  8. importandroid.view.Window;
  9. importandroid.view.animation.AnimationUtils;
  10. importandroid.widget.AdapterView;
  11. importandroid.widget.BaseAdapter;
  12. importandroid.widget.Gallery;
  13. importandroid.widget.ImageSwitcher;
  14. importandroid.widget.ImageView;
  15. importandroid.widget.AdapterView.OnItemSelectedListener;
  16. importandroid.widget.Gallery.LayoutParams;
  17. importandroid.widget.ViewSwitcher.ViewFactory;
  19. publicclassMainActivityextendsActivityimplementsOnItemSelectedListener,
  20. ViewFactory{
  22. privateImageSwitchermSwitcher;
  23. //大圖片對應的縮略圖源數組
  24. privateInteger[]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. privateInteger[]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};
  34. @Override
  35. publicvoidonCreate(BundlesavedInstanceState){
  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));
  50. Galleryg=(Gallery)findViewById(R.id.gallery);
  52. //添加OnItemSelectedListener監聽器
  53. g.setAdapter(newImageAdapter(this));
  54. g.setOnItemSelectedListener(this);
  56. }
  57. //創建內部類ImageAdapter
  58. publicclassImageAdapterextendsBaseAdapter{
  59. publicImageAdapter(Contextc){
  60. mContext=c;
  61. }
  62. publicintgetCount(){
  63. returnmThumbIds.length;
  64. }
  65. publicObjectgetItem(intposition){
  66. returnposition;
  67. }
  68. publiclonggetItemId(intposition){
  69. returnposition;
  70. }
  71. publicViewgetView(intposition,ViewconvertView,ViewGroupparent){
  72. ImageViewi=newImageView(mContext);
  74. i.setImageResource(mThumbIds[position]);
  75. //設置邊界對齊
  76. i.setAdjustViewBounds(true);
  77. //設置布局參數
  78. i.setLayoutParams(newGallery.LayoutParams(
  79. LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT));
  80. //設置背景資源
  81. i.setBackgroundResource(R.drawable.picture_frame);
  82. returni;
  83. }
  84. privateContextmContext;
  85. }
  87. @Override
  88. //實現onItemSelected()方法，更換圖片
  89. publicvoidonItemSelected(AdapterView<?>adapter,Viewv,intposition,
  90. longid){
  91. //設置圖片資源
  92. mSwitcher.setImageResource(mImageIds[position]);
  93. }
  95. @Override
  96. publicvoidonNothingSelected(AdapterView<?>arg0){
  98. }
  100. @Override
  101. //實現makeView()方法，為ImageView設置布局格式
  102. publicViewmakeView(){
  103. ImageViewi=newImageView(this);
  104. //設置背景顏色
  105. i.setBackgroundColor(0xFF000000);
  106. //設置比例類型
  107. i.setScaleType(ImageView.ScaleType.FIT_CENTER);
  108. //設置布局參數
  109. i.setLayoutParams(newImageSwitcher.LayoutParams(
  110. LayoutParams.FILL_PARENT,LayoutParams.FILL_PARENT));
  111. returni;
  112. }
  113. }

main.xml

  1. <?xmlversion="1.0"encoding="utf-8"?>
  2. <RelativeLayoutxmlns: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;
  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;
  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. }
  53. public Object getItem(int item) {
  54. return item;
  55. }
  57. public long getItemId(int id) {
  58. return id;
  59. }
  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. }

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;
  12. public class MainActivity extends Activity {
  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);
  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. }
  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});
  37. //獲得GridView實例
  38. gv = (GridView)findViewById(R.id.mygridview);
  39. //為GridView設置適配器
  40. gv.setAdapter(adapter);
  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>

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;
  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;
  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. };
  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);
  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;
  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. }
  66. @Override
  67. public int getCount()
  68. {
  69. if (null != pictures)
  70. {
  71. return pictures.size();
  72. } else
  73. {
  74. return 0;
  75. }
  76. }
  78. @Override
  79. public Object getItem(int position)
  80. {
  81. return pictures.get(position);
  82. }
  84. @Override
  85. public long getItemId(int position)
  86. {
  87. return position;
  88. }
  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. }
  110. }
  112. class ViewHolder
  113. {
  114. public TextView title;
  115. public ImageView image;
  116. }
  118. class Picture
  119. {
  120. private String title;
  121. private int imageId;
  123. public Picture()
  124. {
  125. super();
  126. }
  128. public Picture(String title, int imageId)
  129. {
  130. super();
  131. this.title = title;
  132. this.imageId = imageId;
  133. }
  135. public String getTitle()
  136. {
  137. return title;
  138. }
  140. public void setTitle(String title)
  141. {
  142. this.title = title;
  143. }
  145. public int getImageId()
  146. {
  147. return imageId;
  148. }
  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>

效果圖：

本文出自 「IT的點點滴滴」 博客，請務必保留此出處http://liangruijun.blog.51cto.com/3061169/647355


推薦閱讀：

TAG:學習 | Android | 筆記 | Android開發 | Gallery | View |