Android 自學之畫廊視圖(Gallery)功能和用法

標籤：des   android   style   blog   http   color   java   os   

Gallery與之前講的Spinner有共同的父類：AbsSpinner，表明Gallery和Spinner都是一個列表框。他們之間的區別在於Spinner顯示的是一個垂直的列表框，而Gallery顯示的是一個水平的列表框。Gallery與Spinner有一個區別：Spinner的作用是供使用者選擇，而Gallery則允許使用者通過拖動來查看上一個、下一個清單項目。

Gallery常用的XML屬性及相關方法

XML屬性	相關方法	說明
android：animationDuration	setAnimationDuration(int)	設定清單項目切換時的動畫期間
android：gravity	setGravity(int)	設定對齊
android：spacing	setSpacing(int)	設定Gallery內清單項目之間的間距
android：unselectedAlpha	setUnselectedAlpha(int)	設定沒有選中清單項目的透明性

Gallery本身的用法非常簡單----基本上和Spinner的用法相似，只要為他提供一個內容Adapter即可，該Adapter的getView方法返回的View作為Gallery列表的清單項目；如果程式需要監控到Gallery選擇項的改變，可以通過為Gallery添加OnItemSelectedListener監聽器即可實現。

為此做了一個關於“投影片”式圖片瀏覽器的案例，這個案例和我們前面寫的Android 自學之網格試圖(GridView)和圖片切換器(ImageSwitcher)功能和用法這個裡面的案例很相似；二者都是帶有預覽圖片的效果，但本案例採用Gallery作為圖片預覽器，所以介面會更加的友好。Gallery會產生一個“水平列表”，每個清單項目就是一張圖片預覽，而Gallery產生“水平列表”可以讓使用者拖動來切換清單項目。

下面我們先看看案例的布局部分的代碼：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 <!-- 定義一個ImageSwitcher組件 --> 7 <ImageSwitcher android:id="@+id/switcher" 8     android:layout_width="320dp" 9     android:layout_height="320dp"10     />11 <!-- 定義一個Gallery組件 -->12 <Gallery android:id="@+id/gallery"13     android:layout_width="fill_parent"14     android:layout_height="wrap_content"15     android:layout_marginTop="25dp" 16     android:unselectedAlpha="0.6"17     android:spacing="3pt"18     />    19 </LinearLayout>

上面的布局很簡單，只定義了兩個組件：ImageSwitcher和Gallery組件。主程式也很簡單，為ImageSwitcher傳入一個ViewFactory對象，為Gallery傳入一個Adapter對象。這樣ImageSwitcher和Gallery就可以工作了。

為了讓ImageSwitcher可以顯示Gallery中選中的圖片，為Gallery綁定一個叫做OnItemSelectedListener監聽。

主程式：GalleryTest.java

  1 package com.yangjing.gallarytest;  2   3 import android.app.Activity;  4 import android.content.res.TypedArray;  5 import android.os.Bundle;  6 import android.view.View;  7 import android.view.ViewGroup;  8 import android.view.ViewGroup.LayoutParams;  9 import android.view.animation.AnimationUtils; 10 import android.widget.AdapterView; 11 import android.widget.AdapterView.OnItemSelectedListener; 12 import android.widget.BaseAdapter; 13 import android.widget.Gallery; 14 import android.widget.ImageSwitcher; 15 import android.widget.ImageView; 16 import android.widget.ViewSwitcher.ViewFactory; 17  18 public class GallaryTest extends Activity{ 19  20     int[] imageIds = new int[] 21     { 22         R.drawable.shuangzi, R.drawable.shuangyu, 23         R.drawable.chunv, R.drawable.tiancheng, R.drawable.tianxie, 24         R.drawable.sheshou, R.drawable.juxie, R.drawable.shuiping, 25         R.drawable.shizi, R.drawable.baiyang, R.drawable.jinniu, 26         R.drawable.mojie }; 27  28     @Override 29     public void onCreate(Bundle savedInstanceState) 30     { 31         super.onCreate(savedInstanceState); 32         setContentView(R.layout.main); 33         final Gallery gallery = (Gallery) findViewById(R.id.gallery); 34         // 擷取顯示圖片的ImageSwitcher對象 35         final ImageSwitcher switcher = (ImageSwitcher)  36             findViewById(R.id.switcher); 37         // 為ImageSwitcher對象設定ViewFactory對象 38         switcher.setFactory(new ViewFactory() 39         { 40             @Override 41             public View makeView() 42             { 43                 ImageView imageView = new ImageView(GallaryTest.this); 44                 imageView.setBackgroundColor(0xff0000); 45                 imageView.setScaleType(ImageView.ScaleType.FIT_CENTER); 46                 imageView.setLayoutParams(new ImageSwitcher.LayoutParams( 47                     LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT)); 48                 return imageView; 49             } 50         }); 51         // 設定圖片更換的動畫效果 52         switcher.setInAnimation(AnimationUtils.loadAnimation(this, 53             android.R.anim.fade_in)); 54         switcher.setOutAnimation(AnimationUtils.loadAnimation(this, 55             android.R.anim.fade_out)); 56         // 建立一個BaseAdapter對象，該對象負責提供Gallery所顯示的圖片 57         BaseAdapter adapter = new BaseAdapter() 58         { 59             @Override 60             public int getCount() 61             { 62                 return imageIds.length; 63             } 64             @Override 65             public Object getItem(int position) 66             { 67                 return position; 68             } 69             @Override 70             public long getItemId(int position) 71             { 72                 return position; 73             } 74  75             // 該方法的返回的View就是代表了每個清單項目 76             @Override 77             public View getView(int position, View convertView, ViewGroup parent) 78             { 79                 // 建立一個ImageView 80                 ImageView imageView = new ImageView(GallaryTest.this); 81                 imageView.setImageResource(imageIds[position % imageIds.length]); 82                 // 設定ImageView的縮放類型 83                 imageView.setScaleType(ImageView.ScaleType.FIT_XY); 84                 imageView.setLayoutParams(new Gallery.LayoutParams(75, 100)); 85                 TypedArray typedArray = obtainStyledAttributes(R.styleable.Gallery); 86                 imageView.setBackgroundResource(typedArray.getResourceId(R.styleable.Gallery_android_galleryItemBackground, 0)); 87                 return imageView; 88             } 89         }; 90         gallery.setAdapter(adapter); 91         gallery.setOnItemSelectedListener(new OnItemSelectedListener() 92         { 93             // 當Gallery選中項發生改變時觸發該方法 94             @Override 95             public void onItemSelected(AdapterView<?> parent, View view, 96                 int position, long id) 97             { 98                 switcher.setImageResource(imageIds[position % imageIds.length]); 99             }100 101             @Override102             public void onNothingSelected(AdapterView<?> parent)103             {104             }105         });106     }107 }

 

程式運行後的效果展示：