Android学习笔记（2）：带预览的图片浏览器（GridView、ImageSwitch以及SimpleAdapter）

<pre name="code" class="html">

目的：1.利用GridView来组织一组图片的浏览视图，当单击该图片时，显示大图。

     2.用ImageSwitcher（图片选择器）来显示图片。

注：在使用ImageSwitcher时要设置一个ImageSwitcher.ViewFactory，在实现ImageSwitcher.ViewFactory时要实现一个makeView()方法，该方法返回一个ImageView，而ImageSwitcher就负责显示这个IamgeView.

思路：1.定义一个存放HashMap的一个集合listItem；

     2.为图片数组中的每个元素都设置一样的key，并放入集合中；

     3.（可选）设置图片更换的动画效果；

     4.实现ImageSwitcher的setFactory()方法；

     5.初始化一个SimpleAdapter(五个参数)，并为GridView添加该适配器

             6.利用setOnItemClickListener、setOnItemSelectedListener来设置监听器

实现：

1.界面布局文件：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
    >
    <GridView  android:id="@+id/grid"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:horizontalSpacing="1pt"
        android:verticalSpacing="1pt"
        android:numColumns="4"
        android:gravity="center"
        >
    </GridView>
	<ImageSwitcher  android:id="@+id/imgSwitcher"
	    android:layout_width="320dp"
	    android:layout_height="320dp"
	    android:layout_gravity="center_horizontal"
	    android:background="#eeeeee"
	    >
	</ImageSwitcher>
</LinearLayout>

2.MainActivity.java:

public class MainActivity extends Activity {

	int[] imgs=new int[]{
			R.drawable.m1,R.drawable.m2,R.drawable.m3,R.drawable.m4,
			R.drawable.m5,R.drawable.m6,R.drawable.m7,R.drawable.m8,
			R.drawable.m9,R.drawable.m10,R.drawable.m11,R.drawable.m12,
	};
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		
		//创建一个List集合，List集合的元素是Map
		List<Map<String,Object>> listItems=new ArrayList<Map<String,Object>>();
		for(int i=0;i<imgs.length;i++){
			Map<String,Object> listItem=new HashMap<String,Object>();
			listItem.put("image",imgs[i]);//key对应value值
			listItems.add(listItem);
		}
				
		//获取显示图片的ImageSwitcher
		final ImageSwitcher switcher=(ImageSwitcher) findViewById(R.id.imgSwitcher);
		
		//设置图片更换的动画效果
		Animation in=AnimationUtils.loadAnimation(this,android.R.anim.slide_in_left);
		Animation out=AnimationUtils.loadAnimation(this, android.R.anim.slide_out_right);
		switcher.setAnimation(in);
		switcher.setAnimation(out);
		
		//为ImageSwitcher设置图片切换的效果
		switcher.setFactory(new ViewFactory(){
			@Override
			public View makeView() {//返回一个ImageView
				// TODO Auto-generated method stub
				ImageView imageView=new ImageView(MainActivity.this);
				imageView.setBackgroundColor(0xff0000);
				imageView.setScaleType(ImageView.ScaleType.FIT_CENTER);//ScaleType决定了图片在View上显示时的样子,当前为居中显示
				imageView.setLayoutParams(new ImageSwitcher.LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT));
				return imageView;
			}
		});
		
		//创建一个SimpleAdapter
				//第一个参数是当前上下文Context对象
				//第二个参数是图片数据列表，要显示的数据都在其中
				//第三个参数是界面的XML文件,即项布局文件（注：不是整体界面，而是要显示在GridView中的单个cell的界面XML）
				//第四个参数是动态数组中与map中图片对应的项，即map中存储进去的响应与图片value的key
				//第五个参数是单个cell界面XML中的图片ID
			SimpleAdapter simpleAdapter=new SimpleAdapter(
					this,
					listItems,
					R.layout.cell,
					new String[]{"image"},
					new int[]{R.id.image1});
			GridView gridView=(GridView) findViewById(R.id.grid);
			//为GridView设置SimpleAdapter
			gridView.setAdapter(simpleAdapter);
						
			//添加列表项被选中的监听器
			gridView.setOnItemSelectedListener(new OnItemSelectedListener(){

				@Override
				public void onItemSelected(AdapterView<?> arg0, View arg1,
						int position, long id) {
					// TODO Auto-generated method stub
					//显示当前被选中的图片
					switcher.setImageResource(imgs[position%imgs.length]);
				}

				@Override
				public void onNothingSelected(AdapterView<?> arg0) {
					// TODO Auto-generated method stub	
				}
			});
			//添加列表被单击的监听器
			gridView.setOnItemClickListener(new OnItemClickListener(){

				@Override
				public void onItemClick(AdapterView<?> arg0, View arg1,
						int position, long id) {
					// TODO Auto-generated method stub
					switcher.setImageResource(imgs[position%imgs.length]);
				}
			});
	}

	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		// Inflate the menu; this adds items to the action bar if it is present.
		getMenuInflater().inflate(R.menu.main, menu);
		return true;
	}
}

3.cell.xml:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
    android:padding="3pt"
    android:gravity="center_horizontal"
    >
    <ImageView android:id="@+id/image1"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:background="#0000ff"
        />
    </LinearLayout>

效果图如下：