【Android】10.3 網格視圖（GridView）

標籤：

分類：C#、Android、VS2015；

建立日期：2016-02-19 一、簡介

網格視圖（GridView）是在GridLayout的基礎上添加了滾動功能的視圖，即：GridView用於在可滾動的2D網格空間中顯示包含大量儲存格的項（每項都是一個視圖），例如每個儲存格顯示一個圖片，當圖片較多時，還可以上下滾動查看。

要使用GridView，需要先編寫一個視圖適配器（一般用繼承自BaseAdapter<T>的適配器類來實現），再利用它來依次填充每個儲存格，例如，將圖片按先行後列（或者先列後行）依次插入到每個儲存格中。

二、樣本1-GridView基本用法

本例示範如何用GridView建立一個用縮圖組成的網格。當某一項被選中時，彈出顯示該映像位置的Toast訊息提示框。如果映像較多，還可以上下滾動查看。

1、運行

2、設計步驟

（1）添加ch1001_GridViewDemo.axml檔案

在Resources/layout檔案夾下添加該檔案。

<?xml version="1.0" encoding="utf-8"?><GridView xmlns:android="http://schemas.android.com/apk/res/android"    android:id="@+id/gridview1"    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" />

建立的GridView將自動填滿整個螢幕。

（2）添加ch1001MyImageAdapter.cs檔案

在SrcDemos檔案夾下添加該檔案。

這裡再重複一遍，鍵入下面的代碼後，單擊小燈泡右側的三角符號，然後單擊“實現介面”，它就會自動添加對應的方法，而不是你自己一點一點敲進去的。凡是需要實現介面的地方都是這樣做的。

class ch1001MyImageAdapte : BaseAdapter<int>

{

}

該檔案的完整代碼如下：

using Android.Content;using Android.Views;using Android.Widget;namespace MyDemos.SrcDemos{    class ch1001MyImageAdapte : BaseAdapter<int>    {        Context context;        int[] thumbIds =         {            Resource.Drawable.ch05sample_2, Resource.Drawable.ch05sample_3,            Resource.Drawable.ch05sample_4, Resource.Drawable.ch05sample_5,            Resource.Drawable.ch05sample_6, Resource.Drawable.ch05sample_7,            Resource.Drawable.ch05sample_0, Resource.Drawable.ch05sample_1,            Resource.Drawable.ch05sample_2, Resource.Drawable.ch05sample_3,            Resource.Drawable.ch05sample_4, Resource.Drawable.ch05sample_5,            Resource.Drawable.ch05sample_6, Resource.Drawable.ch05sample_7,            Resource.Drawable.ch05sample_0, Resource.Drawable.ch05sample_1,            Resource.Drawable.ch05sample_2, Resource.Drawable.ch05sample_3,            Resource.Drawable.ch05sample_4, Resource.Drawable.ch05sample_5,            Resource.Drawable.ch05sample_6, Resource.Drawable.ch05sample_7        };        public ch1001MyImageAdapte(Context c)        {            context = c;        }        public override int this[int position]        {            get { return 0; }        }        public override int Count        {            get { return thumbIds.Length; }        }        public override long GetItemId(int position)        {            return 0;        }        public override View GetView(int position, View convertView, ViewGroup parent)        {            ImageView imageView;            if (convertView == null)            {                imageView = new ImageView(context);                imageView.LayoutParameters = new GridView.LayoutParams(200, 200);                imageView.SetScaleType(ImageView.ScaleType.CenterCrop);                imageView.SetPadding(8, 8, 8, 8);            }            else            {                imageView = (ImageView)convertView;            }            imageView.SetImageResource(thumbIds[position]);            return imageView;        }    }}

代碼說明：

通常情況下，GetItem(int)應該返回一個適配器中指定位置的真實對象，GetItemId(int)應該返回組件的真實編號，但是在本例中都用不到，所以返回什麼值都無所謂。

SetLayoutParams(ViewGroup.LayoutParams) 設定視圖的高度和寬度，這樣可確保不論原映像的大小如何都能適當的調整大小和裁減。

SetScaleType(ImageView.ScaleType) 聲明了映像將依照中心進行裁減(如果需要的話)。

SetPadding(int, int, int, int)定義了如何填充內邊距。（注意，如果映像有不同的縱橫比，當映像不匹配ImageView給定的尺寸時，內邊距較小會導致映像有更多的裁減）。

如果傳給GetView()的視圖不為空白，則ImageView會由可重複使用的View初始化。

在GetView()方法的最後，傳入的position參數用於從被作為ImageView資源的mThumbIds數組中選擇映像。

剩下的就是定義drawable資源的thumbIds數組。

也可以使用imageView.SetAdjustViewBounds(boolean)讓其自動適應映像的大小，用法很簡單，直接用該語句替換掉SetLayoutParams()方法即可。

（3）添加ch1001GridViewDemo.cs檔案

在SrcDemos檔案夾下添加該檔案。

using Android.App;using Android.OS;using Android.Widget;namespace MyDemos.SrcDemos{    [Activity(Label = "【例10-1】網格視圖基本用法")]    public class ch1001GridViewDemo : Activity    {        protected override void OnCreate(Bundle savedInstanceState)        {            base.OnCreate(savedInstanceState);            SetContentView(Resource.Layout.ch1001_GridViewDemo);            var gridview = FindViewById<GridView>(Resource.Id.gridview1);            gridview.Adapter = new ch1001MyImageAdapte(this);            gridview.ItemClick += (s, e) =>            {                Toast.MakeText(this, e.Position.ToString(), ToastLength.Short).Show();            };        }    }}

當單擊網格中的某項時，這裡僅用Toast訊息框顯示所選中的網格的位置索引號（從零開始計算）。在實際程式中，可以通過位置索引號擷取其全尺寸映像以備其他用途。

【Android】10.3 網格視圖（GridView）