Android 網格檢視

---

---

Android 的GridView以二維滾動網格（行和列）顯示專案，並且網格專案不一定是預先確定的，而是使用ListAdapter自動插入佈局。

網格檢視

介面卡實際上在 UI 元件和填充 UI 元件資料的源資料之間架起橋樑。介面卡可用於向諸如微調器、列表檢視、網格檢視等提供資料。

ListView和GridView是AdapterView的子類，它們可以透過將其繫結到Adapter來填充，該介面卡從外部源檢索資料並建立表示每個資料條目的檢視。

GridView 屬性

以下是特定於 GridView 的重要屬性：

示例

此示例將引導您完成簡單的步驟，以說明如何使用 GridView 建立自己的 Android 應用程式。按照以下步驟修改我們在Hello World 示例章節中建立的 Android 應用程式：

以下是修改後的主活動檔案src/com.example.helloworld/MainActivity.java的內容。此檔案可以包含每個基本生命週期方法。

package com.example.helloworld;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.widget.GridView;

public class MainActivity extends Activity {
   @Override
   protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_main);
      
      GridView gridview = (GridView) findViewById(R.id.gridview);
      gridview.setAdapter(new ImageAdapter(this));
   }
}

以下是res/layout/activity_main.xml檔案的內容：

<?xml version="1.0" encoding="utf-8"?>
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
   android:id="@+id/gridview"
   android:layout_width="fill_parent" 
   android:layout_height="fill_parent"
   android:columnWidth="90dp"
   android:numColumns="auto_fit"
   android:verticalSpacing="10dp"
   android:horizontalSpacing="10dp"
   android:stretchMode="columnWidth"
   android:gravity="center"
/>

以下是res/values/strings.xml檔案的內容，用於定義兩個新常量：

<?xml version="1.0" encoding="utf-8"?>
<resources>
   <string name="app_name">HelloWorld</string>
   <string name="action_settings">Settings</string>
</resources>

以下是src/com.example.helloworld/ImageAdapter.java檔案的內容：

package com.example.helloworld;

import android.content.Context;

import android.view.View;
import android.view.ViewGroup;

import android.widget.BaseAdapter;
import android.widget.GridView;
import android.widget.ImageView;

public class ImageAdapter extends BaseAdapter {
   private Context mContext;
   
   // Constructor
   public ImageAdapter(Context c) {
      mContext = c;
   }
   
   public int getCount() {
      return mThumbIds.length;
   }

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

   public long getItemId(int position) {
      return 0;
   }
   
   // create a new ImageView for each item referenced by the Adapter
   public View getView(int position, View convertView, ViewGroup parent) {
      ImageView imageView;
      
      if (convertView == null) {
         imageView = new ImageView(mContext);
         imageView.setLayoutParams(new GridView.LayoutParams(85, 85));
         imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
         imageView.setPadding(8, 8, 8, 8);
      } 
      else 
      {
         imageView = (ImageView) convertView;
      }
      imageView.setImageResource(mThumbIds[position]);
      return imageView;
   }
   
   // Keep all Images in array
   public Integer[] mThumbIds = {
      R.drawable.sample_2, R.drawable.sample_3,
      R.drawable.sample_4, R.drawable.sample_5,
      R.drawable.sample_6, R.drawable.sample_7,
      R.drawable.sample_0, R.drawable.sample_1,
      R.drawable.sample_2, R.drawable.sample_3,
      R.drawable.sample_4, R.drawable.sample_5,
      R.drawable.sample_6, R.drawable.sample_7,
      R.drawable.sample_0, R.drawable.sample_1,
      R.drawable.sample_2, R.drawable.sample_3,
      R.drawable.sample_4, R.drawable.sample_5,
      R.drawable.sample_6, R.drawable.sample_7
   };
}

讓我們嘗試執行我們剛剛修改的修改後的Hello World！應用程式。我假設您在進行環境設定時建立了AVD。要從 Android Studio 執行應用程式，請開啟專案的一個活動檔案，然後單擊工具欄中的執行圖示。Android Studio 將應用程式安裝到您的 AVD 並啟動它，如果您的設定和應用程式一切正常，它將顯示以下模擬器視窗：

子活動示例

讓我們擴充套件上面示例的功能，我們將以全屏顯示選定的網格影像。為此，我們需要引入一個新活動。請記住，對於任何活動，我們都需要執行所有步驟，例如，我們必須實現一個活動類，在 AndroidManifest.xml 檔案中定義該活動，定義相關的佈局，最後透過在主活動類中使用該子活動將其連結到主活動。因此，讓我們按照以下步驟修改上面的示例：

以下是修改後的主活動檔案src/com.example.helloworld/MainActivity.java的內容。此檔案可以包含每個基本生命週期方法。

package com.example.helloworld;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;

import android.view.Menu;
import android.view.View;

import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.GridView;

public class MainActivity extends Activity {
   @Override
   protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_main);
      
      GridView gridview = (GridView) findViewById(R.id.gridview);
      gridview.setAdapter(new ImageAdapter(this));
      
      gridview.setOnItemClickListener(new OnItemClickListener() {
         public void onItemClick(AdapterView<?> parent, 
            View v, int position, long id){
            // Send intent to SingleViewActivity 
            Intent i = new Intent(getApplicationContext(), SingleViewActivity.class);
            // Pass image index
            i.putExtra("id", position);
            startActivity(i);
         }
      });
   }
}

以下是新活動檔案src/com.example.helloworld/SingleViewActivity.java檔案的內容：

package com.example.helloworld;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.widget.ImageView;

public class SingleViewActivity extends Activity {
   @Override
   public void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.single_view);
      
      // Get intent data
      Intent i = getIntent();
      
      // Selected image id
      int position = i.getExtras().getInt("id");
      ImageAdapter imageAdapter = new ImageAdapter(this);
      
      ImageView imageView = (ImageView) findViewById(R.id.SingleView);
      imageView.setImageResource(imageAdapter.mThumbIds[position]);
   }
}

以下是res/layout/single_view.xml檔案的內容：

<?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:orientation="vertical" >
   
<ImageView android:id="@+id/SingleView"
   android:layout_width="fill_parent"
   android:layout_height="fill_parent"/>
 
</LinearLayout>

以下是AndroidManifest.xml檔案的內容，用於定義兩個新常量：

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
   package="com.example.helloworld">
      
   <application
      android:allowBackup="true"
      android:icon="@drawable/ic_launcher"
      android:label="@string/app_name"
      android:theme="@style/AppTheme" >
      
      <activity
         android:name="com.example.helloworld.MainActivity"
         android:label="@string/app_name" >
      
         <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
         </intent-filter>
         
      </activity>
   
      <activity android:name=".SingleViewActivity"></activity>
   
   </application>
</manifest>

讓我們嘗試執行我們剛剛修改的修改後的Hello World！應用程式。我假設您在進行環境設定時建立了AVD。要從 Android Studio 執行應用程式，請開啟專案的一個活動檔案，然後單擊工具欄中的執行圖示。Android Studio 將應用程式安裝到您的 AVD 並啟動它，如果您的設定和應用程式一切正常，它將顯示以下模擬器視窗：

現在，如果您單擊任何影像，它將顯示為單個影像，例如：

請注意，上面提到的圖片來自 Android 官方網站。