Android custom GridView: adding multiple text boxes to an image

The use of the GridView is very simple. There are examples in the API Demo, but to implement a complex GridView, You need to customize it.

Today we want to achieve the following results:

The layout is composed of two parts: gridview and 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>

Next, we need to write a new Adapter class that inherits from the BaseAdapter class. Here we will adapt the grid item.

Since each grid item is an image with two text boxes, we need a container class:

GridItem class:

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;         }     } 

Another Viewholder

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

The implementation of the Adapter is now in turn.

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;     }

The following code is called in the 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; // the first line of the image text private String [] titles = new String [] {" ", "Beautiful looking ", "Beautiful women are very interesting", "beautiful women are drunk", "beautiful women smile", "beautiful women are like rabbits", "beautiful women are like girls "}; // The second line of the image is private String [] description = new String [] {"", "", "Dangdang", "zookeeper"}; // image ID array 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 onCr Eate (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 ();}});}}

In this way,

This implementation is similar to that of ListView. Skilled use will bring a good user experience.