Android学习笔记32：滑屏控件ViewPager的使用-白红宇

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

阅读量：6983 次

发布时间：2019-06-27

本文共 5952 字，大约阅读时间需要 19 分钟。

　　在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 　　
     
       5 　　 6 　　    
       7 　　    
       9 　　    10 　　    
      11 　　    
      
       17 　　        
       25 　　    26 　　    27 　　    
       28 　　    
       
        31 　　        
        
         38 　　            
        39 　　    
       40

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

　　有关静态布局文件的加载可以参看《Android学习笔记31：使用惰性控件ViewStub实现布局动态加载》（）。

　　有一点需要注意，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界面布局源代码如下：

　　其它两张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
     
       mListViewPager;            //ViewPager对象的内容15 　　    List
      
        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
       
        ();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     }

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

转载地址：http://vpvpl.baihongyu.com/

你可能感兴趣的文章

《设计团队协作权威指南》—第1章1.3节甘为螺丝钉