建立Gridview視圖

標籤：

細想自己接觸android也有一個月了，一直想寫blog來敦促自己的進步，供自己之後翻閱，同時想著自己在編寫例子的時候會出現各種問題，所以建立blog來記錄自己的學習進程，也可以作分享之用。好了，廢話不多說了，這篇blog主要是講解的如何建立gridview的視圖。如效果所示：

要實現圖中的功能，

先介紹gridview幾個屬性：

GridView的一些屬性android:numColumns="auto_fit"- - - - - 列數設定為自動android:columnWidth="90dp"- -  - - -每列的寬度，也就是item的寬度android:stretchMode="columnWidth"- -  - - -縮放與列寬大小同步android:verticalSpacing ="10dp"- - -  - - -垂直邊距android:horizontalSpacing="10dp"- - - -  - -水平邊距

第一步：將案例所需的四個圖片（注意名字一定要是英文）copy到res/drawable檔案夾下。

 

第二步：在main_activity中添加一個gridview，其中布局代碼如下

<span style="font-size:18px;"><?xml version="1.0" encoding="utf-8"?><LinearLayout 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:orientation="vertical"android:background="#000"tools:context="com.example.amos.gridviewdemo.MainActivity">    <GridViewandroid:id="@+id/gview"android:layout_width="match_parent"android:layout_height="wrap_content"android:numColumns="auto_fit"<span style="white-space:pre"></span>//列數設定為自動android:columnWidth="80dp"android:stretchMode="columnWidth"><span style="white-space:pre"></span>//將展開模式調整跟寬度一樣    </GridView></LinearLayout></span>

第三步：因為所做中每個item項中都有一個imageiew和textview的控制項，所以我們要單獨建立一個item的布局以便傳入gridview中。

<?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:orientation="vertical"<span style="white-space:pre"></span>//這一項的作用是讓imageview控制項和textview控制項在豎直方向對齊android:gravity="center"android:padding="10dp">

    <ImageViewandroid:src="#9932CC"android:id="@+id/image"android:layout_width="60dp"android:layout_height="60dp" />    <TextViewandroid:id="@+id/text"android:layout_marginTop="5dp"android:layout_width="wrap_content"android:layout_height="wrap_content"android:textColor="#ffffff"android:text="文字"/></LinearLayout>

第四步：接著就是最關鍵的在MainActivity中填寫代碼。主要分為a.準備資料來源 b.建立適配器 c.配置適配器

</pre><pre name="code" class="java">import android.app.Activity;import android.content.Intent;import android.os.Bundle;import android.view.View;import android.widget.AdapterView;import android.widget.GridView;import android.widget.SimpleAdapter;import java.util.ArrayList;import java.util.HashMap;import java.util.List;import java.util.Map;public class MainActivity extends Activity {    private GridView gview;    private List<Map<String, Object>> data_list;    private SimpleAdapter sim_adapter;    private int[] icon = {R.drawable.sns_qqfriends_icon, R.drawable.sns_sina_icon,            R.drawable.sns_weixin_icon, R.drawable.sns_weixin_timeline_icon};    private String[] iconName = {"QQ", "Sina", "Weixin", "SNS"};    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        gview = (GridView) findViewById(R.id.gview);        //建立List        data_list = new ArrayList<Map<String, Object>>();        //擷取資料        getData();        //建立適配器        String[] from = {"image", "text"};        int[] to = {R.id.image, R.id.text};        sim_adapter = new SimpleAdapter(this, data_list, R.layout.item, from, to);        //配置適配器        gview.setAdapter(sim_adapter);          }    public List<Map<String, Object>> getData() {//icon和iconName的長度是相同的，這裡任選其一就可以        for (int i = 0; i < icon.length; i++) {            Map<String, Object> map = new HashMap<String, Object>();            map.put("image", icon[i]);            map.put("text", iconName[i]);            data_list.add(map);        }        return data_list;    }}

關於setadapter的用法，可以參見官方的API文檔，裡面的解釋是這樣的。

public void setAdapter (ListAdapter adapter) 

 Sets the data behind this GridView. 

 Parameters 

adapter the adapter providing the grid‘s data

好了，結束，這樣就可以直接運行了。

最後，拓展一下，比如現在我有這個表徵圖了，那我怎麼樣去點擊表徵圖，然後讓他有效果呢，這種情況下，我們可以插入一個

setOnItemClickListener（）的方法。那麼現在我們在java代碼檔案夾下建立兩個activity，如（這是我隨意建立的，目的只是讓他有東西能顯示）

那麼接著在Main_Activity中添加setOnItemClickListener方法，這裡我只添加了兩個點擊事件，如下示：

 gview.setOnItemClickListener(new AdapterView.OnItemClickListener() {            @Override            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {                //在這裡處理每一個item的單擊事件                switch (position){                    case 0:                        startActivity(new Intent(MainActivity.this,AnotherAty.class));                        break;                    case 1:                        startActivity(new Intent(MainActivity.this,LoginActivity.class));                        break;                    default:                        break;                }            }        });

最後，附上我的源碼

點擊開啟連結

建立Gridview視圖