Android widght之GridView

简介

总体而言与ListView差别并不大，不过GridView是表格，而ListView是列表，与ListView共同继承 android.widget.AbsListView。

ListView

简单介绍一下GridView的特有属性

属性名称	相应方法	简介
android:columnWidth	setColumnWidth(int)	指定每个item的固定宽度
android:gravity	setGravity(int)	指定每个item的显示位置
android:horizontalSpacing	setHorizontalSpacing(int)	定义item之间的默认水平间隔
android:verticalSpacing	setVerticalSpacing(int)	定义item之间默认的垂直间距
android:numColumns	setNumColumns(int)	定义显示列的个数
android:stretchMode	setStretchMode(int)	缩放模式

---

使用

页面布局：

<?xml version="1.0" encoding="utf-8"?>
<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"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.toommi.activity.myandroidtest.TestGridActivity">

    <GridView
        android:id="@+id/gridView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:horizontalSpacing="10dp"
        android:numColumns="4"
        android:verticalSpacing="10dp"></GridView>

</RelativeLayout>

---

item布局:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical">

    <ImageView
        android:id="@+id/iv_img"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_launcher" />

    <TextView
        android:id="@+id/tv_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="6dp"
        android:text="icon"
        android:textColor="#000"
        android:textSize="18sp" />

</LinearLayout>

---

建立与item布局对应的实体（model）:

public class ImageTextInfo implements Parcelable {
    private int imgResources;
    private String imgName;

    public ImageTextInfo() {
    }

    public ImageTextInfo(int imgResources, String imgName) {
        this.imgResources = imgResources;
        this.imgName = imgName;
    }

    public int getImgResources() {
        return imgResources;
    }

    public void setImgResources(int imgResources) {
        this.imgResources = imgResources;
    }

    public String getImgName() {
        return imgName;
    }

    public void setImgName(String imgName) {
        this.imgName = imgName;
    }

    @Override
    public int describeContents() {
        return 0;
    }

    @Override
    public void writeToParcel(Parcel dest, int flags) {
        dest.writeInt(this.imgResources);
        dest.writeString(this.imgName);
    }

    protected ImageTextInfo(Parcel in) {
        this.imgResources = in.readInt();
        this.imgName = in.readString();
    }

    public static final Parcelable.Creator<ImageTextInfo> CREATOR = new Parcelable.Creator<ImageTextInfo>() {
        @Override
        public ImageTextInfo createFromParcel(Parcel source) {
            return new ImageTextInfo(source);
        }

        @Override
        public ImageTextInfo[] newArray(int size) {
            return new ImageTextInfo[size];
        }
    };
}

---

适配器(与ListView的适配没什么差别，还是贴一下):

public class TestGridAdapter extends BaseAdapter {
    private Context context;
    private List<ImageTextInfo> list;

    public TestGridAdapter(Context context, List<ImageTextInfo> list) {
        this.context = context;
        this.list = list;
    }

    @Override
    public int getCount() {
        return list == null ? 0 : list.size();
    }

    @Override
    public Object getItem(int position) {
        return list.get(position);
    }

    @Override
    public long getItemId(int position) {
        return position;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        ViewHolder holder = null;
        if (null == convertView) {
            holder = new ViewHolder();
            convertView = LayoutInflater.from(context).inflate(R.layout.item_grid_img_txt, null);
            holder.img = (ImageView) convertView.findViewById(R.id.iv_img);
            holder.name = (TextView) convertView.findViewById(R.id.tv_name);
            convertView.setTag(holder);
        } else {
            holder = (ViewHolder) convertView.getTag();
        }
        ImageTextInfo info = list.get(position);
        holder.img.setImageResource(info.getImgResources());
        holder.name.setText(info.getImgName());
        return convertView;
    }

    class ViewHolder {
        ImageView img;
        TextView name;
    }
}

---

使用测试:

GridView gridView = (GridView) findViewById(R.id.gridView);
List<ImageTextInfo> list = new ArrayList<>();

for (int i = 0; i < 50; i++) {
    list.add(new ImageTextInfo(R.mipmap.ic_launcher, "o~o" + i));
}

TestGridAdapter adapter = new TestGridAdapter(this, list);
gridView.setAdapter(adapter);

---

效果图:

---

拓展

有的人就会想了，为什么没有横向的？

---

那么我们更改一下 界面布局：

<?xml version="1.0" encoding="utf-8"?>
<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"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.toommi.activity.myandroidtest.TestGridActivity">

    <HorizontalScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <GridView
                android:id="@+id/gridView"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:gravity="center"
                android:numColumns="auto_fit"
                android:stretchMode="spacingWidthUniform" />
        </LinearLayout>

    </HorizontalScrollView>

</RelativeLayout>

---

接下来我们再更改一下测试代码:

GridView gridView = (GridView) findViewById(R.id.gridView);
List<ImageTextInfo> list = new ArrayList<>();
for (int i = 0; i < 50; i++) {
    list.add(new ImageTextInfo(R.mipmap.ic_launcher, "o~o" + i));
}

TestGridAdapter adapter = new TestGridAdapter(this, list);


int size = list.size();
DisplayMetrics dm = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(dm);
float density = dm.density;
int allWidth = (int) (110 * size * density);
int itemWidth = (int) (100 * density);
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
        allWidth, LinearLayout.LayoutParams.MATCH_PARENT);
gridView.setLayoutParams(params);// 设置GirdView布局参数
gridView.setColumnWidth(itemWidth);// 列表项宽
gridView.setHorizontalSpacing(10);// 列表项水平间距
gridView.setStretchMode(GridView.NO_STRETCH);
gridView.setNumColumns(size);//总长度

gridView.setAdapter(adapter);

根据个人需求可以适当的调整代码！

---

效果图：

---

横向布局

http://blog.csdn.net/sunshine_mood/article/details/49792199

---

知识贵在分享！