Xamarin 简明教程

Xamarin - Andriod Views

ListViews

列表视图是显示可滚动项目列表的用户界面元素。

Binding data to listviews

在此示例中，您将创建用于显示一周日期的 listView。首先，让我们创建一个新的 XML 文件，并将其命名为 listViewTemplate.xml 。

在 listViewTemplate.xml 中，我们添加一个新的 textview，如下所示。

<?xml version = "1.0" encoding = "utf-8" ?>
<TextView xmlns:android = "http://schemas.android.com/apk/res/android"
android:id = "@+id/textItem"
android:textSize ="20sp"
android:layout_width = "fill_parent"
android:layout_height = "wrap_content"/>

接下来，转到 Main.axml 并在线性布局内创建一个新的 listview。

<ListView
   android:minWidth="25px"
   android:minHeight="25px"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:id="@+id/listView1" />

打开 MainActivity.cs 并输入以下代码以将数据绑定到我们创建的 listview。该代码必须写在 OnCreate() 方法中。

SetContentView(Resource.Layout.Main);
var listView = FindViewById<ListView>(Resource.Id.listView1);
var data = new string[] {
   "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"
};
listView.Adapter = new ArrayAdapter(this, Resource.Layout.ListViewTemplate, data);

Var data = new string[] 只是以数组形式保存我们的项目。

数组适配器将我们集合中的项目作为视图返回。默认情况下，数组适配器使用默认的 textView 来显示每个项目。在上述代码中，我们在 ListViewTemplate.xml 中创建了自己的 textview 并使用下所示的构造函数引用它。

ArrayAdapter(this, Resource.Layout.ListViewTemplate, data);

最后，构建并运行应用程序来查看输出。

list view app

GridViews

网格视图是允许应用程序以二维方式布置内容的可滚动网格视图组。

要添加网格视图，请创建一个新项目并将其称为 gridViewApp 。转至 Main.axml 并按如下所示添加一个网格。

<?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" />

接下来，创建一个新类并将其命名为 ImageAdpter.cs 。此类将包含所有将在网格中显示的项目的适配器类。

在 ImageAdapter 中，添加以下代码 −

public class ImageAdapter : BaseAdapter {
   Context context;
   public ImageAdapter(Context ch) {
      context = ch;
   }

   public override int Count {
      get {
         return cars.Length;
      }
   }

   public override long GetItemId(int position) {
   return 0;
   }

   public override Java.Lang.Object GetItem(int position) {
      return null;
   }

   public override View GetView(int position,
      View convertView, ViewGroup parent) {
      ImageView imageView;
      if (convertView == null) {
         imageView = new ImageView(context);
         imageView.LayoutParameters = new GridView.LayoutParams(100, 100);
         imageView.SetScaleType(ImageView.ScaleType.CenterCrop);
         imageView.SetPadding(8, 8, 8, 8);
      } else {
         imageView = (ImageView)convertView;
      }

      imageView.SetImageResource(cars[position]);
      return imageView;
   }

   int[] cars = {
      Resource.Drawable.img1, Resource.Drawable.img2,
      Resource.Drawable.img3, Resource.Drawable.img4,
      Resource.Drawable.img5, Resource.Drawable.img6,
   };
}

在上述代码中，我们只是将汽车图片绑定到了图像适配器。接下来，打开 MainActivity.cs 并在 setContentView() 后添加以下代码。

var gridview = FindViewById<GridView>(Resource.Id.gridview);
gridview.Adapter = new ImageAdapter(this);
gridview.ItemClick += delegate(object sender,
   AdapterView.ItemClickEventArgs args) {
      Toast.MakeText(this,
         args.Position.ToString(), ToastLength.Short).Show();
};

上述代码在 main.axml 中找到网格视图，并将其绑定到 imageAdapter 类。 Gridview.ItemClick 创建一个 onClick 事件，当用户单击某个图像时，该事件会返回所选图像的位置。

现在，构建并运行您的应用程序以查看输出。

grid view