Android自定义GridView之实现一个图片加多个文本框
- - CSDN博客推荐文章GridView的使用是很简单的,API Demo中有例子,但是要实现复杂的GridView,就需要自定义了. 今天我们要实现如下的效果:. 先说它的布局,它是由gridview和grid_item两部分组成. 接下来我们要新写一个继承自BaseAdapter类的Adapter类,在这里做grid item的适配.
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类似,熟练使用会带来很好的用户体验。