用gridview+textview实现一个九宫图带文字介绍,点击小图,出现大图的效果:
GridView的用法很多,网上介绍最多的方法就是自己实现一个ImageAdapter继承BaseAdapter,再供GridView使用,本文大部分代码都参考了:
http://blog.csdn.net/hellogv/article/details/4567095
主 main.xml
<?xml version="1.0" encoding="utf-8"?>
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/gridview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:numColumns="auto_fit"
android:verticalSpacing="10dp"
android:horizontalSpacing="10dp"
android:columnWidth="90dp"
android:stretchMode="columnWidth"
android:gravity="center"
/>
activity:
public class Gridview2Activity extends Activity {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
GridView gridview = (GridView) findViewById(R.id.gridview);
//生成动态数组,并且转入数据
ArrayList<HashMap<String, Object>> lstImageItem = new ArrayList<HashMap<String, Object>>();
for (int i = 0; i < 8; i++) {
HashMap<String, Object> map = new HashMap<String, Object>();
map.put("ItemImage", mThumbIds[i]);//添加图像资源的ID
map.put("ItemText", titles[i]);
lstImageItem.add(map);
}
//生成适配器的ImageItem <====> 动态数组的元素,两者一一对应
SimpleAdapter saImageItems = new SimpleAdapter(
this, //没什么解释
lstImageItem,//数据来源
R.layout.night_item,//night_item的XML实现
//动态数组与ImageItem对应的子项
new String[] {"ItemImage","ItemText"},
//ImageItem的XML文件里面的一个ImageView,两个TextView ID
new int[] {R.id.ItemImage,R.id.ItemText});
//添加并且显示
gridview.setAdapter(saImageItems);
//添加消息处理
gridview.setOnItemClickListener(new ItemClickListener());
}
//当AdapterView被单击(触摸屏或者键盘),则返回的Item单击事件
class ItemClickListener implements OnItemClickListener
{
public void onItemClick(AdapterView<?> arg0, View arg1, int position,long arg3) {
Intent intent=new Intent(Gridview2Activity.this,iImageView.class);
intent.putExtra("id", mThumbIds[position]);
startActivity(intent);
}
}
private int[] mThumbIds = {
R.drawable.p1, R.drawable.p2,
R.drawable.p3, R.drawable.p4,
R.drawable.p5, R.drawable.p6,
R.drawable.p7, R.drawable.p8
};
private String[] titles={
"MM1","MM2","MM3","MM4","MM5","MM6","MM7","MM8"
};
}
night_item.xml 填充到gridview中
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="wrap_content"
android:paddingBottom="4dip" android:layout_width="fill_parent">
<ImageView
android:layout_height="100dp"
android:id="@+id/ItemImage"
android:layout_width="150dp"
android:layout_centerHorizontal="true">
</ImageView>
<TextView
android:layout_width="wrap_content"
android:layout_below="@+id/ItemImage"
android:layout_height="wrap_content"
android:text="TextView01"
android:layout_centerHorizontal="true"
android:id="@+id/ItemText">
</TextView>
</RelativeLayout>
iImageView—activity 显示相应小图片的大图
public class iImageView extends Activity{
private ImageView imageView;
@Override
protected void onCreate(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super.onCreate(savedInstanceState);
setContentView(R.layout.imageview);
imageView =(ImageView)findViewById(R.id.imageView);
Intent intent = getIntent();
int imageId = intent.getIntExtra("id", R.drawable.p1);//取activity传过来的id,如果不存在取后面的默认值
imageView.setImageResource(imageId);
}
}
iImageView activity下的布局文件 imageview.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
>
<ImageView
android:id="@+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</LinearLayout>
最终效果