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控件左右滑动显示不同的新闻内容时，顶端的导航条和底端的页面指示器不受影响，而显示在最上层。

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

复制代码
 1 　　<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
 2 　　    xmlns:tools="http://schemas.android.com/tools"
 3 　　    android:layout_width="match_parent"
 4 　　    android:layout_height="match_parent" >
 5 　　
 6 　　    <!-- 顶端导航栏 -->
 7 　　    <include 
 8 　　        layout="@layout/layout_include"/>
 9 　　    
10 　　    <!-- 滑屏界面 -->
11 　　    <android.support.v4.view.ViewPager
12 　　        android:id="@+id/viewpager"
13 　　        android:layout_width="wrap_content"
14 　　        android:layout_height="wrap_content"
15 　　        android:layout_marginTop="34dp"
16 　　        android:layout_gravity="center"    >
17 　　        <!-- 
18 　　        <android.support.v4.view.PagerTitleStrip
19 　　            android:id="@+id/viewpagetitle"
20 　　            android:layout_width="wrap_content"
21 　　            android:layout_height="wrap_content"
22 　　            android:layout_gravity="top"    >
23 　　        </android.support.v4.view.PagerTitleStrip>
24 　　        -->
25 　　    </android.support.v4.view.ViewPager>
26 　　    
27 　　    <!-- 底端的页面指示器 -->
28 　　    <RelativeLayout 
29 　　        android:layout_width="match_parent"
30 　　        android:layout_height="wrap_content"    >
31 　　        <LinearLayout 
32 　　            android:id="@+id/page_indicator"
33 　　            android:layout_width="match_parent"
34 　　            android:layout_height="wrap_content"
35 　　            android:orientation="horizontal"
36 　　            android:gravity="center_horizontal"
37 　　            android:layout_marginTop="400dp"    >
38 　　            </LinearLayout>
39 　　    </RelativeLayout>
40 　　</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界面布局源代码如下：

复制代码
 1 　　<?xml version="1.0" encoding="utf-8"?>
 2 　　<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3 　　    android:layout_width="match_parent"
 4 　　    android:layout_height="wrap_content"
 5 　　    android:orientation="vertical" >
 6 　　    
 7 　　    <ImageView 
 8 　　        android:layout_width="match_parent"
 9 　　        android:layout_height="wrap_content"
10 　　        android:scaleType="center"
11 　　        android:src="@drawable/visitor"    />
12 　　    <TextView 
13 　　        android:layout_width="match_parent"
14 　　        android:layout_height="wrap_content"
15 　　        android:layout_marginTop="5dp"
16 　　        android:layout_marginLeft="20dp"
17 　　        android:layout_marginRight="20dp"
18 　　        android:text="@string/news_content_one"    />
19 　　
20 　　</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类，并实现了以上的抽象方法。该类的具体实现如下：

复制代码
 1 　　package com.example.android_viewpager;
 2 　　
 3 　　import java.util.ArrayList;
 4 　　import java.util.List;
 5 　　
 6 　　import android.content.Context;
 7 　　import android.support.v4.view.PagerAdapter;
 8 　　import android.support.v4.view.ViewPager;
 9 　　import android.view.LayoutInflater;
10 　　import android.view.View;
11 　　
12 　　public class MyPagerAdapter extends PagerAdapter {
13 　　
14 　　    List<View> mListViewPager;            //ViewPager对象的内容
15 　　    List<String> mListViewPagerTitle;        //ViewPager对象的标题（未使用）
16 　　    Context mContext;
17 　　    
18 　　    public MyPagerAdapter(Context Context) {
19 　　        this.mContext = Context;
20 　　        
21 　　        //加载xml文件到ViewPager对象中
22 　　        View viewPagerNews1 = LayoutInflater.from(mContext).inflate(R.layout.layout_news_one, null);
23 　　        View viewPagerNews2 = LayoutInflater.from(mContext).inflate(R.layout.layout_news_two, null);
24 　　        View viewPagerNews3 = LayoutInflater.from(mContext).inflate(R.layout.layout_news_three, null);
25 　　        mListViewPager = new ArrayList<View>();
26 　　        mListViewPager.add(viewPagerNews1);
27 　　        mListViewPager.add(viewPagerNews2);
28 　　        mListViewPager.add(viewPagerNews3);
29 　　    }
30 　　    
31 　　    //获取ViewPager的页数
32 　　    public int getCount() {
33 　　        return mListViewPager.size();
34 　　    }
35 　　    
36 　　    //初始化ViewPager中的项
37 　　    public Object instantiateItem(View container, int position) {
38 　　        ((ViewPager)container).addView(mListViewPager.get(position));
39 　　        return mListViewPager.get(position);
40 　　    }
41 　　    
42 　　    //获取每个ViewPager的标题
43 　　    public CharSequence getPageTitle(int position) {
44 　　        return mListViewPagerTitle.get(position);
45 　　    }
46 　　
47 　　    //判断是否由对象生成界面
48 　　    public boolean isViewFromObject(View view, Object object) {
49 　　        return view == object;
50 　　    }
51 　　
52 　　    //销毁ViewPager中的项
53 　　    public void destroyItem(View container, int position, Object object) {
54 　　        ((ViewPager)container).removeView(mListViewPager.get(position));
55 　　    }
56 　　}
复制代码

　　此外，还需要使用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()方法。实现方法如下：

复制代码
 1 　　/*
 2      * Function  :    事件监听处理
 3      * Author    :    博客园-依旧淡然
 4      */
 5     public void onPageSelected(int position) {
 6         for(int i = 0; i < myPagerAdapter.getCount(); i++)    {
 7             if(position == i) {
 8                 mIndicatorList[position].setBackgroundResource(R.drawable.page_indicator_big);
 9             }    else {
10                 mIndicatorList[i].setBackgroundResource(R.drawable.page_indicator_small);
11             }
12         }
13     }
复制代码

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

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/britalient/p/3173240.html