【APP/Android】如何使用 GridView：九宮格排列的網格視圖元件

tags: APP Android

GridView 專案連結

GridView 專案：連結

Code 程式碼

步驟1：在 drawable 資料夾放入想要呈現的圖片

• drawable 資料夾路徑：..\GridView\app\src\main\res\drawable
• 放置於drawable的圖片基本限制：
  1. 不可中文
  2. 不可大寫
  3. 首字不為數字
  4. 不可有特殊符號
  5. 檔案容量不可太大

步驟2：在 activity_main.xml 加入GridView

• activity_main最外層的Layout：<LinearLayout>, <RelativeLayout> 都可
• GridView 屬性：
  • columnWidth：定義每行的固定欄寬，也就是每個item的寬度
  • numColumns：設定想要幾行，或者 auto_fit 自動生成最大數量的行數
  • stretchMode：定義縮放時，如何縮放元件填滿空白區域
    • columnWidth：縮放與行寬同步
    • none：元件不可縮放
  • horizontalSpacing, verticalSpacing：定義邊距
• 更多 GridView 屬性：http://blog.csdn.net/hyp712/article/details/8767611
• 程式碼：

<?xml version="1.0" encoding="utf-8"?>  
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
   xmlns:app="http://schemas.android.com/apk/res-auto"  
   xmlns:tools="http://schemas.android.com/tools"  
   android:layout_width="match_parent"  
   android:layout_height="match_parent"  
   tools:context=".MainActivity">
  
 <GridView   android:id="@+id/grid"  
   android:layout_width="match_parent"  
   android:layout_height="match_parent"  
   android:columnWidth="120dp"  
   android:gravity="center"  
   android:numColumns="auto_fit"  
   android:stretchMode="columnWidth" />  
  
</LinearLayout>

• 預覽畫面

  

步驟3：設定GridView每個item的版面

1. new 一個 Layout XML file
2. 自行決定要在每個item中加入什麼東西
3. 這邊的範例是：1張圖片 (ImageView), 1段文字 (TextView)

• 程式碼：

<?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:padding="5dp">  
  
 <ImageView   android:id="@+id/grid_image"  
   android:layout_width="50dp"  
   android:layout_height="50dp" />  
  
 <TextView   android:id="@+id/grid_text"  
   android:layout_width="wrap_content"  
   android:layout_height="wrap_content"  
   android:layout_marginTop="15dp"  
   android:textSize="9sp" />  
</LinearLayout>

步驟4：在 MainActivity.java 初始化要放入GridView的資料

• 圖片和文字的順序必須要對應

private GridView grid;
    private String[] text = {"google", "facebook", "github", "instagram", "flicker", "twitter",
            "pinterest", "部落格", "line", "wordpress", "homepage", "yahoo", "pchome", "pazzo", "youtube"};
    private int[] imageId = {R.drawable.google, R.drawable.facebook, R.drawable.github,
            R.drawable.instagram, R.drawable.flicker, R.drawable.twitter, R.drawable.pinterest,
            R.drawable.blogger, R.drawable.line, R.drawable.wordpress, R.drawable.homepage,
            R.drawable.yahoo, R.drawable.pchome, R.drawable.pazzo, R.drawable.youtube};

步驟5：new java class extends BaseAdapter

• BaseAdapter：當有客製化需求時，可繼承BaseAdapter後再自行實作對應的方法
• BaseAdapter 是個抽象類別，必須實作類別下的4個抽象方法
  • getCount()：取得item的數量，通常用於取得資料集合的大小及數量
  • getItem()：回傳item的資料
  • getItemId()：回傳item的id
  • getView()：回傳處理後的ListItem畫面，(常發生錯誤)
• LayoutInflater：用別人的xml，動態載入的頁面
  • 作用：
    1. 對於一個沒有被載入或者想要動態載入的頁面，要使用inflate來載入
    2. 對於一個已經載入Activity的就會使用findViewById來載入介面元素
  • 方法：一般都是在Activity中的onCreate()中利用setContentView來載入xml定義好的介面，其實也可以使用LayoutInflater通過getSystemService()的方法來載入，也可以通過LayoutInflater inflater = getLayoutInflater()來獲得xml
• 程式碼：

public class CustomGrid extends BaseAdapter {
    private Context context;
    private final String[] text;
    private final int[] imageId;

    public CustomGrid(Context context, String[] text, int[] imageId) {
        this.context = context;
        this.text = text;
        this.imageId = imageId;
    }

    @Override
    public int getCount() {
        return text.length;
    }

    @Override
    public Object getItem(int position) {
        return null;
    }

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

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        View grid;
        // Context 動態放入mainActivity
        LayoutInflater layoutInflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        if (convertView == null) {
            grid = new View(context);
            // 將grid_single 動態載入(image+text)
            grid = layoutInflater.inflate(R.layout.grid_single, null);
            TextView textView = (TextView) grid.findViewById(R.id.grid_text);
            ImageView imageView = (ImageView) grid.findViewById(R.id.grid_image);
            textView.setText(text[position]);
            imageView.setImageResource(imageId[position]);
        } else {
            grid = (View) convertView;
        }
        return grid;
    }
}

步驟6：在 MainActivity.java 初始化 步驟5 new的class

• 程式碼：

@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        CustomGrid adapter = new CustomGrid(MainActivity.this, text, imageId);
        grid = (GridView) findViewById(R.id.grid);
        grid.setAdapter(adapter);
        grid.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                //[+position] +的功用是?
                Toast.makeText(MainActivity.this, "你選取了" + text[+position], Toast.LENGTH_SHORT).show();
            }
        });
    }

其他GridView作法

1. SimpleAdapter：http://givemepass.blogspot.tw/2011/11/gridview.html
2. BaseAdapter：http://jimmy319.blogspot.tw/2011/11/android-gridview.html

Reference 參考資料

1. Android GridView屬性集合：http://blog.csdn.net/hyp712/article/details/8767611
2. Android清單元件介紹(ListView-Adapter)：
   https://litotom.com/2016/03/26/清單元件介紹listview-adapter/