[译]：Xamarin.Android用户界面——ViewPager与View组合使用

2016年12月30日 14:00:00

返回索引目录
原文链接：Part 1 - ViewPager with Views
译文链接：Xamarin.Android用户界面——ViewPager与View组合使用

Part 1 - ViewPager with Views

ViewPager是一个布局管理器，以此可以实现手势导航。手势导航可以允许用户左右滑动来逐步浏览数据页面。本指南将介绍如何使用ViewPager和PagerTabStrip来实现可滑动的UI —— 使用View作为数据页，后续指南会介绍如何使用Fragment作为页面。

概览

本指南将一步步演示如何使用ViewPager实现（内容为落叶和常绿树）图库。在此应用中，用户可以通过左右滑动（树分类）来查看树图像。在分类的每个页面顶部，树的名称会列在PagerTabStrip中，同时，一张树的图片会显示在ImagerView中。适配器是用于将ViewPager连接到底层数据模型的。本应用中会实现一个从PagerAdapter派生出来的适配器。

尽管基于ViewPager的应用通常是利用Fragment实现，但是一些比较简单的案例是不需要使用较为复杂的Fragment。例如，本文示例-基本的图片库应用是不需要使用Fragment。因为其内容是静态的，并且用户只在不同图片间来回滑动，所以通过使用标准的Android视图和布局可以让实现比较简单。

创建应用项目

创建一个名为TreePager的Android项目。关于如何创建Android项目的更多信息，参阅：原文：Hello, Android、译文：Xamarin.Android开发入门——Hello,Android快速上手。然后，启动NuGet包管理器。关于安装NuGet软件包的更多信息，参阅：原文：Walkthrough: Including a NuGet in your project。最后，查找并安装Android Support Library v4：

在此，Android Support Library v4相关的额外的（依赖）包也会同时安装。

添加示例数据源

在本示例中，树目录数据源（通过TreeCatalog类）向ViewPager提供项目内容。TreeCatalog类包含了一个现成的树图片和树标题的集合，以此适配器可以利用它们创建视图。TreeCatalog的构造函数不需要参数：

TreeCatalog treeCatalog = new TreeCatalog();

TreeCatalog中的图像集合是组织好的，以便于可以通过索引器访问每一个图像。例如，以下代码行通过图像资源ID来查找集合中的第三章图像：

int imageId = treeCatalog[2].imageId;

由于TreeCatalog的实现细节与理解ViewPager无关，故在此将不列出TreeCatalog代码。具体的TreeCatalog代码见：TreeCatalog.cs。下载此源文件，然后将其添加到你的项目中（或将代码复制并粘贴到一个新的TreeCatalog.cs文件中）。另外，下载并将图片文件解压到你的Resources/drawable文件夹，然后将它们包含进项目中。图片文件下载地址：image files。

创建ViewPager布局

打开Resources/layout/Main.axml文件，并用下面的XML内容替换文件内容：

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.view.ViewPager 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/viewpager"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

</android.support.v4.view.ViewPager>

这个XML定义了占用整个屏幕的ViewPager。注意，你必须使用完整的限定名称android.support.v4.view.ViewPager，因为ViewPager是由支持库提供。ViewPager只能从Android Support Library v4中获取；它在Android SDK中不可用。

设置ViewPager

编辑MainActivity.cs并添加以下using声明：

using Android.Support.V4.View;

使用以下代码替换OnCreate方法：

protected override void OnCreate(Bundle bundle)
{
    base.OnCreate(bundle);
    SetContentView(Resource.Layout.Main);
    ViewPager viewPager = FindViewById<ViewPager>(Resource.Id.viewpager);
    TreeCatalog treeCatalog = new TreeCatalog();
}

此代码进行了如下操作：

设置视图对应为Main.axml布局资源。
从布局中查找ViewPager引用。
实例化一个新的TreeCatalog，以便作为数据源。

当你生成并运行此代码时，你可以看到如下图所示的界面：

至此，ViewPager为空，因为它缺少一个用于访问TreeCatalog内容的适配器。在下一节中，将创建一个PagerAdapter，以便于将ViewPager与TreeCatalog连接起来。

创建适配器

ViewPager使用位于ViewPager和数据源之间的适配器控制对象（参阅例图：原文：Adapter、译文：适配器）。为了访问此数据，ViewPager需要你提供一个派生自PagerAdapter的自定义适配器。此适配器使用来自数据源的内容来填充每个ViewPager页面。由于数据源是属于特定应用的，故此自定义适配器是解析如何访问数据的代码。当用户滑动ViewPager中的页面时，适配器会从数据源中提取信息，并将信息加载到页面中，以供于ViewPager显示。

当你实现一个PageAdapter时，你必须覆盖以下内容：

InstantiateItem —— 在给定位置创建页面（视图），并将其添加到ViewPager的视图集合中。
DestroyItem —— 从指定位置移除页面。
Count —— 只读属性，用于返回可用的视图（页面）数量。
IsViewFromObject —— 确定页面是否与特定的键对象有关（此对象由InstantiateItem方法创建）。在此示例中，键对象是TreeCatalog数据对象。

添加一个名为TreePagerAdapter.cs的新文件，并用以下代码替换其内容：

using System;
using Android.App;
using Android.Runtime;
using Android.Content;
using Android.Views;
using Android.Widget;
using Android.Support.V4.View;
using Java.Lang;

namespace TreePager
{
    class TreePagerAdapter : PagerAdapter
    {
        public override int Count
        {
            get { throw new NotImplementedException(); }
        }

        public override bool IsViewFromObject(View view, Java.Lang.Object obj)
        {
            throw new NotImplementedException();
        }

        public override Java.Lang.Object InstantiateItem (View container, int position)
        {
            throw new NotImplementedException();
        }

        public override void DestroyItem(View container, int position, Java.Lang.Object view)
        {
            throw new NotImplementedException();
        }
    }
}

此代码还不存在PagerAdapter的实现。在下面的部分，将对这些方法中的每个方法用工作代码替换。

实现构造函数

当应用实例化TreePagerAdapter时，它会提供一个上下文（MainActivity）和一个实例化后的TreeCatalog。将下面的成员变量和构造函数添加到TreePagerAdapter类（TreePagerAdapter.cs文件）的顶部：

Context context;
TreeCatalog treeCatalog;

public TreePagerAdapter (Context context, TreeCatalog treeCatalog)
{
    this.context = context;
    this.treeCatalog = treeCatalog;
}

这个构造函数的目的是存储上下文和TreeCatalog实例（TreePagerAdapter将要使用的实例）。

实现Count属性

Count属性实现相对简单：它返回树目录中的树的数量。用以下代码替换Count：

public override int Count
{
    get { return treeCatalog.NumTrees; }
}

TreeCatalog的NumTrees属性可以返回数据集中的树的数量（页面的数量）。

实现InstantiateItem方法

InstantiateItem方法在指定位置创建页面。它还必须将新建的视图添加到ViewPager的视图集合中。为了实现这一点，ViewPager会将自身作为容器参数进行传递。

用一下代码替换InstantiateItem方法：

public override Java.Lang.Object InstantiateItem (View container, int position)
{
    var imageView = new ImageView (context);
    imageView.SetImageResource (treeCatalog[position].imageId);
    var viewPager = container.JavaCast<ViewPager>();
    viewPager.AddView (imageView);
    return imageView;
}

此代码执行了以下操作：

实例化新的ImageView，用于在指定位置显示树的图片。应用的上下文（MainActivity）会被传递给ImageView的构造函数。
将ImageView资源设置为TreeCatalog中指定位置的图像资源ID。
将传递进来的容器View转换为ViewPager引用。注意，你必须使用JavaCast()才能正确执行转换（这是必需的，以便于Android可以执行运行时类型转换检查）。
将实例化的ImageView添加到ViewPager，并将ImageView返回给调用者。

当ViewPager在特定位置显示图像时，它将显示此ImageView。最初，InstantiateItem会被调用两次，并以此填充前两个页面的视图。当用户滚动时，它会再次被调用，以此维护紧邻当前视图项之前和之后的视图。

实现DestroyItem方法

DestroyItem方法会从给定位置删除页面。在应用中，任何给定位置的视图都可以更改，ViewPager必须给定位置替换新视图前，需要用某些方式来移除该位置的过期视图。在TreeCatalog示例中，每个位置上的视图都未改变，因此，由DestoryItem移除的视图都将在该位置调用InstantiateItem时，重新添加。（为了更高的效率，可以实现一个池来回收那些将被重新显示在相同位置的视图）。

用以下代码替换DestroyItem方法：

public override void DestroyItem(View container, int position, Java.Lang.Object view)
{
    var viewPager = container.JavaCast<ViewPager>();
    viewPager.RemoveView(view as View);
}

此代码进行了如下操作：

将传入的容器View转换为ViewPager引用。
将传入的Java对象（视图）转化为C#的View对象（view as View）。
从ViewPager中删除视图。

实现IsViewFromObject方法

当用户在内容页面上左右滑动时，ViewPager调用IsViewFromObject方法来验证给定位置的子视图是否与同一位置的适配器对象相关联（后面，我们将适配器对象称为 对象键 ）。对于相对简单的应用，关联关系是其中一个身份标识 —— 适配器的对象键在该实例中是由之前的InstantiateItem方法返回给ViewPager的视图。然而对于其他应用，对象键可能是一些其他特定的适配器类的实例，它与ViewPager显示在该位置的子视图相关联（却不相同）。只有适配器知道传入的视图是否与对象键有关。

IsViewFromObject必须实现，以此保证PagerAdapter正常工作。如果IsViewFromObject为给定位置返回false，则ViewPager将不会在该位置显示视图。在TreePager应用中，由InstantiateItem返回的对象键是树的页面视图，因此代码只需检查标识（如，对象键与视图是否是同一个）。使用以下代码替换IsViewFromObject：

public override bool IsViewFromObject(View view, Java.Lang.Object obj)
{
    return view == obj;
}

将适配器添加到ViewPager中

现在TreePagerAdapter已经实现了，是时候将它添加到ViewPager中了。在MainActivity.cs中，将以下代码添加到OnCreate方法的结尾处：

viewPager.Adapter = new TreePagerAdapter(this, treeCatalog);

此代码实例化TreePagerAdapter对象，并将MainActivity作为上下文（this）传递。实例化的TreeCatalog对象被作为构造函数的第二个参数传入。ViewPager的Adapter属性是用于设置为实例化的TreePagerAdapter对象；这将TreePagerAdapter插入到ViewPager中。

核心实现已经完成 —— 生成并运行应用。你将会看到树目录的第一张图片出现在屏幕中，如下图中左边内容显示。向左滑动即可查看更多树视图，然后向右滑动即可向后移动树目录：

添加一个页面指示器

最简单的ViewPager实现显示树目录的图像，但是他未提供用户在目录中的位置指示。下一步就是添加一个PagerTabStrip。PagerTabStrip通知用户显示哪个页面，以及通过显示前一页和后一页来提供上下文导航。PagerTabStrip是准备用作ViewPager中当前页面的指示器；它会随着用户在个页面间滑动时滚动并更新。

打开Resources/layout/Main.axml，并向布局中添加一个PagerTabStrip：

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.view.ViewPager 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/viewpager"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <android.support.v4.view.PagerTabStrip
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="top"
        android:paddingBottom="10dp"
        android:paddingTop="10dp"
        android:textColor="#fff" />

</android.support.v4.view.ViewPager>

ViewPager和PagerTabStrip在设计上是组合在一起工作的。当你在ViewPager布局中声明PagerTabStrip时，ViewPager将自动查找PagerTabStrip，并将其连接到适配器。当你生成并运行应用时，你应该会看到显示在每个屏幕顶部的空的PagerTabStrip：

显示标题

要为每个页面标签添加标题，需要在PagerAdapter派生类中实现GetPageTitleFormatted方法。ViewPager会调用GetPagerTitleFormatted（如果实现了）来获取描述指定位置页面的标题字符串。将下面的方法添加到TreePagerAdapter.cs文件的TreePagerAdapter类中：

public override Java.Lang.ICharSequence GetPageTitleFormatted(int position)
{
    return new Java.Lang.String(treeCatalog[position].caption);
}

上述代码会从树目录中的指定页面（位置）获取树的标题字符串，然后将其转换为Java字符串，最后将它返回给ViewPager。当你使用此新方法运行应用时，每个页面都会在PagerTabStrip中显示树标题。你应该会在屏幕顶部看到带有下划线的树名称：

原文描述说没有下划线，PagerTabStrip是带有下划线的，此处原文有误。

你可以来回滑动以查看目录中每一个带有标题的树图像。

PagerTitleStrip变化

PagerTitleStrip与PagerTabStrip非常相似，除了PagerTabStrip为当前选项卡添加下划线。你可以在上面的布局文件中用PagerTitleStrip替换PagerTabStrip，然后重新运行应用，以此查看PagerTitleStrip的显示效果：

注意，当转为使用PagerTitleStrip时，下划线将会被删除。

总结

本文提供了一个逐步操作示例，说明了如何在不使用Fragment的情况下构建基础的ViewPager应用。它提供了一个包含图像和标题字符串的示例数据源，一个显示图像的ViewPager布局，以及一个连接ViewPager和数据源的PagerAdapter子类。为了帮助用户浏览数据集，本操作指南说明了怎样添加一个PagerTabStrip或PagerTitleStrip来在每一个页面顶部显示图像标题。

译：奇葩史

奇葩史的奇葩事