MonoAndroid：在您的移动应用程序中使用 GridView

• 下载 CustomGridView.zip - 39.6 KB 

引言

正如我在上一篇关于 通用 BaseAdapter 的文章中所提到的，“在过去几周我一直在从事 Mono-Android 的工作”，现在在这篇文章中，我们将看到 **Android GridView** 控件的演示。

现在开始，创建一个 GridView 并不像 **ASP.net** 的 ListView/GridView 那样直接，我们可以将列表集合直接附加到 GridView 并看到充满数据的网格。

在 **Android** 世界里，事情有点不同，列表视图中的每个项都代表一个视图，您必须为该视图中的控件提供值。然而，ListView 和 GridView 之间的主要区别在于，您可以在 GridView 中定义多行项（网格就是这样工作的）。ListView 中缺少这一点（尽管我们可以设计 ListView 项视图来实现这一点，但有点复杂）。

Grid 控件通常用于创建图库和其他东西！

因此，我们可以安全地假设 ListView 更接近 .Net 世界的列表控件，而 GridView 更接近 .Net 世界的 Grid 控件。在这篇文章中，我们将创建一个“**印度电影明星**”网格视图。

我们将一步一步进行。

`

1. 通过选择 **新建 -> 解决方案** 来创建 Android 应用程序，并为其命名为“CustomGridView”
   

   
   

   图 1：创建 Android 项目！

 

2. 项目创建完成后，打开 **Resource 文件夹 -> Layout**，然后添加一个类型为 custGridViewItem.axml 的新文件。
   

   

   
   
   图 2：选择新文件！  

   

   图 3：选择布局文件 

3. 在布局文件中添加以下代码：

   <?xml version="1.0" encoding="utf-8"?>
   <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
       android:orientation="vertical"
       android:layout_width="fill_parent"
       android:layout_height="fill_parent">
       <LinearLayout
           android:orientation="horizontal"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:id="@+id/linearLayoutHorizontal">
           <ImageView
               android:src="@android:drawable/ic_menu_gallery"
               android:layout_width="fill_parent"
               android:layout_height="wrap_content"
               android:id="@+id/imgPers"
               android:layout_gravity="center_vertical"
               android:paddingRight="2pt"
               android:layout_marginBottom="4.7dp" />
           <LinearLayout
               android:orientation="vertical"
               android:minWidth="25px"
               android:minHeight="25px"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:id="@+id/linearLayout1">
               <TextView
                   android:text="Text"
                   android:layout_width="fill_parent"
                   android:layout_height="wrap_content"
                   android:id="@+id/txtName"
                   android:paddingLeft="3pt" />
               <TextView
                   android:text="Text"
                   android:layout_width="match_parent"
                   android:layout_height="fill_parent"
                   android:id="@+id/txtAge"
                   android:typeface="normal"
                   android:textSize="5pt"
                   android:paddingLeft="3pt"
                   android:layout_marginLeft="4.0dp" />
           </LinearLayout>
       </LinearLayout>
   </LinearLayout>
   

       我将解释一下我到底是如何创建这个布局文件的。
   • 首先，添加一个带有“Horizontal”orientation 的 LinearLayout
   • 在这个水平线性布局中，添加一个 ImageView
   • 现在，添加另一个带有垂直方向的 LinearLayout
   • 在这个新添加的线性布局中，添加两个 TextView
   • 其余的我做了一些小的调整来格式化 ImageView 和 TextView。
   
   创建完成后，看看它在 Xamarin^Tm Studio 设计器中的样子：

   

   图 4：GridView 自定义项的设计器视图

    
4. 现在，通过名称 myGVItemAdapter 添加一个类，并继承自抽象泛型类 BaseAdpater<FlimStarInfo>，以下是 FlimStarInfo 类的代码。（与**步骤 2** 类似，不是添加布局文件，而是添加 C# 类文件）

   public class FlimStarInfo
       {
           public string Name {get;set;}
           public string Age  {get;set;}
           public int ImageID {get;set;}
       } 

   上述类的每个对象都将作为 GridView 的 GridViewItem 。



5. 现在，实现 BaseAdapter<FlimStarInfo>，基本的骨架类看起来是这样的：

       public class myGVItemAdapter: BaseAdapter<PersInfo>
       {
           #region implemented abstract members of BaseAdapter
           public override long GetItemId (int position)
           {
               throw new NotImplementedException ();
           }
           public override View GetView (int position, View convertView, ViewGroup parent)
           {
               throw new NotImplementedException ();
           }
           public override int Count {
               get {
                   throw new NotImplementedException ();
               }
           }
           #endregion
           #region implemented abstract members of BaseAdapter
           public override PersInfo this [int position] {
               get {
                   throw new NotImplementedException ();
               }
           }
           #endregion
       } 

   • 现在添加两个私有成员，类型为 List<FlimStarInfo> 和 Activity。
   • 添加 **带参数的构造函数**，它接受 Activity 和 List<FlimStarInfo> 作为参数，并将这些值赋给第一步中列出的私有成员。
   • 编写 GetItemId、Count 和 this [int position] 非常简单，在 GetItemId 中：我们只是将位置作为 itemID 返回；在 Count 中：我们返回列表计数；在 this [int position] 中：我们将返回指定位置的项。
   • 现在我们到了最典型的一部分，编写 **GetView** 函数。

   public override View GetView (int position, View convertView, ViewGroup parent)
   {
   
    var item = _lstFlimStarInfo [position];
     if(convertView == null)
    convertView = _CurrentContext.LayoutInflater.Inflate(Resource.Layout.custGridViewItem,null);
   
    convertView.FindViewById<textview> (Resource.Id.txtName).Text = item.Name;
    convertView.FindViewById<textview> (Resource.Id.txtAge).Text = item.Age.ToString();
    convertView.FindViewById<imageview>(Resource.Id.imgPers).SetImageResource (item.ImageID);
   
    return convertView;
   }
   

   在这里，我们根据位置获取 GridViewItem，然后检查 convertView 是否有内存。如果没有，我们将使用保存的 Activity 对象来创建 custGridViewItem 布局类型的视图。

   现在，由于我们已经提供了 custGridViewItem 视图，使用 FindViewById 方法找到 TextView 和 ImageView，并根据传入的位置将值从 FlimStarInfo 项赋给它们。

6. 现在您的适配器和GridViewAdapter 都已准备就绪，接下来我们将编程主活动来使用上面的代码。在 **Main.axml** 中添加一个 GridView 控件，之后您的代码看起来会是这样的：

   <?xml version="1.0" encoding="utf-8"?>
   <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
       android:orientation="vertical"
       android:layout_width="fill_parent"
       android:layout_height="fill_parent"
       android:minWidth="25px"
       android:minHeight="25px">
       <GridView
           android:minWidth="25px"
           android:minHeight="25px"
           android:layout_width="fill_parent"
           android:layout_height="wrap_content"
           android:id="@+id/gvCtrl" />
   </LinearLayout>
   

   没什么特别的，我只是将 GridView 拖放到布局上并保存了它。



7. 在 _Resources -> Drawable_ 文件夹中添加一些图片，就像我添加的一些印度著名电影艺术家的图片一样。
   

   Madhuri Dixit	Aishwarya Rai Bachan	Akshay Kumar	Arjun Rampal	Abhay Deol	Chiranjeevi
   Shahrukh Khan	Preity Zinta	R Madhavan	Kajol Devgan	Meena Kumari	Juhi Chawla



8. 现在，添加一个私有方法 getFlimStarInformation，类型为 List<FlimStarInfo>，并像这样为它提供一些初始值：
   

   List<flimstarinfo> getFlimStarInformation ()
   {
   
   List<flimstarinfo> listItem = new List<flimstarinfo> () {
   new FlimStarInfo(){Name ="Shahrukh", Age=47,ImageID= Resource.Drawable.shahrukh},
   new FlimStarInfo(){Name ="Preity", Age=38,ImageID= Resource.Drawable.Preity},
   new FlimStarInfo(){Name ="Chiranjeevi", Age=57,ImageID= Resource.Drawable.che},
   new FlimStarInfo(){Name ="Meena", Age=39,ImageID= Resource.Drawable.Meena},
   new FlimStarInfo(){Name ="Madhavan", Age=43,ImageID= Resource.Drawable.maddy},
   new FlimStarInfo(){Name ="Madhuri", Age=41,ImageID= Resource.Drawable.Madhuri},
   new FlimStarInfo(){Name ="Arjun", Age=40,ImageID= Resource.Drawable.arjunram},
   new FlimStarInfo(){Name ="Kajol", Age=38,ImageID= Resource.Drawable.Kajol},
   new FlimStarInfo(){Name ="Akshay", Age=45,ImageID= Resource.Drawable.akshay},
   new FlimStarInfo(){Name ="Aishwarya", Age=39,ImageID= Resource.Drawable.Aishwarya},
   new FlimStarInfo(){Name ="Abhay", Age=37,ImageID= Resource.Drawable.abhay},
   new FlimStarInfo(){Name ="Juhi", Age=45,ImageID= Resource.Drawable.Juhi}
   };
   	return listItem;
   }
   

   这里，这个列表充当了我们将要在下一步解释的 CustomAdapter 的数据源。
   


9. 现在，您可以使用 _FindViewById<GridView>_ 通过 ID “Resource.Id.gvCtrl”找到 GridView，并通过传递当前活动和我们在上一步创建的列表集合来创建我们的 myGVItemAdapter，并将其赋给 GridView 对象的适配器属性。

   List<flimstarinfo> lstFlimStar = getFlimStarInformation ();
   
   var gvObject = FindViewById<gridview> (Resource.Id.gvCtrl);
   gvObject.Adapter = new myGVItemAdapter (this, lstFlimStar);
   

   ListView 将在内部调用 myGVItemAdapter 的 GetView 和 Count 方法来构建列表视图。


10. 现在，添加 GridView.ItemClick 处理程序，并在处理程序代码中添加 Toast 来生成点击用户消息。

    gvObject.ItemClick += new EventHandler<AdapterView.ItemClickEventArgs> (OnGridView_ItemClicked);
    
    void OnGridView_ItemClicked (object sender, AdapterView.ItemClickEventArgs e)
    {
     string selectedName = e.View.FindViewById<TextView> (Resource.Id.txtName).Text;
     Toast.MakeText (this, "You Click on name " + selectedName, ToastLength.Long).Show ();
    }
    

    这里，我们使用 AdapterView.ItemClickEventArgs 参数来检索被点击的视图，并使用（现在我最喜欢的）FindViewById 来获取被点击的单元格数据，然后使用 Toast 将其显示给用户。

    您可以在 此处 阅读更多关于 Toast 类的信息。


11. 现在，构建并运行！
    

    Android 3.4 英寸		Android 4 英寸。

12. 为了运行这个截图，我在 Main.Axml 中更改了 GridView 属性 android:numColumns 为 _"auto_fit"_，并将 android:columnWidth 设置为 _"150dp"_。
    
    
    
    
    Android 设备 7 英寸：横屏

关注点

我使用了MonoAndroid (C#)和Xamarin Studio来构建本教程。请留意，如果我继续学习，您可能会期待更多文章即将发布。

尽管Xamarin Studio是专有软件，但他们提供了免费的入门版本来构建、测试和发布Android应用程序。我正在使用它来学习。

本系列的其他文章！

• MonoAndroid：用 C# 编写自定义通用 BaseAdapter
• MonoAndroid：在移动应用程序中使用 TabHost
• MonoAndroid：在移动应用中使用 Fragments
• MonoAndroid：使用 dotnet Web 服务（ASMX）
• MonoAndroid：使用 Started Service
• MonoAndroid：调用次级活动 
• MonoAndroid：用 C# 编写 ExpandableListView 和 BaseExpandableListAdapter
• MonoAndroid：使用 AlertDialog

本系列技巧/窍门

• MonoAndroid：Android 通知服务
• MonoAndroid：使用绑定服务

历史   

• 2013 年 8 月 1 日：初版
• 2013 年 8 月 22 日：添加了“本系列其他文章”部分
• 2013 年 9 月 4 日：更新了“本系列其他文章”栏
• 2013 年 9 月 6 日：添加了技巧/窍门部分
• 2013年10月11日：更新了文章部分。
• 2013年11月5日：更新了文章部分。
• 2013年11月22日：更新了其他文章部分