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

阶段一：进行界面布局

Main.xml具体代码如下：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@drawable/bg">

<GridView
android:id="@+id/imagelist"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:horizontalSpacing="20dp"
android:numColumns="2"
android:verticalSpacing="10dp" >
</GridView>

<ImageView
android:id="@+id/imageshow"
android:layout_marginTop="20dp"
android:scaleType="centerInside"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>

</LinearLayout>

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

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >

<ImageView
android:id="@+id/smallImage"
android:layout_width="80dp"
android:layout_height="50dp"/>
<TextView
android:id="@+id/desciption"
android:layout_width="80dp"
android:layout_height="wrap_content"
android:gravity="center"
android:textColor="#FFFFFF"/>

</LinearLayout>

阶段二：编写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<descs.length;i++){
descs[i]="图片"+(i+1);
}
List<Map<String,Object>> pic_items=new ArrayList<Map<String, Object>>();
for(int i=0;i<pics.length;i++){
Map<String,Object> item=new HashMap<String, Object>();
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;
}

}

运行效果如下：