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是一个图片加两个文本框,就需要有一个容器类:
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类似,熟练使用会带来很好的用户体验。