用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>
最终效果