Android Gallery組件實現迴圈顯示映像

標籤：

Gallery組件主要用於橫向顯示映像列表，只是按常規做法。Gallery組件僅僅能有限地顯示指定的映像。也就是說，假設為Gallery組件指定了10張映像，那麼當Gallery組件顯示到第10張時，就不會再繼續顯示了。這儘管在大多數時候沒有什麼關係，但在某些情況下，我們希望映像顯示到最後一張時再重第1張開始顯示，也就是迴圈顯示。要實現這樣的風格的Gallery組件，就須要對Gallery的Adapter對象進行一番改進。

　　Gallery組件的傳統使用方法

　　在實現可迴圈顯示映像的Gallery組件之前先來回想一下Gallery組件的傳統使用方法。Gallery組件能夠橫向顯示一個映像列表，當單擊當前映像的後一個映像時，這個映像列表會向左移動一格，當單擊當前映像的前一個映像時，這個映像列表會向右移動一樣。也能夠通過拖動的方式來向左和向右移動映像列表。當前顯示的是第1個映像的效果1所看到的。Gallery組件顯示到最後一個映像的效果2所看到的

 

圖1

 

圖2

 

 

 

從圖2能夠看出，當顯示到最後一個映像時，列表後面就沒有映像的，這也是Gallery組件的基本顯示效果。在本文後面的部分將具體介紹怎樣使Gallery組件顯示到最後一個映像時會從第1個映像開始顯示。

　　好了，如今我們來看一1和圖2的效果是怎樣做出來的吧。Gallery既然用於顯示映像，那第1步就必需要有一些影像檔用來顯示。如今能夠任意準備一些映像。在本文的範例中準備了6個jpg檔案（item1.jpg至item15.jpg）。將這些檔案都放在res/drawable檔案夾中

以下將這些映像的資源ID都儲存在int數組中，代碼例如以下：

private int[] myImageIds = {R.drawable.photo1, R.drawable.photo2, R.drawable.photo3, R.drawable.photo4, R.drawable.photo5, R.drawable.photo6,};

 

在本例的main.xml檔案裡配置了一個Gallery組件，代碼例如以下：

<?xml　version="1.0"　encoding="utf-8"?><LinearLayout　xmlns:android="http://schemas.android.com/apk/res/android"　　　　android:orientation="vertical"　android:layout_width="fill_parent"　　　　android:layout_height="fill_parent">　　　　<Gallery　android:id="@+id/gallery"　android:layout_width="fill_parent"　　　　　　　　android:layout_height="wrap_content"　android:layout_marginTop="30dp"　/></LinearLayout>

 

 

如今在onCreate方法中裝載這個組件，代碼例如以下：

　public　void　onCreate(Bundle　savedInstanceState)　　　　{　　　　　　　　super.onCreate(savedInstanceState);　　　　　　　　setContentView(R.layout.main);　　　　　　　　//　裝載Gallery組件　　　　　　　　Gallery　gallery　=　(Gallery)　findViewById(R.id.gallery);　　　　　　　　//　建立用於描寫敘述映像資料的ImageAdapter對象　　　　　　　　ImageAdapter　imageAdapter　=　new　ImageAdapter(this);　　　　　　　　　//　設定Gallery組件的Adapter對象　　　　　　　　gallery.setAdapter(imageAdapter);　　　　}

 

 

在上面的代碼中涉及到一個很重要的類：ImageAdapter。該類是android.widget.BaseAdapter的子類，用於描寫敘述映像資訊。以下先看一下這個類的完整代碼

　public　class　ImageAdapter　extends　BaseAdapter　　　　{　　　　　　　　int　mGalleryItemBackground;　　　　　　　　private　Context　mContext;　　　　　　　　public　ImageAdapter(Context　context)　　　　　　　　{　　　　　　　　　　　　mContext　=　context;　　　　　　　　　　　　　　//　獲得Gallery組件的屬性　　　　　　　　　　　　TypedArray　typedArray　=　obtainStyledAttributes(R.styleable.Gallery);　　　　　　　　　　　　mGalleryItemBackground　=　typedArray.getResourceId(　　　　　　　　　　　　　　　　　　　　R.styleable.Gallery_android_galleryItemBackground,　0);　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　}　　　　　　　　　//　返回映像總數　　　　　　　　public　int　getCount()　　　　　　　　{　　　　　　　　　　　　return　resIds.length;　　　　　　　　}　　　　　　　　public　Object　getItem(int　position)　　　　　　　　{　　　　　　　　　　　　return　position;　　　　　　　　}　　　　　　　　public　long　getItemId(int　position)　　　　　　　　{　　　　　　　　　　　　return　position;　　　　　　　　}　　　　　　　　　//　返回詳細位置的ImageView對象　　　　　　　　public　View　getView(int　position,　View　convertView,　ViewGroup　parent)　　　　　　　　{　　　　　　　　　　　　ImageView　imageView　=　new　ImageView(mContext);　　　　　　　　　　　　　//　設定當前映像的映像（position為當前映像列表的位置）　　　　　　　　　　　　imageView.setImageResource(myImageIds[position]);　　　　　　　　　　　　imageView.setScaleType(ImageView.ScaleType.FIT_XY);　　　　　　　　　　　　imageView.setLayoutParams(new　Gallery.LayoutParams(163,　106));　　　　　　　　　　　　//　設定Gallery組件的背景風格　　　　　　　　　　　　imageView.setBackgroundResource(mGalleryItemBackground);　　　　　　　　　　　　return　imageView;　　　　　　　　}　　　　}

 

在編寫ImageAdapter類時應注意的兩點：

　　1.　在ImageAdapter類的構造方法中獲得了Gallery組件的屬性資訊。這些資訊被定義在res/values/attrs.xml檔案裡，代碼例如以下：

<?xml　version="1.0"　encoding="utf-8"?><resources>　　　　<declare-styleable　name="Gallery">　　　　　　　　<attr　name="android:galleryItemBackground"　/>　　　　</declare-styleable></resources>

 

 

上面的屬性資訊用於設定Gallery的背景風格。

　　2.　在ImageAdapter類中有兩個很重要的方法：getCount和getView。當中getCount方法用於返回映像總數，要注意的是，這個總數不能大於映像的實際數（能夠小於映像的實際數），否則會拋出越界異常。當Gallery組件要顯示某一個映像時，就會調用getView方法，並將當前的映像索引（position參數）傳入該方法。一般getView方法用於返回每個顯示映像的組件（ImageView對象）。從這一點能夠看出，Gallery組件是即時顯示映像的，而不是一下將全部的映像都顯示出來。在getView方法中除了建立了ImageView對象，還用從resIds數組中獲得了對應的映像資源ID來設定在ImageView中顯示的映像。最後還設定了Gallery組件的背景顯示風格。

　　OK，如今來執行這個程式，來回拖動映像列表，就會看到1和圖2所看到的的效果了。

　　迴圈顯示映像的原理

　　迴圈顯示有些相似於迴圈鏈表，最後一個結點的下一個結點又是第1個結點。迴圈顯示映像也能夠類比這一點。

　　或許細心的讀者從上一節實現的ImageAdapter類中會發現些什麼。對！就是getView方法中的position參數和getCount方法的關係。position參數的值是不可能超過getCount方法返回的值的，也就是說，position參數值的範圍是0至getCount() - 1。

 

　假設這時Gallery組件正好顯示到最後一個映像，position參數值正好為getCount() - 1。那麼我們怎樣再讓Gallery顯示下一個映像呢？也就是說讓position參數值再增1，對！將getCount()方法的傳回值也增1。

　　那麼這裡另一個問題，假設position參數值無限地添加，就意味著myImageIds數組要不斷地增大，這樣會大大消耗系統的資源。想到這，就須要解決兩個問題：既要position不斷地添加，又讓resIds數組中儲存的映像資源ID是有限的，該怎麼做呢？對於getCount()方法非常好解決，能夠讓getCount方法返回一個非常大的數，比如，Integer.MAX_VALUE。這時position參數值就能夠隨著Gallery組件的映像不斷向前移動而增大。如今myImageIds數組僅僅有6個元素，假設position的值超過數組邊界，要想繼續迴圈取得數組中的元素（也就是說，當position的值是6時，取myImageIds數組的第0個元素，是6時取第1個元素），最簡單的方法就是取餘，代碼例如以下：

 

 

myImageIds[position　%　myImageIds.length]

 

　在本節對ImageAdapter類做了例如以下兩個改進：

　　1.　使getCount方法返回一個非常大的值。建議返回Integer.MAX_VALUE。

　　2.　在getView方法中通過取餘來迴圈取得resIds數組中的映像資源ID。

　　通過上面兩點改進，能夠使映像列表在向右移動時會迴圈顯示映像。當然，這樣的方法從本質上說僅僅是偽迴圈，也就是說，假設真把映像移動到getCount方法返回的值那裡，那也就顯示到最後一個映像的。只是在這裡getCount方法返回的是Integer.MAX_VALUE，這個值超過了20億，除非有人真想把映像移動到第20億的位置，否則Gallery組件看著就是一個迴圈顯示映像的組件。

　　實現迴圈顯示映像的Gallery組件

　　在本節將組出與迴圈顯示映像相關的ImageAdapter類的完整代碼。讀者能夠從中看到上一節介紹的兩點改進。為了使介面看上去更豐滿，本例還在單擊某一個Gallery組件中的映像時在下方顯示一個放大的映像（使用ImageSwitcher組件）。本例的顯示效果3所看到的。當不斷向後移動映像時，映像可不斷顯示，讀者能夠自己執行本例來體驗一下。

本例中Main類的完整代碼例如以下：

package irdc.EX04_10;import android.app.Activity; import android.os.Bundle; /*本範例需使用到的class*/import android.content.Context;import android.content.res.TypedArray;import android.view.View;import android.view.ViewGroup;import android.widget.AdapterView;import android.widget.BaseAdapter;import android.widget.Gallery;import android.widget.ImageView; import android.widget.Toast;import android.widget.AdapterView.OnItemClickListener;public class EX04_10 extends Activity{ /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); /* 透過findViewById取得 */ Gallery g = (Gallery) findViewById(R.id.mygallery); /* 新增一ImageAdapter並設定給Gallery對象 */ g.setAdapter(new ImageAdapter(this)); /* 設定一個itemclickListener並Toast被點選圖片的位置 */ setTitle("Gallery 實現迴圈瀏覽圖片"); g.setOnItemClickListener(new OnItemClickListener() { public void onItemClick(AdapterView parent, View v, int position, long id) { Toast.makeText(EX04_10.this, getString(R.string.my_gallery_text_pre) + position + getString(R.string.my_gallery_text_post), Toast.LENGTH_SHORT).show(); } }); } public class ImageAdapter extends BaseAdapter /* 改寫BaseAdapter自己定義一ImageAdapter class */ { int mGalleryItemBackground; private Context mContext; /* ImageAdapter的建構子 */ private int[] myImageIds = {R.drawable.photo1, R.drawable.photo2, R.drawable.photo3, R.drawable.photo4, R.drawable.photo5, R.drawable.photo6,}; public ImageAdapter(Context c) { mContext = c; TypedArray a = obtainStyledAttributes(R.styleable.Gallery); /* 使用在res/values/attrs.xml中的定義 的Gallery屬性. */ mGalleryItemBackground = a.getResourceId(R.styleable.Gallery_android_galleryItemBackground, 0); ///*取得Gallery屬性的Index a.recycle();/* 讓對象的styleable屬性可以重複使用 */ } public int getCount() /* 一定要重寫的方法getCount,傳回圖片數目總數 */ { //return myImageIds.length; return Integer.MAX_VALUE; } public Object getItem(int position) /* 一定要重寫的方法getItem,傳回position */ { return position; } public long getItemId(int position) /* 一定要重寫的方法getItemId,傳回position */ { return position; } public View getView(int position, View convertView, ViewGroup parent)/* 一定要重寫的方法getView,傳回一View對象 */ { // if (position == getCount())// {// position = 0;// } ImageView i = new ImageView(mContext); i.setImageResource(myImageIds[position%myImageIds.length]); /* 設定圖片給imageView對象 */ i.setScaleType(ImageView.ScaleType.FIT_XY); /* 又一次設定圖片的寬高 */ i.setLayoutParams(new Gallery.LayoutParams(136, 88)); /* 又一次設定Layout的寬高 */ i.setBackgroundResource(mGalleryItemBackground); /* 設定Gallery背景圖 */ return i; /* 傳回imageView物件 */ } }}

 

 

 2011-01-15

 14:33:17

Android Gallery組件實現迴圈顯示映像