Android幻灯片式图片浏览器

今天我们通过使用Android提供给我们的现有空间Gallery和ImageSwitcher来实现一个幻灯片式的图片浏览器。

(1)首先我们新建一个工程，修改主布局文件activity_main.xml内容如下：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:gravity="center_horizontal"
    android:orientation="vertical" >

    <ImageSwitcher
        android:id="@+id/image_switcher"
        android:layout_width="wrap_content"
        android:layout_height="0dip"
        android:layout_weight="2"
        android:paddingTop="30dip" />

    <!--
         android:layout_weight  详细解释:按比例显示LinearLayout内各个子控件，
    							需设置android:layout_width="0dp"，
    							如果为竖直方向的设置android:layout_height="0dp"。
    							在这种情况下某子个控件占用LinearLayout的比例为：
    							本控件weight值 / LinearLayout内所有控件的weight值的和。
    							
    	 android:spacing 设置图片的间距
    	 
    	 android:unselectedAlpha 设置为选中条目的透明度
    -->

    <Gallery
        android:id="@+id/gallery"
        android:layout_width="fill_parent"
        android:layout_height="0dip"
        android:layout_weight="1"
        android:spacing="5dip"
        android:unselectedAlpha="0.6" />

</LinearLayout>

(2)在Java代码部分，修改MainActivity.java的内容如下(代码已经详细注释)：

public class MainActivity extends Activity {

	// 声明并静态初始化图片id数组
	private int[] imageIds = { R.drawable.img01, R.drawable.img02,
			R.drawable.img03, R.drawable.img04, R.drawable.img05,
			R.drawable.img06, R.drawable.img07, R.drawable.img08,
			R.drawable.img09, R.drawable.img10, R.drawable.img11,
			R.drawable.img12 };

	// 声明一个Gallery视图控件变量
	private Gallery gallery;

	// 声明一个ImageSwitcher视图控件变量
	private ImageSwitcher imageSwitcher;

	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);

		// 获取视图控件对象
		gallery = (Gallery) findViewById(R.id.gallery);
		imageSwitcher = (ImageSwitcher) findViewById(R.id.image_switcher);

		// 设置动画效果
		imageSwitcher.setInAnimation(AnimationUtils.loadAnimation(this,
				android.R.anim.fade_in));
		imageSwitcher.setOutAnimation(AnimationUtils.loadAnimation(this,
				android.R.anim.fade_out));

		// 为imageSwitcher设置ViewFactory对象
		imageSwitcher.setFactory(new ViewFactory() {

			@Override
			public View makeView() {
				// 初始化一个ImageView对象
				ImageView imageView = new ImageView(MainActivity.this);
				// 设置保持纵横比居中缩放图像
				imageView.setScaleType(ImageView.ScaleType.FIT_CENTER);
				// 设置imageView的宽高
				imageView.setLayoutParams(new FrameLayout.LayoutParams(
						LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
				
				return imageView;
			}
		});
		
		//初始化一个MainGalleryAdapter对象
		MainGalleryAdapter adapter = new MainGalleryAdapter();
		
		//将适配器与gallery关联起来
		gallery.setAdapter(adapter);
		
		//初始选中中间的图片
		gallery.setSelection(imageIds.length/2);

		gallery.setOnItemClickListener(new OnItemClickListener() {

			@Override
			public void onItemClick(AdapterView<?> parent, View view,
					int position, long id) {
				//在ImageSwitcher中显示选中的图片
				imageSwitcher.setImageResource(imageIds[position]);
			}
		});
	}

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

	/**
	 * 定义Gallery的数据适配器MainGalleryAdapter
	 */
	class MainGalleryAdapter extends BaseAdapter {
		
		/**
		 * 获得数量
		 */
		@Override
		public int getCount() {
			return imageIds.length;
		}
		
		/**
		 * 获得当前选项
		 */
		@Override
		public Object getItem(int position) {
			return getResources().getDrawable(imageIds[position]);
		}
		
		/**
		 * 获得当前选项的id
		 */
		@Override
		public long getItemId(int position) {
			return position;
		}
		
		/**
		 * 获得当前选项的视图
		 */
		@Override
		public View getView(int position, View convertView, ViewGroup parent) {
			//初始化一个ImageView对象
			ImageView imageView = new ImageView(MainActivity.this);
			//设置缩放方式
			imageView.setScaleType(ImageView.ScaleType.FIT_XY);
			//设置ImageView的宽高
			imageView.setLayoutParams(new Gallery.LayoutParams(180, 135));
			//设置IamgeView显示的图片
			imageView.setImageResource(imageIds[position]);
			
			/**
			 * 设置ImageView背景，这里背景使用的是android提供的一种背景风格
			 * 在values/attr.xml文件中需要一下内容
			 *  <declare-styleable name="Gallery">
			 *		<attr name="android:galleryItemBackground" />
    		 *	</declare-styleable>
			 */
			TypedArray typedArray = MainActivity.this
					.obtainStyledAttributes(R.styleable.Gallery);
			int mGalleryItemBackground = typedArray.getResourceId(
					R.styleable.Gallery_android_galleryItemBackground, 0);
			imageView.setBackgroundResource(mGalleryItemBackground);
			
			//返回ImageView对象
			return imageView;
		}

	}
}

(3)我们看一下程序运行后的效果图：

(4)附上完整的android源码：

Android幻灯片式的图片浏览器