【Android】10.3 網格視圖（GridView），androidgridview

【Android】10.3 網格視圖（GridView），androidgridview

分類：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消息框顯示所選中的網格的位置索引號（從零開始計算）。在實際程序中，可以通過位置索引號獲取其全尺寸圖像以備其他用途。