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类似，熟练使用会带来很好的用户体验。