上篇文章我们主要介绍了ListView的用法,并着重介绍了自定义Adapter。GridView作为一个特别和ListView相近的组件,它的基本用法也和ListView类似,这篇文章我们主要介绍GridView的自定义Adapter,并着重介绍它与ListView不一样的属性。
1、自定义Adapter的GridView
我这个Demo是要实现这样的功能:将一组图片以网格的形式列出来,并且每一个图片要带有标签。其实,要实现这样的功能,我们可以用好多方法,这里我感觉用GridView方便一些(其实我就只想用GridView)。下面,我们来一步一步实现这个功能:
①、标签和图片(数据)的准备:
private String[] titles = new String[25];
private int[] images = { R.drawable.ic_1, R.drawable.ic_2, R.drawable.ic_3,
R.drawable.ic_4, R.drawable.ic_5, R.drawable.ic_6, R.drawable.ic_7,
R.drawable.ic_8, R.drawable.ic_9, R.drawable.ic_10,
R.drawable.ic_11, R.drawable.ic_12, R.drawable.ic_13,
R.drawable.ic_14, R.drawable.ic_15, R.drawable.ic_16,
R.drawable.ic_17, R.drawable.ic_18, R.drawable.ic_19,
R.drawable.ic_20, R.drawable.ic_21, R.drawable.ic_22,
R.drawable.ic_23, R.drawable.ic_24, R.drawable.ic_25
};
for (int i = 0; i < titles.length; i++) {
titles[i] = "美女图片[" + (i + 1) + "]";
}
②、布局文件的准备:
一个就是主屏幕显示的UI,就一个简单的GridView。
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<GridView
android:id="@+id/ImageGv"
android:layout_alignParentTop="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:numColumns="auto_fit"
android:verticalSpacing="10dp"
android:horizontalSpacing="10dp"
android:columnWidth="180dp"
android:stretchMode="columnWidth"
android:gravity="center"/>
</RelativeLayout>
我就上面的几个属性解释一下:
android:numColumns=“auto_fit” 栏目的数目:自适应,这个属性和android:columnWidth属性相关,后者即是每个栏目的宽度
android:vertitalSpacing,android:horizontalSpacing是栏目间隔的宽度
android:strechMode 是将屏幕宽度剩余的位置平分给每一栏。
另一个就是子Item的布局文件,这里不再过多赘述:<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ImageView
android:id="@+id/image"
android:layout_width="wrap_content"
android:layout_height="120dp"
android:layout_below="@+id/title"
android:layout_centerHorizontal="true"
android:adjustViewBounds="true"
android:layout_marginBottom="20dp"/>
<TextView
android:id="@+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="20dp" />
</RelativeLayout>
③、自定义适配器:依然是继承BaseAdapter,这里我不过多叙述,大家可以看我以前的博客,博客地址:
下面给出本Demo的Adapter:
package com.example.mygridview;
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 MyGridViewAdapter extends BaseAdapter {
private List<GridItem> gridItemList;
private LayoutInflater inflater;
public MyGridViewAdapter(String[] titles, int[] images,Context context) {
super();
gridItemList = new ArrayList<GridItem>();
inflater = LayoutInflater.from(context);
for(int i=0; i<images.length; i++){
GridItem gridItem = new GridItem(images[i],titles[i]);
gridItemList.add(gridItem);
}
}
@Override
public int getCount() {
return gridItemList.size();
}
@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.image_item, null);
viewHolder = new ViewHolder();
viewHolder.title = (TextView) convertView.findViewById(R.id.title);
viewHolder.image = (ImageView) convertView.findViewById(R.id.image);
convertView.setTag(viewHolder);
}else{
viewHolder = (ViewHolder) convertView.getTag();
}
viewHolder.title.setText(gridItemList.get(position).getTitle());
viewHolder.image.setImageResource(gridItemList.get(position).getImageId());
return convertView;
}
public class GridItem {
private int imageId;
private String title;
public GridItem() {
super();
}
public GridItem(int imageId, String title) {
super();
this.imageId = imageId;
this.title = title;
}
public String getTitle() {
return title;
}
public int getImageId() {
return imageId;
}
}
static class ViewHolder{
public ImageView image;
public TextView title;
}
}
④、准备工作做完了,现在可以加载看看了:
GridView gridView = (GridView) findViewById(R.id.ImageGv);
MyGridViewAdapter myGridViewAdapter = new MyGridViewAdapter(titles, images, this);
gridView.setAdapter(myGridViewAdapter);
gridView.setOnItemClickListener(new OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> arg0, View arg1, int arg2,
long arg3) {
Toast.makeText(GridViewActivity.this, "你点了一下图片", Toast.LENGTH_SHORT).show();
}
});
我这里还简单的添加了一个点击事件,为了让点击图片时感觉不那么单调。这里只是咧图片的过程,图片缓存,大小缩放什么的都没有,以后有机会研究分享。
下面给出效果图:
好了,效果放出来了,感觉有点丑,后期看了图片处理在优化好了。
2、下面开始本文的第二个重点:
将GridView的边框绘制出来。GridView没有ListView的divider属性,我们只能自己实现这个属性,
这里采用两种方式:
①、主布局和子布局背景色色差凸显边框,下面给出实现代码:
android:background="#F6492B"
android:background="#0076C7"
只要把这两句背景设定放在两个相对布局上面就可以有下面的效果。
②、给每一张图片绘制边框,采用的是XML文件实现
1>、修改主布局,主要是下面的代码:
android:layout_marginLeft="-1px"
android:layout_marginRight="-1px"
android:listSelector="@android:color/transparent"
第三句是为了在点击item时去掉系统默认的颜色
2>、在drawable文件夹中一次创建三个XML文件。
在image_item.xml的RelativeLayout中加入
android:background="@drawable/list_selector"
即可实现加载上面的drawable
下面是每个XML
3-1>
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_selected="true"
android:drawable="@drawable/item_border_selected"
/>
<item
android:state_pressed="true"
android:drawable="@drawable/item_border_selected"
/>
<item
android:drawable="@drawable/item_border"
/>
</selector>
3-2>item_border
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid
android:color="@android:color/transparent"
/>
<stroke
android:width="1px"
android:color="#0076C7"
/>
</shape>
3-3> item_border_selected
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid
android:color="#F6492B"
/>
<stroke
android:width="1px"
android:color="#0076C7"
/>
</shape>
所有工作都over了,加载看看效果:
看起来比第一种有点意思了吧,由于我图片底部贴着总体布局,所以压着线,大家可以自己调整布局。这篇到就都介绍完了!!