簡單圖片瀏覽工具—ImageSwitcher和Gallery組件結合使用

ImageSwitcher和Gallery

ImageSwitcher：圖片切換

Gallery：畫廊，開發中也可用於做滑動的菜單

1.定義佈局文件activity_main.xml

<RelativeLayout xmlns: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" >
    <ImageSwitcher
        android:id="@+id/imageSwitcher1"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true" >
    </ImageSwitcher>

    <Gallery
        android:id="@+id/gallery1"
        android:layout_width="fill_parent"
        android:layout_height="60dp"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:background="#55000000"
        android:spacing="10dp" />
</RelativeLayout>

2.定義控制器Activity

public class MainActivity extends Activity implements ViewFactory,
		OnItemClickListener {
	private ImageSwitcher imageSwitcher;
	private Gallery gallery;
	// 存放大圖的數組
	private int[] imagesLarge = { R.drawable.sample_0, R.drawable.sample_1,
			R.drawable.sample_2, R.drawable.sample_3, R.drawable.sample_4,
			R.drawable.sample_5, R.drawable.sample_6, R.drawable.sample_7 };
	// 存放小圖的數組
	private int[] imagesSmall = { R.drawable.sample_thumb_0,
			R.drawable.sample_thumb_1, R.drawable.sample_thumb_2,
			R.drawable.sample_thumb_3, R.drawable.sample_thumb_4,
			R.drawable.sample_thumb_5, R.drawable.sample_thumb_6,
			R.drawable.sample_thumb_7 };

	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		// 設置窗體無標題
		requestWindowFeature(Window.FEATURE_NO_TITLE);
		setContentView(R.layout.activity_main);
		// 得到組件
		imageSwitcher = (ImageSwitcher) this.findViewById(R.id.imageSwitcher1);
		imageSwitcher.setFactory(this);
		imageSwitcher.setInAnimation(AnimationUtils.loadAnimation(this,
				android.R.anim.fade_in));
		imageSwitcher.setInAnimation(AnimationUtils.loadAnimation(this,
				android.R.anim.fade_out));

		gallery = (Gallery) this.findViewById(R.id.gallery1);
		gallery.setAdapter(new ImageAdapter());
		//設置默認選擇的圖片
		gallery.setSelection(imagesSmall.length/2);
		//註冊事件監聽器
		gallery.setOnItemClickListener(this);
	}

	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		getMenuInflater().inflate(R.menu.activity_main, menu);
		return true;
	}

	@Override
	public void onItemClick(AdapterView<?> adapterview, View view, int postion,
			long id) {
		imageSwitcher.setImageResource(imagesLarge[postion]);

	}

	// 重寫視圖工廠中的makeView方法，對ImageSwitcher顯示的ImageView對象進行了設置
	@Override
	public View makeView() {
		ImageView imageView = new ImageView(MainActivity.this);
		imageView.setLayoutParams(new ImageSwitcher.LayoutParams(
				LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT));
		return imageView;
	}

	/**
	 * 負責產生gallery中的圖片
	 */
	private class ImageAdapter extends BaseAdapter {

		// 返回圖片的個數,比如你想得到圖片的個數
		@Override
		public int getCount() {
			return imagesSmall.length;
		}

		@Override
		public Object getItem(int position) {
			return imagesSmall[position];
		}

		@Override
		public long getItemId(int position) {
			return position;
		}

		@Override
		public View getView(int position, View convertView, ViewGroup parent) {

			ImageView imageView = new ImageView(MainActivity.this);
			// 設置imageView中的圖像資源
			imageView.setImageResource(imagesSmall[position]);
			// 設置圖像大小尺寸自適應
			imageView.setAdjustViewBounds(true);
			return imageView;
		}
	}
}

3.給畫廊中的圖片加邊框

步驟1：在values下定義item.xml文件

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

步驟2：修改ImageAdapter類

/**
	 * 負責產生gallery中的圖片
	 */
	private class ImageAdapter extends BaseAdapter {
		int mGalleryItemBackground;;
		public ImageAdapter(){
			TypedArray typedArray=obtainStyledAttributes(R.styleable.HelloGallery);
		    mGalleryItemBackground=typedArray.getResourceId(R.styleable.HelloGallery_android_galleryItemBackground, 0);
		    typedArray.recycle();
		}

		// 返回圖片的個數,比如你想得到圖片的個數
		@Override
		public int getCount() {
			return imagesSmall.length;
		}

		@Override
		public Object getItem(int position) {
			return imagesSmall[position];
		}

		@Override
		public long getItemId(int position) {
			return position;
		}

		@Override
		public View getView(int position, View convertView, ViewGroup parent) {

			ImageView imageView = new ImageView(MainActivity.this);
			// 設置imageView中的圖像資源
			imageView.setImageResource(imagesSmall[position]);
			/*// 設置圖像大小尺寸自適應
			imageView.setAdjustViewBounds(true);*/
			imageView.setBackgroundResource(mGalleryItemBackground);
			return imageView;
		}
	}

效果圖：