掌握Android ViewPager：完整实例教程与开发技巧

3 年 ago

科, 颖

3 minutes

在Android开发中，ViewPager是一个强大的组件，它允许用户通过左右滑动在多个数据页面之间切换。在本教程中，我们将实现一个ViewPager应用，它能够通过滑动手势展示三个不同图像和文本的视图。

深入理解Android ViewPager

Android的ViewPager组件可以在Android支持库中找到，它允许用户通过向左或向右滑动来查看全新的屏幕内容。在本教程中，我们将通过使用Views和PagerAdapter来实现一个ViewPager实例。虽然也可以使用Fragments来实现相同功能，但我们将在后续教程中详细讨论。ViewPager使用PagerAdapter向MainActivity提供视图，这与ListAdapter为ListView提供数据的工作原理相似。

Android ViewPager实例教程

示例代码实现

activity_main.xml布局文件非常简单，只包含一个ViewPager组件，具体代码如下所示：

<RelativeLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</RelativeLayout>

下面是MainActivity.java文件的完整代码实现：

package com.Olivia.viewpager;

import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager);
        viewPager.setAdapter(new CustomPagerAdapter(this));
    }
}

在上述代码中，MainActivity的主要作用是引用ViewPager组件，并设置一个继承自PagerAdapter的CustomPagerAdapter适配器。在详细讨论CustomPagerAdapter类之前，我们先来看一下ModelObject类的实现。ModelObject.java

package com.Olivia.viewpager;

public enum ModelObject {

    RED(R.string.red, R.layout.view_red),
    BLUE(R.string.blue, R.layout.view_blue),
    GREEN(R.string.green, R.layout.view_green);

    private int mTitleResId;
    private int mLayoutResId;

    ModelObject(int titleResId, int layoutResId) {
        mTitleResId = titleResId;
        mLayoutResId = layoutResId;
    }

    public int getTitleResId() {
        return mTitleResId;
    }

    public int getLayoutResId() {
        return mLayoutResId;
    }

}

上述枚举类定义了ViewPager中的所有页面。它包含三个具体的布局页面，分别对应不同的视图。下面我们来看其中一个页面的布局文件，即view_blue.xml：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="https://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:background="@android:color/holo_blue_dark"
    android:layout_height="match_parent">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Second View"
        android:layout_gravity="center_horizontal"
        android:textSize="28sp"
        android:textColor="@android:color/black"
        android:textStyle="bold"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true"
        android:id="@+id/textView" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Swipe left to\nFirst View"
        android:layout_gravity="center_horizontal"
        android:textSize="20sp"
        android:textColor="@android:color/black"
        android:textStyle="bold"
        android:minLines="2"
        android:id="@+id/textView2"
        android:padding="@dimen/activity_horizontal_margin"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Swipe right to\nThird View"
        android:layout_gravity="center_horizontal"
        android:textSize="20sp"
        android:textColor="@android:color/black"
        android:textStyle="bold"
        android:padding="@dimen/activity_horizontal_margin"
        android:minLines="2"
        android:id="@+id/textView3"
        android:layout_alignTop="@+id/textView2"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true" />

</RelativeLayout>

在这个项目的源代码中，其余两个页面的布局与此类似。接下来我们来看CustomPagerAdapter.java的实现：

package com.Olivia.viewpager;

import android.content.Context;
import android.support.v4.view.PagerAdapter;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class CustomPagerAdapter extends PagerAdapter {

    private Context mContext;

    public CustomPagerAdapter(Context context) {
        mContext = context;
    }

    @Override
    public Object instantiateItem(ViewGroup collection, int position) {
        ModelObject modelObject = ModelObject.values()[position];
        LayoutInflater inflater = LayoutInflater.from(mContext);
        ViewGroup layout = (ViewGroup) inflater.inflate(modelObject.getLayoutResId(), collection, false);
        collection.addView(layout);
        return layout;
    }

    @Override
    public void destroyItem(ViewGroup collection, int position, Object view) {
        collection.removeView((View) view);
    }

    @Override
    public int getCount() {
        return ModelObject.values().length;
    }

    @Override
    public boolean isViewFromObject(View view, Object object) {
        return view == object;
    }

    @Override
    public CharSequence getPageTitle(int position) {
        ModelObject customPagerEnum = ModelObject.values()[position];
        return mContext.getString(customPagerEnum.getTitleResId());
    }

}

1. CustomPagerAdapter(Context context)：构造函数需要一个Context上下文引用。由于后续需要使用该引用从枚举类中访问各个页面布局，因此我们将这个上下文保存为类的成员变量。

instantiateItem：在此方法中，我们使用枚举来填充与特定枚举值相关联的布局。然后，我们将新创建的布局添加到PagerAdapter所维护的ViewGroup（视图集合）中，并返回该布局。此方法返回的对象后续将作为isViewFromObject方法的第二个参数使用。

destroyItem：该方法从PagerAdapter维护的ViewGroup中移除指定的视图。

getCount：此方法简单地返回ViewPager将要维护的视图数量。在本例中，该数量为ModelObject枚举类中定义的枚举值数量。

isViewFromObject：该方法用于检查特定对象是否属于给定位置，实现相对简单。如前所述，第二个参数的类型为Object，与instantiateItem方法的返回值类型相同。

getPageTitle：在给定位置，我们需要为PagerAdapter提供一个标题。这通常表现为ActionBar中的Activity标题，有时选项卡会利用此方法为每个标签页添加标签。在本例中，我们仅将其用于标签页标题。

下图展示了应用程序的运行效果。至此，关于Android ViewPager的实例教程已经结束。您可以通过以下链接下载完整的Android ViewPager示例项目。

下载Android ViewPager示例项目

#Android UI #Android ViewPager #Android开发 #Android教程 #ViewPager实例