Android自訂GridView之實現一個圖片加多個文字框

GridView的使用是很簡單的，API Demo中有例子，但是要實現複雜的GridView，就需要自訂了。

今天我們要實現如下的效果：

先說它的布局，它是由gridview和grid_item兩部分組成。

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:columnWidth="90dp"    android:numColumns="auto_fit"    android:verticalSpacing="10dp"    android:horizontalSpacing="10dp"    android:stretchMode="columnWidth"    android:gravity="center"    />

grid_item.xml

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" android:layout_marginTop="5dp" > <ImageView android:id="@+id/image" android:layout_width="80dip"  android:layout_height="80dip" android:layout_gravity="center_horizontal"> </ImageView> <TextView android:id="@+id/title" android:layout_width="wrap_content"  android:layout_height="wrap_content" android:layout_gravity="left"  android:textSize="16dip"  android:gravity="left"> </TextView> <TextView android:id="@+id/description" android:layout_width="wrap_content"  android:layout_height="wrap_content" android:layout_gravity="left"  android:textColor="#938192"  android:textSize="13dip"  android:gravity="left"  > </TextView></LinearLayout>

接下來我們要新寫一個繼承自BaseAdapter類的Adapter類，在這裡做grid item的適配。

由於我們每個grid item是一個圖片加兩個文字框，就需要有一個容器類：

GridItem類：

class GridItem     {         private String title;         private int imageId;         private String description;                public GridItem()         {             super();         }              public GridItem(String title, int imageId,String time)         {             super();             this.title = title;             this.imageId = imageId;             this.description = time;        }              public String getTime( )        {            return description;        }        public String getTitle()         {             return title;         }              public int getImageId()         {             return imageId;         }     } 

再來個Viewholder

    static class ViewHolder     {         public ImageView image;         public TextView title;        public TextView time;    } 

接下來的Adapter的實現就順理成章了。

GridItemAdapter

import java.util.ArrayList;import java.util.List;import android.content.Context;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.widget.BaseAdapter;import android.widget.ImageView;import android.widget.TextView;public class GridItemAdapter extends BaseAdapter{    private LayoutInflater inflater;     private List<GridItem> gridItemList;      public GridItemAdapter(String[] titles, int[] images,String[] description, Context context)     {         super();         gridItemList = new ArrayList<GridItem>();         inflater = LayoutInflater.from(context);         for (int i = 0; i < images.length; i++)         {             GridItem picture = new GridItem(titles[i], images[i],description[i]);             gridItemList.add(picture);         }     }     @Override    public int getCount( )    {        if (null != gridItemList)         {             return gridItemList.size();         }         else        {             return 0;         }     }    @Override    public Object getItem( int position )    {        return gridItemList.get(position);     }    @Override    public long getItemId( int position )    {        return position;     }    @Override    public View getView( int position, View convertView, ViewGroup parent )    {        ViewHolder viewHolder;         if (convertView == null)         {             convertView = inflater.inflate(R.layout.grid_item, null);             viewHolder = new ViewHolder();             viewHolder.title = (TextView) convertView.findViewById(R.id.title);             viewHolder.image = (ImageView) convertView.findViewById(R.id.image);            viewHolder.time = (TextView) convertView.findViewById(R.id.description);             convertView.setTag(viewHolder);         } else        {             viewHolder = (ViewHolder) convertView.getTag();         }         viewHolder.title.setText(gridItemList.get(position).getTitle());        viewHolder.time.setText(gridItemList.get(position).getTime());         viewHolder.image.setImageResource(gridItemList.get(position).getImageId());         return convertView;     }

在activity中調用如下：

package com.linc.gridview;import android.app.Activity;import android.os.Bundle;import android.view.View;import android.widget.AdapterView;import android.widget.GridView;import android.widget.Toast;import android.widget.AdapterView.OnItemClickListener;public class CustomGridViewActivity extends Activity {    private GridView gridView;     //圖片的第一行文字    private String[] titles = new String[]     { "美女卷珠簾", "美女回眸", "美女很有趣", "美女醉酒", "美女微笑", "美女如脫兔", "美女柳葉彎眉"};     //圖片的第二行文字     private String[] description = new String[]     { "啦啦啦", "嘎嘎嘎", "哇哇哇", "喵喵喵", "剛剛剛", "噹噹當", "哢哢哢"};     //圖片ID數組     private int[] images = {                                R.drawable.five, R.drawable.sample_7,                                R.drawable.one, R.drawable.three,                                R.drawable.sample_3, R.drawable.sample_7,                                R.drawable.sample_0 };    /** Called when the activity is first created. */    @Override    public void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.main);                gridView = (GridView) findViewById(R.id.gridview);         GridItemAdapter adapter = new GridItemAdapter(titles, images,description,this);         gridView.setAdapter(adapter);          gridView.setOnItemClickListener(new OnItemClickListener()             {                 @Override                public void onItemClick(AdapterView<?> parent, View v, int position, long id)                 {                     Toast.makeText(CustomGridViewActivity.this, "item" + (position+1), Toast.LENGTH_SHORT).show();                 }            });     }}

這樣就可以了，

此實現與ListView類似，熟練使用會帶來很好的使用者體驗。