Android custom GridView: adding multiple text boxes to an image

Source: Internet
Author: User

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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.