Image GridView

想要做一個格狀排放圖片的方法，先建立一個GridVew的layout(main.xml)
如下

<?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" >
   

<GridView
        android:id="@+id/gridview"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:numColumns="3"
        android:stretchMode="columnWidth"
        android:layout_weight="1"/>
   

</LinearLayout>

再建立一個單獨一格的layout(one_gridview.xml), 此layout是指定每一格GridView裡有什麼東西，以下的xml是建立一張圖和一個文字說明的layout.

<?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" >

 <ImageView android:id="@+id/grid_item_image"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_gravity="center"
      ></ImageView>
  
 <TextView android:id="@+id/grid_item_lable"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_gravity="center"
      android:layout_below="@+id/grid_item_image"
      android:layout_alignParentBottom="true"
 
      >
   </TextView>

 </LinearLayout>

程式上，我們要先建一個Adapter, 繼承BaseAdapter，如下。icId是一個Integer ArrayList，集合圖檔的resource id。icName 是一個文字的ArrayList，集合圖檔的說明文字。兩個ArrayList的順序要相同。

public xAdapter extends BaseAdapter{

    public LayoutInflater mInflater;
    public ArrayList<Integer> icId;
    public ArrayList<String> icName;
   
    public xAdapter(Context context, ArrayList<Integer> _icId, ArrayList<String> _icName) {
        mInflater = LayoutInflater.from(context);
        icId=_icId;
        icName=_icName;
       
    }
   
   
    public int getCount()    {
        return icName.size();
    }

   
    public Object getItem(int position)
    {
        return icName.get(position);
    }

    public long getItemId(int position)
    {
        return position;
    }
   
    public View getView(int position, View convertView, ViewGroup parent)
    {
         ViewHolder holder;

        if (convertView == null) {
            convertView = mInflater.inflate(R.layout.one_gridview, null);
            holder = new ViewHolder();
            holder.textItem = (TextView) convertView.findViewById(R.id.grid_item_lable);
            holder.icon = (ImageView) convertView.findViewById(R.id.grid_item_image);
              
            convertView.setTag(holder);
        }else{
               holder = (ViewHolder) convertView.getTag();
        }

        holder.textItem.setText(icName.get(position));
        holder.icon.setImageResource(icId.get(position));
       

        return convertView;
    }

   
    class ViewHolder
    {
     TextView textItem;
     ImageView icon;
    }
}

主程式如下

 public class BlogGridViewActivity extends Activity {
    /** Called when the activity is first created. */
   
    private GridView gv;
    private ArrayList<Integer> icId=new ArrayList<Integer>();
    private ArrayList<String> icName=new ArrayList<String>();
    //圖片之resource  id
    private int[] _icId={R.drawable.clock, R.drawable.strawberry, R.drawable.flower,
R.drawable.flower,R.drawable.strawberry,R.drawable.clock,};
    //圖片之說明文字
    private String[] _icName={"clock", "strawberry",
"flower","flower","strawberry","clock"};
   
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

           //建立圖片和說明文字的ArrayList
            for(int i=0;i<_icId.length;i++){
                icId.add(_icId[i]);
                icName.add(_icName[i]);
            }

            gv=(GridView) findViewById(R.id.gridview);

           //將Adapter餵給GridView
            gv.setAdapter(new xAdapter(this , icId, icName));
 
            gv.setOnItemClickListener(new OnItemClickListener() {
                public void onItemClick(AdapterView<?> parent, View v, int position, long id)
                {
                    //gridView中圖片被點擊後，做一些事
                }
            });
    }
}

結果如下