Gridview 视图控件的使用

mishaki

2015-02-13

Gridview 使用

本例子主要用：

1 SimpleAdapter 作为适配器加载List<Map>数据

2 BaseAdapter 加载List<Map>数据两种形式作为适配器加载数据

package com.example.fragmentdemo1;

import java.util.ArrayList;
import java.util.HashMap;

import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.BaseAdapter;
import android.widget.GridView;
import android.widget.ImageView;
import android.widget.SimpleAdapter;
import android.widget.TextView;
import android.widget.Toast;

/**
 *  Gridview 使用 
 *  本例子主要用 ：
 *    1 SimpleAdapter 作为适配器加载List<Map>数据  
 *    2  BaseAdapter 加载List<Map>数据 两种形式作为适配器加载数据
 */

public class GradViewActivity extends Activity {

	private Integer[] resIds = { R.drawable.bd, R.drawable.qq,
			R.drawable.safari, R.drawable.shezhi, R.drawable.tongxunlu,
			R.drawable.wangyi, R.drawable.weixin, R.drawable.xj, R.drawable.yx,
			R.drawable.zp };

	private String[] name = { "百度", "QQ", "safari", "设置", "通讯录", "网易", "微信",
			"相机", "游戏", "照片" };
	private ArrayList<HashMap<String, Object>> item;// 数据

	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.griditeminfo);
		//显示简单的图片列表 
//		showSimpleGrad();
		showBaseAdapterGrad();
	}
	
	/**
	 * 显示grid列表 ，用SimpleAdapter 作为适配器  
	 */
	private void showSimpleGrad() {
		getData() ;//准备数据 
		GridView gridview = (GridView) findViewById( R.id.gridview);
		
		// SimpleAdapter对象，匹配ArrayList中的元素
		SimpleAdapter simpleAdapter = new SimpleAdapter(this, 
				item, //数据来源
				R.layout.gridview, //每一个格子中的布局加载 
				new String[] { "itemImage", "itemName" }, //每一个方格中列的名字，它会与Map中的key相对应 
				new int[] { R.id.itemImage, R.id.itemName }) {//对应着上面参数给的值 
		};
 
	      //添加并且显示  
	      gridview.setAdapter(simpleAdapter);  
	      //添加消息处理  
	      gridview.setOnItemClickListener(new OnItemClickListener(){
				@Override
				public void onItemClick(AdapterView<?> parent, View view,
						int position, long id) {
					//parent.getItemAtPosition( )
					Log.v("gradView", (String)item.get(position ).get("itemName")) ;
                    Toast.makeText(getApplicationContext(),(String) item.get(position ).get("itemName"),Toast.LENGTH_SHORT).show();
				}
	      });  
	}

	
	
	// 准备数据
	public void getData() {
		item = new ArrayList<HashMap<String, Object>>();
		for (int i = 0; i < resIds.length; i++) {
			HashMap<String, Object> map = new HashMap<String, Object>();
			map.put("itemImage", resIds[i]);
			map.put("itemName", name[i]);
			item.add(map);
		}
	}
	
	//使用BaseAdapter
	private void showBaseAdapterGrad() {
		getData() ;//准备数据 
		GridView gridview = (GridView) findViewById( R.id.gridview);
		
		ImageAdapter adapter  = new ImageAdapter(this); 
	    //添加并且显示  
        gridview.setAdapter(adapter);  
       
       //添加消息处理  
       gridview.setOnItemClickListener(new OnItemClickListener(){
			@Override
			public void onItemClick(AdapterView<?> parent, View view,
					int position, long id) {
				//parent.getItemAtPosition( ) 取出 相应的数据 
				Log.v("gradView", (String)item.get(position ).get("itemName")) ;
              Toast.makeText(getApplicationContext(),(String) item.get(position ).get("itemName"),Toast.LENGTH_SHORT).show();
			}
      }); 
	}
	
	
	
	  //用BaseAdapter  用作adapter 
	  private class ImageAdapter extends BaseAdapter{  
		    private LayoutInflater mInflater;// 得到一个LayoutInfalter对象用来导入布局
		  
	        //private Context mContext;  
	        public ImageAdapter(Context context) {  
	            //this.mContext=context;  
	            this.mInflater = LayoutInflater.from(context);
	        }  
	        @Override  
	        public int getCount() {  
	            return resIds.length;  
	        }  
	        @Override  
	        public Object getItem(int position) {  
	            return resIds[position];  
	        }  
	  
	        @Override  
	        public long getItemId(int position) {  
	            // TODO Auto-generated method stub  
	            return 0;  
	        }  
	        /**
	         * 每一个小的 方格中的控件的加载 
	         */
	        @Override  
	        public View getView(int position, View convertView, ViewGroup parent) {  
	            //定义一个ImageView,显示在GridView里  
            	convertView = mInflater.inflate(R.layout.gridview, null);
            	ImageView imageView = (ImageView) convertView.findViewById( R.id.itemImage);
            	TextView textView = (TextView) convertView.findViewById( R.id.itemName);
            	Log.v("GridView", "加载GridView：getView 1=="+position );
            	
            	imageView.setImageResource((Integer)item.get(position ).get("itemImage"));
            	textView.setText( (String)item.get(position ).get("itemName"));
            	Log.v("GridView", "加载GridView：getView 2");
//	            if(convertView==null){
//	                imageView=new ImageView(mContext);  
//	                imageView.setLayoutParams(new GridView.LayoutParams(85, 85));  
//	                imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);  
//	                imageView.setPadding(8, 8, 8, 8);  
//	            }else{  
//	                imageView = (ImageView) convertView;  
//	            }  
	            //imageView.setImageResource(mThumbIds[position]);  
	            return convertView;  
	        }       
	    }  
}

2 gridView的布局

<?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" 
    android:paddingTop="20dp">
 
    <GridView
        android:id="@+id/gridview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:columnWidth="90dp"
        android:numColumns="auto_fit"
        android:stretchMode="columnWidth" 
        android:horizontalSpacing="10dp">
    </GridView>
</LinearLayout>

3 每个方格中加载的数据的控件布局

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" >

    <ImageView
        android:id="@+id/itemImage"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true" >
    </ImageView>

    <TextView
        android:id="@+id/itemName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/itemImage"
        android:layout_centerHorizontal="true" >
    </TextView>

</RelativeLayout>

4 附件中是使用到的图片

gridview android