gridview九宫图+textview文字+点击事件

 用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>

 

最终效果

《gridview九宫图+textview文字+点击事件》

 

《gridview九宫图+textview文字+点击事件》

    原文作者:九宫图算法
    原文地址: https://blog.csdn.net/shikun520/article/details/84360030
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞