Android学习笔记32：滑屏控件ViewPager的使用

　　在Android开发中，使用ViewPager控件可以轻松实现多个页面的滑动显示效果。需要注意的一点是，在Android3.0版本的SDK之后提供了android-support-v4.jar包，用于实现版本的兼容，让老版本系统下的应用通过加载这个包实现扩展。所以在使用ViewPager控件时，可以根据需要往工程中导入android-support-v4.jar包。

　　在本篇博文中，我将以一个简单的例子演示如何使用ViewPager控件实现滑屏显示效果。完成后的运行效果如图1所示。

图1 ViewPager效果图

　　（说明：图1中所示新闻图片来自凤凰网和腾讯网，特此说明。）

　　在该实例中，我制作了一个类似新闻导航功能的UI界面，顶端有四个选项卡“首页”、“新闻”、“娱乐”以及“博客”，每个选项卡的下面会显示与之相应的选项内容（该实例主要是为了学习ViewPager控件的使用，所以目前只实现了“新闻”选项卡下面的内容）。在“新闻”选项内，使用ViewPager控件实现了三条新闻的滑动显示效果，通过左右拖动页面可以进行页面的切换，同时，在页面的下方还实现了一个页面指示器，可以告诉用户总共可以滑动几屏，以及当前页面所处的位置是第几屏。

　　下面就来详细说说这个实例的具体实现过程。

 

1.主界面设计

　　由图1可以看出，该实例的主界面是由四部分组成的：顶端的导航条、新闻图片、新闻正文概要、底端的页面指示器。

　　主界面布局使用FrameLayout作为主布局格式，目的在于当ViewPager控件左右滑动显示不同的新闻内容时，顶端的导航条和底端的页面指示器不受影响，而显示在最上层。

　　具体的主界面布局源代码如下：

　　<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
　　    xmlns:tools="http://schemas.android.com/tools"
　　    android:layout_width="match_parent"
　　    android:layout_height="match_parent" >
　　
　　    <!-- 顶端导航栏 -->
　　    <include 
　　        layout="@layout/layout_include"/>
　　    
　　    <!-- 滑屏界面 -->
　　    <android.support.v4.view.ViewPager
　　        android:id="@+id/viewpager"
　　        android:layout_width="wrap_content"
　　        android:layout_height="wrap_content"
　　        android:layout_marginTop="34dp"
　　        android:layout_gravity="center"    >
　　        <!-- 
　　        <android.support.v4.view.PagerTitleStrip
　　            android:id="@+id/viewpagetitle"
　　            android:layout_width="wrap_content"
　　            android:layout_height="wrap_content"
　　            android:layout_gravity="top"    >
　　        </android.support.v4.view.PagerTitleStrip>
　　        -->
　　    </android.support.v4.view.ViewPager>
　　    
　　    <!-- 底端的页面指示器 -->
　　    <RelativeLayout 
　　        android:layout_width="match_parent"
　　        android:layout_height="wrap_content"    >
　　        <LinearLayout 
　　            android:id="@+id/page_indicator"
　　            android:layout_width="match_parent"
　　            android:layout_height="wrap_content"
　　            android:orientation="horizontal"
　　            android:gravity="center_horizontal"
　　            android:layout_marginTop="400dp"    >
　　            </LinearLayout>
　　    </RelativeLayout>
　　</FrameLayout>

　　其中，主界面中有关导航栏的控件布局定义在了xml文件layout_include.xml中，然后，通过使用了<include></include>标签将导航栏的布局文件静态的加载到了主界面布局中来，使主界面的布局文件结构更加清晰，同时也便于代码维护。

　　有关静态布局文件的加载可以参看《Android学习笔记31：使用惰性控件ViewStub实现布局动态加载》（http://www.cnblogs.com/menlsh/archive/2013/03/17/2965217.html）。

　　有一点需要注意，ViewPager控件的xml标签和普通的Android控件标签不太一样，需要使用<android.support.v4.view.ViewPager></android.support.v4.view.ViewPager>的形式，将包名也包含其中。并且，ViewPager控件还提供了一个内嵌的滑屏标题控件<android.support.v4.view.PagerTitleStrip></android.support.v4.view.PagerTitleStrip>，可以用于设置每一屏的标题。在该实例中，并未使用该控件，所以将其注释掉了。

　　此外，在主界面布局文件的最后，定义了一个水平的线性布局LinearLayout，用来动态的加载页面指示器。

　　至此，该实例的主界面就设计好了。

 

2.ViewPager界面设计

　　在该实例中，有3张不同的ViewPager界面，每张ViewPager界面都是有两部分构成的：新闻图片和新闻正文概要。当然了，每张ViewPager界面显示的内容都是不同的，所以需要分别进行布局设计。

　　在本实例中，每张ViewPager界面布局的格式都是一样的，使用垂直线性布局LinearLayout将ViewPager界面划分为两部分，上部分使用ImageView控件显示新闻图片，下部分使用TextView显示新闻正文概要。

　　该实例中的第一条新闻报道的ViewPager界面布局源代码如下：

　　<?xml version="1.0" encoding="utf-8"?>
　　<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
　　    android:layout_width="match_parent"
　　    android:layout_height="wrap_content"
　　    android:orientation="vertical" >
　　    
　　    <ImageView 
　　        android:layout_width="match_parent"
　　        android:layout_height="wrap_content"
　　        android:scaleType="center"
　　        android:src="@drawable/visitor"    />
　　    <TextView 
　　        android:layout_width="match_parent"
　　        android:layout_height="wrap_content"
　　        android:layout_marginTop="5dp"
　　        android:layout_marginLeft="20dp"
　　        android:layout_marginRight="20dp"
　　        android:text="@string/news_content_one"    />
　　
　　</LinearLayout>

　　其它两张ViewPager界面的布局文件和如上的代码大同小异，这里就不再赘述了。我将这3张ViewPager界面的布局文件分别命名为了“layout_news_one”、“layout_news_two”、“layout_news_three”，在PagerAdapter中需要加载这3个xml文件。

 

3.页面适配器PagerAdapter

　　如何加载每一屏的内容到ViewPager控件中呢？答案是使用页面适配器PagerAdapter。

　　PagerAdapter是一个抽象类，在继承PagerAdapter类时，必须要实现PagerAdapter类的四个抽象方法：

　　（1）public Object instantiateItem (ViewGroup container, int position);

　　（2）public void destroyItem (ViewGroup container, int position, Object object);

　　（3）public abstract int getCount ();

　　（4）public abstract boolean isViewFromObject (View view, Object object);

　　其中，instantiateItem()方法的作用是初始化ViewPager中的项；destroyItem()方法的作用是销毁ViewPager中的项；getCount()方法的作用是获取ViewPager中有多少项（有几屏）；isViewFromObject()方法的作用是判断是否由对象生成界面。

　　在该实例中，新建了一个继承自PagerAdapter的MyPagerAdapter类，并实现了以上的抽象方法。该类的具体实现如下：

　　package com.example.android_viewpager;
　　
　　import java.util.ArrayList;
　　import java.util.List;
　　
　　import android.content.Context;
　　import android.support.v4.view.PagerAdapter;
　　import android.support.v4.view.ViewPager;
　　import android.view.LayoutInflater;
　　import android.view.View;
　　
　　public class MyPagerAdapter extends PagerAdapter {
　　
　　    List<View> mListViewPager;            //ViewPager对象的内容
　　    List<String> mListViewPagerTitle;        //ViewPager对象的标题（未使用）
　　    Context mContext;
　　    
　　    public MyPagerAdapter(Context Context) {
　　        this.mContext = Context;
　　        
　　        //加载xml文件到ViewPager对象中
　　        View viewPagerNews1 = LayoutInflater.from(mContext).inflate(R.layout.layout_news_one, null);
　　        View viewPagerNews2 = LayoutInflater.from(mContext).inflate(R.layout.layout_news_two, null);
　　        View viewPagerNews3 = LayoutInflater.from(mContext).inflate(R.layout.layout_news_three, null);
　　        mListViewPager = new ArrayList<View>();
　　        mListViewPager.add(viewPagerNews1);
　　        mListViewPager.add(viewPagerNews2);
　　        mListViewPager.add(viewPagerNews3);
　　    }
　　    
　　    //获取ViewPager的页数
　　    public int getCount() {
　　        return mListViewPager.size();
　　    }
　　    
　　    //初始化ViewPager中的项
　　    public Object instantiateItem(View container, int position) {
　　        ((ViewPager)container).addView(mListViewPager.get(position));
　　        return mListViewPager.get(position);
　　    }
　　    
　　    //获取每个ViewPager的标题
　　    public CharSequence getPageTitle(int position) {
　　        return mListViewPagerTitle.get(position);
　　    }
　　
　　    //判断是否由对象生成界面
　　    public boolean isViewFromObject(View view, Object object) {
　　        return view == object;
　　    }
　　
　　    //销毁ViewPager中的项
　　    public void destroyItem(View container, int position, Object object) {
　　        ((ViewPager)container).removeView(mListViewPager.get(position));
　　    }
　　}

　　此外，还需要使用ViewPager类的setAdapter (PagerAdapter adapter)方法加载该自定义的MyPagerAdapter适配器。

 

4.ViewPager事件监听

　　在该实例中，我们需要对ViewPager进行事件监听，以便实现底端的页面指示器功能。

　　要实现ViewPager的事件监听，我们可以根据需要实现OnPageChangeListener接口中的以下3个事件监听处理方法：

　　（1）public abstract void onPageScrollStateChanged (int state);

　　（2）public abstract void onPageScrolled (int position, float positionOffset, int positionOffsetPixels);

　　（3）public abstract void onPageSelected (int position);

　　这3个方法的调用时机各不一样。其中，onPageScrollStateChanged()方法发生在滚动状态变化时，用于监测用户开始拖动ViewPager；onPageScrolled()方法发生在当前页面滚动时，用于监测用于拖动当前页面的程度（偏移量多少）；onPageSelected()方法发生在当前页面被选择时，用于监测当前滑动到了哪一个页面。

　　显然，要实现底端的页面指示器功能，我们需要实现onPageSelected()方法。实现方法如下：

　　/*
     * Function  :    事件监听处理
     * Author    :    博客园-依旧淡然
     */
    public void onPageSelected(int position) {
        for(int i = 0; i < myPagerAdapter.getCount(); i++)    {
            if(position == i) {
                mIndicatorList[position].setBackgroundResource(R.drawable.page_indicator_big);
            }    else {
                mIndicatorList[i].setBackgroundResource(R.drawable.page_indicator_small);
            }
        }
    }

　　通过以上的方法，我们便实现了底端的页面指示器功能，让当前的显示页面在指示器中以大圆圈表示。