什么是Gallery？

Gallery是一個(gè)水平的列表選擇框，它允許用戶(hù)通過(guò)拖動(dòng)來(lái)查看上一個(gè)、下一個(gè)列表選項(xiàng)。

下圖是今天要實(shí)現(xiàn)的最終效果：

利用Gallery組件實(shí)現(xiàn)的一個(gè)橫向顯示圖像列表，可以通過(guò)左、右滑動(dòng)屏幕來(lái)切換圖像，并加上ImageSwitcher實(shí)現(xiàn)一個(gè)大圖片預(yù)覽功能。

1、一步一步來(lái)吧，首先先解決下上半部分（圖像導(dǎo)航）

先來(lái)看下效果圖，下圖是利用Gallery組件實(shí)現(xiàn)的一個(gè)橫向顯示圖像列表，可以通過(guò)左、右滑動(dòng)屏幕來(lái)切換圖像。

直接上代碼，注釋很全。

MainActivity.java

 1 package com.example.galleytest; 2  3 import android.app.Activity; 4 import android.os.Bundle; 5 import android.widget.Gallery; 6 /** 7  *  8  * @author Balla_兔子 9  * 和往?？刂剖褂梅椒ù笸‘?0  * 1、獲取數(shù)據(jù)源11  * 2、配置適配器12  * 3、綁定適配器13  */14 public class MainActivity extends Activity {15 16     PRivate Gallery gallery;// 聲明gallery對(duì)象17     private ImageAdapter adapter;//聲明自定義adapter對(duì)象18 19     // 1、定義數(shù)據(jù)源20     private int[] images = { R.drawable.item1, R.drawable.item2,21             R.drawable.item3, R.drawable.item4, R.drawable.item5,22             R.drawable.item6, R.drawable.item7, R.drawable.item8,23             R.drawable.item9, R.drawable.item10, R.drawable.item11,24             R.drawable.item12 };25 26     @Override27     protected void onCreate(Bundle savedInstanceState) {28         super.onCreate(savedInstanceState);29         setContentView(R.layout.activity_main);30 31         gallery=(Gallery) findViewById(R.id.gallery);//取得對(duì)象32         33         //2、設(shè)置適配器34         adapter=new ImageAdapter(images, this);//實(shí)例化自定義適配器對(duì)象35         36         //3、綁定適配器37         gallery.setAdapter(adapter);38         39     }40 41 }

ImageAdapter.java

 1 package com.example.galleytest; 2  3 import android.content.Context; 4 import android.view.View; 5 import android.view.ViewGroup; 6 import android.widget.BaseAdapter; 7 import android.widget.Gallery; 8 import android.widget.ImageView; 9 import android.widget.ImageView.ScaleType;10 11 //自定義適配器，繼承BaseAdapter復(fù)寫(xiě)方法12 public class ImageAdapter extends BaseAdapter {13 14     private int images[];15     private Context context;16     public ImageAdapter(int res[],Context context){17         this.images=res;18         this.context=context;19     }20     @Override21     //獲取資源總長(zhǎng)度22     public int getCount() {23         return images.length;24     }25 26     @Override27     //根據(jù)下標(biāo)id獲取資源對(duì)象28     public Object getItem(int position) {29         return images[position];30     }31 32     @Override33     //根據(jù)返回下標(biāo)id34     public long getItemId(int position) {35         return position;36     }37 38     @Override39     //根據(jù)下標(biāo)id返回對(duì)象的視圖view40     public View getView(int position, View convertView, ViewGroup parent) {41         //利用ImageView返回圖像展示42         ImageView imageView=new ImageView(context);43         //設(shè)置ImageView背景圖44         imageView.setBackgroundResource(images[position]);    45         //setLayoutParams()這個(gè)函數(shù)用于代碼自定義布局，為創(chuàng)建的view(ImageView)對(duì)象設(shè)置位置，大小，顏色等一系列的屬性46         imageView.setLayoutParams(new Gallery.LayoutParams(200, 150));47         //設(shè)置展示縮放風(fēng)格48         imageView.setScaleType(ScaleType.FIT_XY);49         return imageView;50     }51 52 }

activity_main.xml

 1 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 2     xmlns:tools="http://schemas.android.com/tools" 3     android:layout_width="match_parent" 4     android:layout_height="match_parent" 5     android:paddingBottom="@dimen/activity_vertical_margin" 6     android:paddingLeft="@dimen/activity_horizontal_margin" 7     android:paddingRight="@dimen/activity_horizontal_margin" 8     android:paddingTop="@dimen/activity_vertical_margin" 9     android:orientation="vertical"10     tools:context="com.example.galleytest.MainActivity" >11     <Gallery 12             android:id="@+id/gallery"13             android:layout_width="fill_parent"14             android:layout_height="wrap_content"15         />16 17 </LinearLayout>

執(zhí)行完上面代碼我們會(huì)發(fā)現(xiàn)，當(dāng)圖片滾動(dòng)到第一張或者最后一張，就自動(dòng)停止， 我們可以把它設(shè)置成無(wú)限循環(huán)重復(fù)的去展示這些圖片。

這里我們只需要去改動(dòng)自定義ImageAdapter適配器里2個(gè)位置就可以實(shí)現(xiàn)這個(gè)無(wú)限循環(huán)的效果

其一：返回圖片資源長(zhǎng)度，我們返回的長(zhǎng)度不再是數(shù)組長(zhǎng)度，而是一個(gè)巨大數(shù)

1     //獲取資源總長(zhǎng)度2     public int getCount() {3         //return images.length;4         return Integer.MAX_VALUE;//返回一個(gè)巨大數(shù)5     }

其二：為ImageView設(shè)置圖片顯示資源，我們用取余的方法，讓它實(shí)現(xiàn)無(wú)限循環(huán)

 1     public View getView(int position, View convertView, ViewGroup parent) { 2         //利用ImageView返回圖像展示 3         ImageView imageView=new ImageView(context); 4         //設(shè)置ImageView背景圖 5         imageView.setBackgroundResource(images[position%images.length]);    //用取余的方法，讓它實(shí)現(xiàn)無(wú)限循環(huán) 6         //setLayoutParams()這個(gè)函數(shù)用于代碼自定義布局，為創(chuàng)建的view(ImageView)對(duì)象設(shè)置位置，大小，顏色等一系列的屬性 7         imageView.setLayoutParams(new Gallery.LayoutParams(200, 150)); 8         //設(shè)置展示縮放風(fēng)格 9         imageView.setScaleType(ScaleType.FIT_XY);10         return imageView;11     }

無(wú)限循環(huán)輕松搞定，再試試看效果吧~

2、結(jié)合ImageSwitcher組件，使得圖片瀏覽效果更為流暢（可以把ImageSwitcher粗略的想象成ImageView的加強(qiáng)版，它可以帶來(lái)很多效果，比如圖片動(dòng)畫(huà)）

直接上代碼，依舊人性化注釋全面~

MainActivity.java

 1 package com.example.galleytest; 2  3 import android.app.Activity; 4 import android.os.Bundle; 5 import android.view.View; 6 import android.view.animation.AnimationUtils; 7 import android.widget.AdapterView; 8 import android.widget.Gallery; 9 import android.widget.ImageSwitcher;10 import android.widget.ImageView;11 import android.widget.ImageView.ScaleType;12 import android.widget.ViewSwitcher.ViewFactory;13 /**14  * 15  * @author Balla_兔子16  * 和往?？刂剖褂梅椒ù笸‘?7  * 1、獲取數(shù)據(jù)源18  * 2、配置適配器19  * 3、綁定適配器20  * 21  * 為Grallery設(shè)置監(jiān)聽(tīng)，因要結(jié)合ImageSwitcher，這里需要額外的實(shí)現(xiàn)一個(gè)圖像制造工廠(chǎng)ViewFactory22  */23 public class MainActivity extends Activity implements android.widget.AdapterView.OnItemSelectedListener,ViewFactory{24 25     private Gallery gallery;// 聲明gallery對(duì)象26     private ImageSwitcher imageSwitcher;//聲明一個(gè)ImageSwitcher對(duì)象27     private ImageAdapter adapter;//聲明自定義adapter對(duì)象28 29     // 1、定義數(shù)據(jù)源30     private int[] images = { R.drawable.item1, R.drawable.item2,31             R.drawable.item3, R.drawable.item4, R.drawable.item5,32             R.drawable.item6, R.drawable.item7, R.drawable.item8,33             R.drawable.item9, R.drawable.item10, R.drawable.item11,34             R.drawable.item12 };35 36     @Override37     protected void onCreate(Bundle savedInstanceState) {38         super.onCreate(savedInstanceState);39         setContentView(R.layout.activity_main);40 41         gallery=(Gallery) findViewById(R.id.gallery);//取得對(duì)象42         imageSwitcher=(ImageSwitcher) findViewById(R.id.imageSwitcher);//取得對(duì)象43         44         //添加監(jiān)聽(tīng)45         gallery.setOnItemSelectedListener(this);46         imageSwitcher.setFactory(this);47         //設(shè)置動(dòng)畫(huà)效果，圖片在imageSwitch的漸入漸出效果48         imageSwitcher.setInAnimation(AnimationUtils.loadAnimation(this, android.R.anim.fade_in));49         imageSwitcher.setOutAnimation(AnimationUtils.loadAnimation(this, android.R.anim.fade_out));50         51         52         //2、設(shè)置適配器53         adapter=new ImageAdapter(images, this);//實(shí)例化自定義適配器對(duì)象54         55         //3、綁定適配器56         gallery.setAdapter(adapter);57         58     }59 60     @Override61     //實(shí)現(xiàn)ViewFactory里的制造圖像方法，這里需要返回一個(gè)view對(duì)象，同樣的我們可以采用返回ImageView62     public View makeView() {63         ImageView imageView=new ImageView(this);64         imageView.setScaleType(ScaleType.FIT_CENTER);//展示效果65         return imageView;66     }67 68     //Gallery組件的監(jiān)聽(tīng)器69     @Override70     public void onItemSelected(AdapterView<?> parent, View view, int position,71             long id) {72             imageSwitcher.setBackgroundResource(images[position%images.length]);73     }74 75     @Override76     public void onNothingSelected(AdapterView<?> parent) {77         78     }79 80 }

ImageAdapter.java

 1 package com.example.galleytest; 2  3 import android.content.Context; 4 import android.view.View; 5 import android.view.ViewGroup; 6 import android.widget.BaseAdapter; 7 import android.widget.Gallery; 8 import android.widget.ImageView; 9 import android.widget.ImageView.ScaleType;10 11 //自定義適配器，繼承BaseAdapter復(fù)寫(xiě)方法12 public class ImageAdapter extends BaseAdapter {13 14     private int images[];15     private Context context;16     public ImageAdapter(int res[],Context context){17         this.images=res;18         this.context=context;19     }20     @Override21     //獲取資源總長(zhǎng)度22     public int getCount() {23         //return images.length;24         return Integer.MAX_VALUE;//返回一個(gè)巨大數(shù)25     }26 27     @Override28     //根據(jù)下標(biāo)id獲取資源對(duì)象29     public Object getItem(int position) {30         return images[position];31     }32 33     @Override34     //根據(jù)返回下標(biāo)id35     public long getItemId(int position) {36         return position;37     }38 39     @Override40     //根據(jù)下標(biāo)id返回對(duì)象的視圖view41     public View getView(int position, View convertView, ViewGroup parent) {42         //利用ImageView返回圖像展示43         ImageView imageView=new ImageView(context);44         //設(shè)置ImageView背景圖45         imageView.setBackgroundResource(images[position%images.length]);    //用取余的方法，讓它實(shí)現(xiàn)無(wú)限循環(huán)46         //setLayoutParams()這個(gè)函數(shù)用于代碼自定義布局，為創(chuàng)建的view(ImageView)對(duì)象設(shè)置位置，大小，顏色等一系列的屬性47         imageView.setLayoutParams(new Gallery.LayoutParams(200, 150));48         //設(shè)置展示縮放風(fēng)格49         imageView.setScaleType(ScaleType.FIT_XY);50         return imageView;51     }52 53 }

activity_main.xml

 1 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 2     xmlns:tools="http://schemas.android.com/tools" 3     android:layout_width="match_parent" 4     android:layout_height="match_parent" 5     android:paddingBottom="@dimen/activity_vertical_margin" 6     android:paddingLeft="@dimen/activity_horizontal_margin" 7     android:paddingRight="@dimen/activity_horizontal_margin" 8     android:paddingTop="@dimen/activity_vertical_margin" 9     android:orientation="vertical"10     tools:context="com.example.galleytest.MainActivity" >11     <Gallery 12             android:id="@+id/gallery"13             android:layout_width="fill_parent"14             android:layout_height="wrap_content"15         />16 17     <ImageSwitcher 18         android:id="@+id/imageSwitcher"19         android:layout_height="wrap_content"20         android:layout_width="fill_parent"21         android:layout_marginTop="20dp"22         ></ImageSwitcher>23 </LinearLayout>