Gallery與ImageSwitcher結合使用

1. 效果：

廢話少說，先直接看效果，類似於QQ空間相冊，分兩部分，上面一部分是所有圖片的橫向排列，下面是顯示所點擊的圖片：

2.代碼分析：

該示例主要用到兩個控件，分別是Gallery和ImageSwticher，兩者都可以綁定數據源，然後顯示圖片，不過Gallery是一次性把所有數據源的圖片都顯示出來，用戶可滑動查看（見圖上），而ImageSwitcher是一張一張放大顯示。這個數據源是通過Adapter來綁定的。還可以通過繼承BaseAdapter，重寫getView方法來自定義顯示的View。

Gallery的使用方法：

（1）設置Adapter；

（2）設置setOnItemSelectedListener。

ImageSwitcher的使用方法：

（1）設置Adapter（可選）；

（2）實現ViewFactory接口，重寫makeView方法；

（3）setFactory設置ImageSwitcher的Factory。

3. 源代碼：

（1）XML佈局文件：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

<RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" tools:context=".MainActivity"> <Gallery android:id="@+id/gallery" android:layout_width="fill_parent" android:layout_height="wrap_content"/> <ImageSwitcher android:id="@+id/imageSwitcher" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@id/gallery"> </ImageSwitcher> </RelativeLayout>

（2）Java代碼：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117

packagecth.android.gallery; importandroid.app.Activity; importandroid.content.Context; importandroid.os.Bundle; importandroid.view.View; importandroid.view.ViewGroup; importandroid.view.ViewGroup.LayoutParams; importandroid.widget.AdapterView; importandroid.widget.AdapterView.OnItemSelectedListener; importandroid.widget.BaseAdapter; importandroid.widget.Gallery; importandroid.widget.ImageSwitcher; importandroid.widget.ImageView; importandroid.widget.ImageView.ScaleType; importandroid.widget.ViewSwitcher.ViewFactory; /** * 該項目實現的是圖片欄的滑動以及點擊圖片欄中的圖片可顯示大圖片，通過Gallery和ImageSwitcher兩個控件實現的。 * @author CTH * */ publicclassMainActivity extendsActivity implementsOnItemSelectedListener,ViewFactory { @SuppressWarnings("deprecation") privateGallery gallery; privateImageSwitcher imageSwitcher; //存放要顯示的圖片的ID的整型數組 privateint[] resId = { R.drawable.gallery1, R.drawable.gallery2, R.drawable.gallery3, R.drawable.gallery4 }; @Override protectedvoidonCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); gallery = (Gallery) findViewById(R.id.gallery); ImageAdapter imageAdapter = newImageAdapter(MainActivity.this); gallery.setAdapter(imageAdapter); gallery.setOnItemSelectedListener(this); imageSwitcher = (ImageSwitcher) findViewById(R.id.imageSwitcher); imageSwitcher.setFactory(this); } /** * 圖片數據的適配器，主要實現的函數是getView函數，該函數返回每個每個圖片對象。 * @author CTH * */ classImageAdapter extendsBaseAdapter { privateContext context; publicImageAdapter(Context context) { this.context = context; } @Override publicintgetCount() { returnresId.length; } @Override publicObject getItem(intposition) { returnresId[position]; } @Override publiclonggetItemId(intposition) { returnposition; } @Override publicView getView(intposition, View convertView, ViewGroup parent) { ImageView imageView = null; if(convertView != null) { imageView = (ImageView) convertView; } else{ imageView = newImageView(context); imageView.setImageResource(resId[position]); imageView.setScaleType(ScaleType.FIT_XY); imageView.setLayoutParams(newGallery.LayoutParams(300, 150)); } returnimageView; } } /** * Gallery被點擊執行的函數。 */ @Override publicvoidonItemSelected(AdapterView<?> parent, View view, intposition, longid) { imageSwitcher.setImageResource(resId[position]); } /** * Gallery未被點擊執行的函數。 */ @Override publicvoidonNothingSelected(AdapterView<?> parent) { } /** * 實現ViewFactory接口函數。當ImageSwitcher被調用時，會回調該函數以獲取ImageSwitcher顯示的View。 */ @Override publicView makeView() { ImageView i = newImageView(this); i.setBackgroundColor(0x1B0ED8); i.setScaleType(ImageView.ScaleType.FIT_CENTER); i.setLayoutParams(newImageSwitcher.LayoutParams(LayoutParams.FILL_PARENT,LayoutParams.FILL_PARENT)); returni; } }

這樣，就可以實現點擊Gallery上方的一張圖片，將其放大顯示在下方的效果了。