Xamarin 简明教程

Xamarin - Andriod Views

ListViews

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

A Listview is a user interface element that displays lists of items that are scrollable.

Binding data to listviews

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

In this example, you are going to create a listView that displays the days of the week. To start with, let us create a new XML file and name it listViewTemplate.xml.

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

In listViewTemplate.xml, we add a new textview as shown below.

<?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。

Next, go to Main.axml and create a new listview inside the Linear Layout.

<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() 方法中。

Open MainActivity.cs and type the following code to bind the data to the listview we created. The code must be written inside the OnCreate() method.

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[] 只是以数组形式保存我们的项目。

Var data = new string[] simply holds our items as an array.

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

Array Adapter returns the items in our collection as a view. By default, the Array Adapter uses a default textView to display each item. In the above code, we created our own textview in ListViewTemplate.xml and referenced it using the constructor shown below.

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

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

Finally, build and run your application to view the output.

list view app

GridViews

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

A gridView is a view group that allows applications to lay out content in a two-dimensional way, scrollable grid.

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

To add a GridView, create a new project and call it gridViewApp. Go to Main.axml and add a grid as shown below.

<?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 。此类将包含所有将在网格中显示的项目的适配器类。

Next, create a new class and name it ImageAdpter.cs. This class will contain the adapter classes for all items which will be shown in the grid.

在 ImageAdapter 中，添加以下代码 −

Inside ImageAdapter, add the following code −

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() 后添加以下代码。

In the above code, we have simply bound our car images to the image adapters. Next, open MainActivity.cs and add the following code after 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 事件，当用户单击某个图像时，该事件会返回所选图像的位置。

The above code finds the gridView in main.axml and binds it to the imageAdapter class. Gridview.ItemClick creates an onClick event which returns the position of the selected image when a user clicks on an image.

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

Now, build and run your application to view the output.

grid view