使用GridView和ImageView组件实现图片显示效果

阶段一：进行界面布局

Main.xml具体代码如下：

新建Android XML Layout File,命名为：Grid.xml.具体代码如下

阶段二：编写MainActivity,查找组件并进行事件处理。

 

package bzu.sys.imageshow;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.view.View;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.GridView;
import android.widget.ImageView;
import android.widget.SimpleAdapter;
import android.widget.TextView;
public class MainActivity extends Activity {
	private GridView imageList;
	private ImageView imageShow;
	private TextView description;
	private int[] pics;
	private String[] descs=new String[6];

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        imageList=(GridView) findViewById(R.id.imagelist);
        imageShow=(ImageView) findViewById(R.id.imageshow);
        description=(TextView) findViewById(R.id.desciption);
        pics=new int[]{R.drawable.image1,R.drawable.image2,R.drawable.image3,R.drawable.image4,R.drawable.image5,R.drawable.image6};
		for(int i=0;i> pic_items=new ArrayList>();
        for(int i=0;i item=new HashMap();
        	item.put("pic", pics[i]);
        	item.put("desc",descs[i]);
        	pic_items.add(item);
        	
        }
        SimpleAdapter adapter=new SimpleAdapter(this, pic_items, R.layout.grid, new String[]{"pic","desc"}, new int[]{R.id.smallImage,R.id.desciption});
        imageList.setAdapter(adapter);
        imageShow.setImageResource(pics[0]);
        imageList.setOnItemClickListener(new OnItemClickListener() {

			@Override
			public void onItemClick(AdapterView adapter, View view, int position,
					long id) {
				imageShow.setImageResource(pics[position]);
				
			}
		});
        
    }
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }

    
}

运行效果如下：