Android GridView九宫图

openkk 12年前

属性名称

描述

android:columnWidth

设置列的宽度。

android:gravity

设置此组件中的内容在组件中的位置。可选的值有:top、bottom、left、right、center_vertical、 fill_vertical、center_horizontal、fill_horizontal、center、fill、 clip_vertical可以多选,用“|”分开。

android:horizontalSpacing

两列之间的间距。

android:numColumns

设置列数。

android:stretchMode

缩放模式。

android:verticalSpacing

两行之间的间距。

 案例一:

1.定义一个布局文件:gridview.xml

<?xml version="1.0" encoding="utf-8"?>  <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"      android:layout_width="wrap_content"       android:layout_height="wrap_content">      <GridView          android:id="@+id/gridview_main"          android:layout_width="wrap_content"          android:layout_height="wrap_content"           android:numColumns="auto_fit"          android:verticalSpacing="1dp"          android:horizontalSpacing="1dp"          android:columnWidth="90dp"          android:stretchMode="columnWidth"          android:gravity="center"          >      </GridView>  </LinearLayout>

 android:numColumns="auto_fit"--列数设置为自动;

android:columnWidth="90dp"--每列的列宽,也就是item的宽度

android:verticalSpacing="1dp"--两行之间的边距

android:horizontalSpacing="1dp"--两列之间的边距

android:stretchMode="columnWidth"--缩放与列宽大小同步

 2。接下来定义gridview_item.xml

<?xml version="1.0" encoding="utf-8"?>  <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"      android:layout_width="wrap_content"       android:layout_height="wrap_content"      android:orientation="vertical"      >      <ImageView          android:id="@+id/gridview_imageview"          android:layout_width="wrap_content"          android:layout_height="wrap_content"        >      </ImageView>      <TextView           android:id="@+id/gridview_textview"          android:layout_width="wrap_content"          android:layout_height="wrap_content"          android:text="TextView01"          android:gravity="center"        />  </LinearLayout>

3.最后定义Java的源代码了,GridViewDemo.java

package com.test;  import java.util.ArrayList;  import java.util.HashMap;  import android.app.Activity;  import android.os.Bundle;  import android.view.View;  import android.widget.AdapterView;  import android.widget.AdapterView.OnItemClickListener;  import android.widget.GridView;  import android.widget.SimpleAdapter;  public class GridViewDemo extends Activity {   int [] image={R.drawable.android,R.drawable.blackberry,R.drawable.windowshone,R.drawable.windowshone,R.drawable.blackberry,R.drawable.android,R.drawable.windowshone,R.drawable.ios,R.drawable.blackberry};   private GridView gridView;   @Override   protected void onCreate(Bundle savedInstanceState) {    // TODO Auto-generated method stub    super.onCreate(savedInstanceState);        setContentView(R.layout.gridview_main);        gridView = (GridView)findViewById(R.id.gridview_main);    //生成动态数组,并且转入数据     ArrayList<HashMap<String, Object>>  list=new ArrayList<HashMap<String,Object>>();        for(int i=0;i<9;i++)    {     HashMap<String, Object>  map = new HashMap<String, Object>();             map.put("ItemImage", image[i]);//添加图像资源的ID          map.put("itemtext","Amigos_pop-"+String.valueOf(i));        list.add(map);    }     //生成适配器的ImageItem <====> 动态数组的元素,两者一一对应      SimpleAdapter   adapter=new SimpleAdapter(this, //数据来源       list,R.layout.gridview_item,//XML实现        new String[]{"ItemImage","itemtext"}, //动态数组与ImageItem对应的子项                new int[]{R.id.gridview_imageview,R.id.gridview_textview}//  //ImageItem的XML文件里面的一个ImageView,两个TextView ID             );     //添加并且显示      gridView.setAdapter(adapter);    //添加消息处理    gridView.setOnItemClickListener(clickListener);   }     //当AdapterView被单击(触摸屏或者键盘),则返回的Item单击事件     private  OnItemClickListener  clickListener=new OnItemClickListener() {      @Override    public void onItemClick(AdapterView<?> arg0,//The AdapterView where the click happened                     View arg1,//The view within the AdapterView that was clicked                    int arg2,//The position of the view in the adapter                    long arg3//The row id of the item that was clicked        )     {          HashMap<String, Object>  item=(HashMap<String, Object>)arg0.getItemAtPosition(arg2);          setTitle((String)item.get("itemtext"));    }   };  }

4:执行效果:

Android GridView九宫图

Android GridView九宫图

 ===============================================================================

案例二:同样的效果:

布局文件使用上面一样的:

定义一个ImageAdapter类,此类继承BaseAdapter如下:

package com.test;    import android.content.Context;  import android.view.View;  import android.view.ViewGroup;  import android.widget.BaseAdapter;  import android.widget.GridView;  import android.widget.ImageView;    public class GridViewAdapter extends BaseAdapter {     //定义Context   private Context  mContext;      //定义整形数组 (图片资源)   private  int []  mimages=   {    R.drawable.android,R.drawable.blackberry,R.drawable.windowshone,    R.drawable.windowshone,R.drawable.blackberry,R.drawable.android,    R.drawable.windowshone,R.drawable.ios,R.drawable.blackberry      };      public GridViewAdapter(Context  c)    {    mContext=c;   }      //获取图片的个数   @Override   public int getCount() {    // TODO Auto-generated method stub    return mimages.length;   }     // 获取图片在库中的位置   @Override   public Object getItem(int position) {    // TODO Auto-generated method stub    return position;   }       //获取图片ID   @Override   public long getItemId(int position) {    // TODO Auto-generated method stub    return position;   }     @Override   public View getView(int position, View convertView, ViewGroup parent)    {         ImageView mimageView;         if(convertView==null)         {          //给Imageview设置资源          mimageView = new ImageView(mContext);          //设置布局图片120*120显示                mimageView.setLayoutParams(new GridView.LayoutParams(85, 85));                    mimageView.setScaleType(ImageView.ScaleType.CENTER_CROP);                    mimageView.setPadding(8, 8, 8, 8);         }else         {          mimageView=(ImageView) convertView;          }         mimageView.setImageResource(mimages[position]);      return mimageView;   }  }

package com.test;  import java.util.ArrayList;  import java.util.HashMap;  import android.app.Activity;  import android.os.Bundle;  import android.view.View;  import android.widget.AdapterView;  import android.widget.AdapterView.OnItemClickListener;  import android.widget.GridView;  import android.widget.SimpleAdapter;  import android.widget.Toast;  public class GridViewDemo_2 extends Activity {   private GridView  gridView;   @Override   protected void onCreate(Bundle savedInstanceState) {    // TODO Auto-generated method stub    super.onCreate(savedInstanceState);    setContentView(R.layout.gridview_main);        gridView = (GridView)findViewById(R.id.gridview_main);        gridView.setAdapter(new GridViewAdapter(this));//调用GridViewAdapter        gridView.setOnItemClickListener(clickListener);   }      private  OnItemClickListener  clickListener =new OnItemClickListener() {      @Override    public void onItemClick(AdapterView<?> arg0, View arg1, int position,      long id) {     Toast.makeText(GridViewDemo_2.this, ""+position,Toast.LENGTH_SHORT).show();//显示信息;          }   };  }

 效果:

Android GridView九宫图