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

---

知識貴在分享！