Android 滑動效果入門篇（二）—— Gallery

Gallery 是Android官方提供的一個View容器類，繼承於AbsSpinner類，用於實現頁面滑動效果。

從上面的繼承關係可以看出，AbsSpinner類繼承自AdapterView，因此我們可以自訂實現Adapter，來填充Gallery容器的資料。

本樣本通過自己實現一個Adapter，來填充Gallery容器的圖片資料，首先看效果：

Activity

import android.app.Activity;<br />import android.os.Bundle;<br />import android.view.View;<br />import android.widget.AdapterView;<br />import android.widget.Gallery;<br />import android.widget.Toast;</p><p>public class GalleryActivity extends Activity {<br />@Override<br />public void onCreate(Bundle savedInstanceState) {<br />super.onCreate(savedInstanceState);<br />setContentView(R.layout.main);</p><p>Gallery gallery = (Gallery) findViewById(R.id.gallery);<br />gallery.setAdapter(new ImageAdapter(this)); // gallery添加ImageAdapter圖片資源<br />gallery.setOnItemClickListener(listener); // gallery設定點擊圖片資源的事件<br />}</p><p>AdapterView.OnItemClickListener listener = new AdapterView.OnItemClickListener() {<br />@Override<br />public void onItemClick(AdapterView<?> parent, View view, int position, long id) {<br />Toast.makeText(GalleryActivity.this, "圖片 " + (position + 1), Toast.LENGTH_SHORT).show();<br />}<br />};<br />}

ImageAdapter.java

import android.content.Context;<br />import android.view.View;<br />import android.view.ViewGroup;<br />import android.widget.BaseAdapter;<br />import android.widget.Gallery;<br />import android.widget.ImageView;</p><p>public class ImageAdapter extends BaseAdapter {<br />private Context mContext;</p><p>// 圖片數組源<br />private Integer[] imgs = { R.drawable.img1, R.drawable.img2,<br />R.drawable.img3, R.drawable.img4, R.drawable.img5,<br />R.drawable.img6, R.drawable.img7};</p><p>public ImageAdapter(Context c) {<br />mContext = c;<br />}</p><p>@Override<br />public int getCount() {<br />return imgs.length;<br />}</p><p>// 擷取圖片位置<br />@Override<br />public Object getItem(int position) {<br />return imgs[position];<br />}</p><p>// 擷取圖片ID<br />@Override<br />public long getItemId(int position) {<br />return position;<br />}</p><p>@Override<br />public View getView(int position, View convertView, ViewGroup parent) {<br />ImageView imageview = new ImageView(mContext);</p><p>imageview.setImageResource(imgs[position]);<br />imageview.setLayoutParams(new Gallery.LayoutParams(240, 120));// 設定布局 圖片120×120顯示<br />imageview.setScaleType(ImageView.ScaleType.CENTER);// 設定顯示比例類型（不縮放）<br />return imageview;<br />}<br />}

main.xml

<?xml version="1.0" encoding="utf-8"?><br /><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"<br /> android:layout_width="fill_parent"<br /> android:layout_height="wrap_content"<br /> android:orientation="vertical"></p><p> <!-- 文字置中顯示 android:gravity --><br /> <!-- 控制項置中顯示 android:layout_gravity --></p><p> <TextView<br /> android:id="@+id/tv"<br /> android:layout_width="fill_parent"<br /> android:layout_height="wrap_content"<br /> android:gravity="center"<br /> android:layout_gravity="center"<br /> android:layout_marginTop="50dip"<br /> android:textColor="#ffff0000"<br /> android:textSize="30sp"<br /> android:text="Gallery Test"/></p><p> <Gallery<br /> android:id="@+id/gallery"<br /> android:layout_width="fill_parent"<br /> android:layout_height="wrap_content"<br /> android:layout_marginTop="10dip"<br /> android:layout_below="@id/tv" /></p><p></RelativeLayout>

源碼下載

樣本分析：

1、ImageAdapter中，是繼承BaseAdapter自訂實現的，重載了BaseAdapter的幾個虛方法，其中重要的有兩個

getCount()： 返回資源的大小（總長度）

getView(int position, View convertView, ViewGroup parent)： 返回當前顯示的資源（擷取焦點）

2、GalleryActivity中，通過gallery.setAdapter(imgAdapter); 設定資源，然後設定gallery的點擊監聽事件。

3、main.xml中，是布局檔案，顯示一個TextView和Gallery，RelativeLayout是相對布局

總體來說，Gallery 上述的樣本很簡單，結構比較清晰，能夠滿足基本的應用。

Gallery 進階應用程式

上面的樣本，僅僅是最簡單的Gallery應用，如果我們想做的更酷、更炫的效果：

1、Gallery 圖片顯示能夠迴圈播放，即向右滑到左側第一張圖片後，需要接著顯示最後一張圖片；向左滑到最後一張圖片後，需要接著顯示第一張圖片，往複不間斷顯示的迴圈效果。

2、選中圖片高亮，未選中圖片陰影，更加突出當前擷取焦點的選中圖片

3、區分“點擊”與“選中”圖片事件的區別和適用情境

效果1 —— 高亮顯示

沒有選中，在GalleryActivity中，設定gallery.setUnselectedAlpha(0.3f); 透明度為0.3

選中，在ImageAdapter的getView(int position, View convertView, ViewGroup parent)中，設定imageview.setBackgroundColor(Color.alpha(1)); 背景色為1

效果2 —— 迴圈播放

原理：Gallery迴圈播放的原理，跟迴圈鏈表的思想一樣，首尾item串連都是通過“取餘”實現

修改1、ImageAdapter中的getCount() 方法中，修改傳回值為無窮大 return Integer.MAX_VALUE;

修改2、ImageAdapter中的getView(int position, View convertView, ViewGroup parent)方法中，設定imageview.setImageResource(imgs[position % imgs.length]); 取餘

修改3、GalleryActivity中，設定gallery.setSelection(imgAdapter.imgs.length * 100); 使gallery顯示圖片的位置從中間開始顯示（即imgAdapter.imgs.length * 100）

修改解釋：

修改1，主要是為了是迴圈接近無限往複迴圈，使position無限大，迴圈在實踐應用上不容易結束（理論上會結束，即2^31-1約20億次迴圈後）

修改2，通過取餘，使圖片能夠重複利用並顯示

修改3，由於起始位置如果是0，則向右滑動左側將無法迴圈（此時左側將為-1，超出了imgs[]數組的下邊界），因此開始應設定起始位置為imgAdapter.imgs.length的整數倍

效果3 —— “點擊”和“選中”事件

1、點擊事件OnItemClickListener，是需要用手點擊才觸發，滑動時不觸發

2、選中事件OnItemSelectedListener，是當圖片滑到螢幕正中，則視為自動選中，在滑動的過程中會觸發

適用情境：

1、點擊事件OnItemClickListener，是在確定要選中該項時，才點擊進行邏輯處理

2、選中事件OnItemSelectedListener，可以用來提醒使用者，當前擷取焦點的項，如果確認為該項則需要點擊OnItemClickListener後，進行下一步的邏輯處理

進階應用程式完整代碼：

Activity

import android.app.Activity;<br />import android.os.Bundle;<br />import android.view.Gravity;<br />import android.view.View;<br />import android.widget.AdapterView;<br />import android.widget.Gallery;<br />import android.widget.Toast;</p><p>public class GalleryActivity extends Activity {</p><p>private ImageAdapter imgAdapter = null;// 聲明圖片資來源物件<br />private Gallery gallery = null;</p><p>@Override<br />public void onCreate(Bundle savedInstanceState) {<br />super.onCreate(savedInstanceState);<br />setContentView(R.layout.main);</p><p>gallery = (Gallery) findViewById(R.id.gallery);<br />imgAdapter = new ImageAdapter(this);<br />gallery.setAdapter(imgAdapter); // 設定圖片資源<br />gallery.setGravity(Gravity.CENTER_HORIZONTAL);// 設定水平置中顯示<br />gallery.setSelection(imgAdapter.imgs.length * 100);// 設定起始圖片顯示位置（可以用來製作gallery迴圈顯示效果）</p><p>gallery.setOnItemClickListener(clickListener); // 設定點擊圖片的監聽事件（需要用手點擊才觸發，滑動時不觸發）<br />gallery.setOnItemSelectedListener(selectedListener);// 設定選中圖片的監聽事件（當圖片滑到螢幕正中，則視為自動選中）<br />gallery.setUnselectedAlpha(0.3f);// 設定未選中圖片的透明度<br />gallery.setSpacing(40);// 設定圖片之間的間距<br />}</p><p>// 點擊圖片的監聽事件<br />AdapterView.OnItemClickListener clickListener = new AdapterView.OnItemClickListener() {<br />@Override<br />public void onItemClick(AdapterView<?> parent, View view, int position, long id) {<br />Toast.makeText(GalleryActivity.this, "點擊圖片 " + (position + 1), 100).show();<br />}<br />};</p><p>// 選中圖片的監聽事件<br />AdapterView.OnItemSelectedListener selectedListener = new AdapterView.OnItemSelectedListener() {<br />@Override<br />public void onItemSelected(AdapterView<?> parent, View view, int position, long id) {<br />Toast.makeText(GalleryActivity.this, "選中圖片 " + (position + 1), 20).show();<br />}</p><p>@Override<br />public void onNothingSelected(AdapterView<?> arg0) {</p><p>}<br />};<br />}

ImageAdapter.java

import android.content.Context;<br />import android.graphics.Color;<br />import android.view.View;<br />import android.view.ViewGroup;<br />import android.widget.BaseAdapter;<br />import android.widget.Gallery;<br />import android.widget.ImageView;</p><p>public class ImageAdapter extends BaseAdapter {<br />private Context mContext;</p><p>// 圖片數組源<br />public Integer[] imgs = { R.drawable.img1, R.drawable.img2,<br />R.drawable.img3, R.drawable.img4, R.drawable.img5,<br />R.drawable.img6, R.drawable.img7};</p><p>public ImageAdapter(Context c) {<br />mContext = c;<br />}</p><p>@Override<br />public int getCount() {<br />return Integer.MAX_VALUE;<br />}</p><p>// 擷取圖片位置<br />@Override<br />public Object getItem(int position) {<br />return imgs[position];<br />}</p><p>// 擷取圖片ID<br />@Override<br />public long getItemId(int position) {<br />return position;<br />}</p><p>@Override<br />public View getView(int position, View convertView, ViewGroup parent) {<br />ImageView imageview = new ImageView(mContext);</p><p>imageview.setImageResource(imgs[position % imgs.length]);<br />imageview.setLayoutParams(new Gallery.LayoutParams(200, 94));// 設定布局 圖片120×120顯示<br />imageview.setScaleType(ImageView.ScaleType.CENTER);// 設定顯示比例類型<br />imageview.setBackgroundColor(Color.alpha(1));<br />return imageview;<br />}<br />}

源碼下載

參考推薦：

Gallery

Gallery tutorial