android開發步步為營之35：GridView的用法，androidgridview

android開發步步為營之35：GridView的用法，androidgridview

        之前使用asp.net開發軟體的過程中也使用GridView，發現android裡面也有這麼一個控制項，使用方法有點相似，都是使用適配器將資料繫結到這個控制項，然後將資料展示出來，應該說它和ListView一樣，是個非常常用的控制項，所以我們應該學習如何使用它，理論知識是沒多少的，就是一個展示資料的控制項，繼承關係如下：
public class GridView
extends AbsListView
java.lang.Object
   android.view.View
     android.view.ViewGroup
       android.widget.AdapterView<T extends android.widget.Adapter>
         android.widget.AbsListView
           android.widget.GridView
         開始我們的範例：
本範例，我們要實現兩種效果：
第一種顯示小狗的圖片列表，點擊圖片後觸發一個提示訊息
第二種顯示水滸梁山好漢的頭像、姓名、年齡資訊，點擊一行後會在title顯示姓名
第一步、設計頁面
res\layout\gridview.xml
 
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="fill_parent"
    android:layout_height="fill_parent">
 
    <GridView android:id="@+id/mygridview" android:layout_width="fill_parent"
       android:layout_height="fill_parent" android:columnWidth="90dp"
       android:numColumns="auto_fit" android:horizontalSpacing="10dp"
       android:verticalSpacing="10dp" android:stretchMode="columnWidth"
       android:gravity="center">
    </GridView>
</RelativeLayout>
 
res\layout\personview.xml
 
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="vertical"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent">
    <ImageView android:id="@+id/imgHead" android:layout_width="wrap_content" android:src="@drawable/icon" android:layout_height="wrap_content" android:layout_alignParentTop="true" android:layout_alignParentLeft="true"></ImageView>
    <TextView android:id="@+id/tvName" android:text="姓名" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignBottom="@+id/imgHead" android:layout_toRightOf="@+id/imgHead" android:layout_marginLeft="40dp" android:layout_marginBottom="14dp"></TextView>
    <TextView android:id="@+id/tvAge" android:text="年齡" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignTop="@+id/tvName" android:layout_toRightOf="@+id/tvName" android:layout_marginLeft="68dp"></TextView>
</RelativeLayout>
 
 
第二步、設計Activity  GridViewActivity.java
 
 
/**
 * gridview的用法
 */
package com.figo.helloworld;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
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.Toast;
 
/**
 * @author zhuzhifei
 *
 */
public class GridViewActivity extends Activity {
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       setContentView(R.layout.gridview);
       //給gv裝配資料
       GridView gridView = (GridView) findViewById(R.id.mygridview);
       //使用系統檢視表ImageView
//     gridView.setAdapter(new ImageAdapter(this));
//     gridView.setColumnWidth(90);
//      // 添加點擊行事件
//     gridView.setOnItemClickListener(new OnItemClickListener() {
//     @Override
//     public void onItemClick(AdapterView parent, View view,
//            int position, long id) {
//         Toast.makeText(GridViewActivity.this, "dog"+id+"汪汪汪",
//                Toast.LENGTH_SHORT).show();
//   
//     }
//  });
       //使用簡單適配器顯示圖片+文字
        SimpleAdapter adapter = getSimpleAdapter(); 
        gridView.setAdapter(adapter); 
       gridView.setColumnWidth(200);
        // 添加點擊行事件
        gridView.setOnItemClickListener(new OnItemClickListener() { 
        @Override
        public void onItemClick(AdapterView parent, View view, int position, long id) { 
                // 在本例中arg2=arg3 
                Map<String, Object> item = (Map<String, Object>) parent.getItemAtPosition(position); 
                // 顯示所選Item的ItemText 
                setTitle(item.get("name").toString()); 
            } 
        }); 
 
 
    }
  
     /**
     * 簡單適配器   顯示圖片+文字
     * 
     * @return
     */
    private SimpleAdapter getSimpleAdapter() { 
        // 產生動態數組，並且轉入資料 
      List<Map<String, Object>> list = new ArrayList<Map<String, Object>>();
            Map<String, Object> map = new HashMap<String, Object>();
            map.put("name", "宋江");
            map.put("age", "33歲");
            map.put("img", R.drawable.icon);
            list.add(map);
            map = new HashMap<String, Object>();
            map.put("name", "盧俊義");
            map.put("age", "32歲");
            map.put("img", R.drawable.icon);
            list.add(map);
            map = new HashMap<String, Object>();
            map.put("name", "關勝");
            map.put("age", "28歲");
            map.put("img", R.drawable.icon);
            list.add(map);    
            map = new HashMap<String, Object>();
            map.put("name", "林沖");
            map.put("age", "30歲");
            map.put("img", R.drawable.icon);
            list.add(map);
            map.put("name", "吳用");
            map.put("age", "33歲");
            map.put("img", R.drawable.icon);
            list.add(map);
            map = new HashMap<String, Object>();
            map.put("name", "武松");
            map.put("age", "32歲");
            map.put("img", R.drawable.icon);
            list.add(map);
            map = new HashMap<String, Object>();
            map.put("name", "公孫勝");
            map.put("age", "28歲");
            map.put("img", R.drawable.icon);
            list.add(map);    
            map = new HashMap<String, Object>();
            map.put("name", "花榮");
            map.put("age", "30歲");
            map.put("img", R.drawable.icon);
            list.add(map);
 
        // 產生適配器 
        SimpleAdapter adapter = new SimpleAdapter(this, list, 
                R.layout.personview, new String[] { "img", 
                       "name","age" }, new int[] { R.id.imgHead, 
                        R.id.tvName,R.id.tvAge }); 
 
        return adapter; 
    } 
    //圖片適配器
    private class ImageAdapter extends BaseAdapter {
       private Context mContext;
       private LayoutInflater mInflater;
       private List<Map<String, Object>> mData;
       // 狗狗圖片id集合
       private Integer[] mDogs = { R.drawable.doga, R.drawable.dogb,
              R.drawable.dogc, R.drawable.dogz, R.drawable.dogf, R.drawable.dogr,
              R.drawable.dogl, R.drawable.dogv, R.drawable.dogu,
              R.drawable.dogj,R.drawable.dogk,R.drawable.dogm,
              R.drawable.dogo,R.drawable.dogs,R.drawable.dogw
       };
       public ImageAdapter(Context context) {
           this.mContext = context;
       }
 
       @Override
       public int getCount() {
           return mDogs.length;
       }
 
       @Override
       public Object getItem(int position) {
         
       return mDogs[position];
       }
 
       @Override
       public long getItemId(int position) {
           return position;
       }
 
       @Override
       public View getView(int position, View convertView, ViewGroup parent) {
 
           //使用圖片 其實這裡也可以使用TextView
           ImageView imageView;
           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(mDogs[position]);
           return imageView;
         
         
       }
    }
 
 
}
第四步、運行效果

 

Android開發：GridView與ImageSwitcher配合使用

Gridview中又一個click函數，這個函數是悄點擊的哪個圖片，根據參數傳遞給imageswitcher,最後顯示出來就行了。
 
android中怎使用Gridview做出這種效果，布局代碼

可以使用SimpleAdapter或者BaseAdapter。
其實你用其它簡單的布局都可以，比如TableLayout、RelativeLayout的。

關於GridView代碼，在附件中。