Android學習筆記二十六之GridView網格視圖

　　前面我們介紹了ListView清單視圖的基本用法，這一節我們介紹一下GridView網格視圖的基本使用。顧名思義，ListView是顯示清單，GridView是顯示網格。GridView和ListView一樣，都是AbsListView的子類，是以它們的用法基本相同，介紹一下GridView的幾個常用屬性：

• android:columnWidth：設定列的寬度
• android:gravity：元件對齊方式
• android:horizontalSpacing：水準邊距
• android:verticalSpacing：垂直邊距
• android:numColumns：設定列數
• android:stretchMode：設定拉伸模式，可選值如下： none：不拉伸；spacingWidth：拉伸元素間的間隔空隙 columnWidth：僅僅拉伸表格元素自身 spacingWidthUniform：既拉元素間距又拉伸他們之間的間隔空襲

下面我們通過一個例子體會一下GridView的基本用法：

Activity代碼：

package com.example.gridviewdemo;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.AdapterView;
import android.widget.GridView;
import android.widget.SimpleAdapter;
import android.widget.Toast;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

public class MainActivity extends AppCompatActivity {
private GridView gridView;
private int[] icons = {R.drawable.calendar, R.drawable.camera, R.drawable.games_control, R.drawable.messenger,
        R.drawable.settings, R.drawable.speech_balloon, R.drawable.weather, R.drawable.world, R.drawable.youtube};

private String[] names = {"月曆", "相機", "遊戲中心", "資訊", "設定", "語音", "天氣", "浏覽器", "視訊"};
private List<Map<String, Object>> datas;
private SimpleAdapter adapter;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    gridView = (GridView) findViewById(R.id.gv);
    datas = new ArrayList<>();
    initData();
    adapter = new SimpleAdapter(this, datas, R.layout.item_gv, new String[]{"icons", "names"}, new int[]{R.id.iv_icon, R.id.tv_name});
    gridView.setAdapter(adapter);
    gridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
        @Override
        public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) {
            Toast.makeText(MainActivity.this, "點選的是：" + names[i], Toast.LENGTH_SHORT).show();
        }
    });
}

/**
 * 初始化資料
 */
private void initData() {
    for (int i = 0; i < names.length; i++) {
        Map<String, Object> map = new HashMap<String, Object>();
        map.put("icons", icons[i]);
        map.put("names", names[i]);
        datas.add(map);
    }
}
}
           

布局檔案代碼：

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

<ImageView
    android:id="@+id/iv_icon"
    android:layout_width="60dp"
    android:layout_height="60dp" />

<TextView
    android:id="@+id/tv_name"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="5dp"
    android:text="文本"
    android:textColor="#000000"
    android:textSize="16sp" />

</LinearLayout>

<?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.example.gridviewdemo.MainActivity">

<GridView
    android:id="@+id/gv"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:horizontalSpacing="5dp"
    android:numColumns="3"
    android:verticalSpacing="5dp" />
</RelativeLayout>
           

實作效果圖：

這是非常簡單的實作，大家可以根據自己的需求擴充。

照例附上國内鏡像API