ViewPager 从入门到带你撸个启动页之ViewPager基础入门（一）

我会带着你远行 2022-07-19 00:20 122阅读 0赞

转载请注明出处（万分感谢！）：  
[http://blog.csdn.net/javazejian/article/details/52138962][http_blog.csdn.net_javazejian_article_details_52138962]  
  
关联文章:  
  
[ViewPager 从入门到带你撸个启动页之ViewPager基础入门（一）][http_blog.csdn.net_javazejian_article_details_52138962]

[ ViewPager 从入门到带你撸个启动页之Fragment+ViewPager（二）][ViewPager _Fragment_ViewPager]

[ ViewPager 从入门到带你撸个启动页之实战启动页（三）][ViewPager]

[ViewPager 从入门到带你撸个启动页之实战PageTransformer切换动画特效（四）][ViewPager _PageTransformer]

## 一、ViewPager的基本用法 ##

#### 1.ViewPager概述 ####

ViewPager是android扩展包v4包中的类，这个类可以让我们左右切换当前的view。我们先来聊聊ViewPager的几个相关知识点：

*  ViewPager类直接继承了ViewGroup类，因此它一个容器类，可以添加其他的view类
 *  ViewPager类需要一个PagerAdapter适配器类给它提供数据（这点跟ListView一样需要数据适配器Adater）
 *  ViewPager经常和Fragment一起使用，并且官方还提供了专门的FragmentPagerAdapter和FragmentStatePagerAdapter类供Fragment中的ViewPager使用

#### 2.ViewPager使用案例 ####

我们只需在xml布局文件中添加如下代码：  
activity\_main.xml:

tab.xml(作为ViewPager的子布局)：

<?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/colorAccent" >
    
        <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Tab1" />
    
    </LinearLayout>

然后这里我们先创建4个要在ViewPager中显示的界面，代码如下：

ArrayList<View> viewContainter = new ArrayList<View>();
    View view1 = LayoutInflater.from(this).inflate(R.layout.tab1, null);
    View view2 = LayoutInflater.from(this).inflate(R.layout.tab2, null);
    View view3 = LayoutInflater.from(this).inflate(R.layout.tab3, null);
    View view4 = LayoutInflater.from(this).inflate(R.layout.tab4, null);
    //viewContainter添加view
    viewContainter.add(view1);
    viewContainter.add(view2);
    viewContainter.add(view3);
    viewContainter.add(view4);

有了数据后我们就要创建数据适配器了，我们创建一个数据适配器MyPagerAdapter继承自PagerAdapter，在PagerAdapter我们必须重写以下几个方法：

*  int getCount()   
    getCount():返回可以滑动的VIew的个数
 *  void destroyItem(ViewGroup container, int position,Object object)  
    从当前container中删除指定位置的View
 *  Object instantiateItem(ViewGroup container, int position)  
    将当前视图添加到container中并返回当前View视图
 *  boolean isViewFromObject(View arg0, Object arg1)  
    该函数用来判断instantiateItem(ViewGroup, int)函数所返回来的Object与一个页面视图是否是代表的同一个视图，官方建议直接返回arg0 == arg1即可。

下面我们给出MyPagerAdapters完整代码：

/** * ViewPager的数据适配器 */
    class MyPagerAdapters extends PagerAdapter{
       //返回可以滑动的VIew的个数
       @Override
       public int getCount() {
           return viewContainter.size();
       }
       //滑动切换的时候销毁当前的组件
       @Override
       public void destroyItem(ViewGroup container, int position,
                               Object object) {
           ((ViewPager) container).removeView(viewContainter.get(position));
       }
       //将当前视图添加到container中并返回当前View视图
       @Override
       public Object instantiateItem(ViewGroup container, int position) {
           ((ViewPager) container).addView(viewContainter.get(position));
           return viewContainter.get(position);
       }
    
       @Override
       public boolean isViewFromObject(View arg0, Object arg1) {
           return arg0 == arg1;
       }

最后我们只要把MyPagerAdapters适配器设置给ViewPager即可：

pager = (ViewPager) this.findViewById(R.id.viewpager);
    pager.setAdapter(new MyPagerAdapters());

MainActivity完整代码如下：

package com.zejian.viewpager;
    
    import android.annotation.SuppressLint;
    import android.app.Activity;
    import android.os.Bundle;
    import android.support.v4.view.PagerAdapter;
    import android.support.v4.view.PagerTabStrip;
    import android.support.v4.view.ViewPager;
    import android.view.LayoutInflater;
    import android.view.View;
    import android.view.ViewGroup;
    
    import java.util.ArrayList;
    
    public class MainActivity extends Activity { 
    
        ViewPager pager = null;
        PagerTabStrip tabStrip = null;
        ArrayList<View> viewContainter = new ArrayList<View>();
    
        @SuppressLint("ResourceAsColor")
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
    
            pager = (ViewPager) this.findViewById(R.id.viewpager);
    
            View view1 = LayoutInflater.from(this).inflate(R.layout.tab1, null);
            View view2 = LayoutInflater.from(this).inflate(R.layout.tab2, null);
            View view3 = LayoutInflater.from(this).inflate(R.layout.tab3, null);
            View view4 = LayoutInflater.from(this).inflate(R.layout.tab4, null);
            //viewpager开始添加view
            viewContainter.add(view1);
            viewContainter.add(view2);
            viewContainter.add(view3);
            viewContainter.add(view4);
            //设置Adapter
            pager.setAdapter(new MyPagerAdapters());
    
        }
    
        /** * ViewPager的数据适配器 */
        class MyPagerAdapters extends PagerAdapter{
            //返回可以滑动的VIew的个数
            @Override
            public int getCount() {
                return viewContainter.size();
            }
            //滑动切换的时候销毁当前的组件
            @Override
            public void destroyItem(ViewGroup container, int position,
                                    Object object) {
                ((ViewPager) container).removeView(viewContainter.get(position));
            }
            //将当前视图添加到container中并返回当前View视图
            @Override
            public Object instantiateItem(ViewGroup container, int position) {
                ((ViewPager) container).addView(viewContainter.get(position));
                return viewContainter.get(position);
            }
    
            @Override
            public boolean isViewFromObject(View arg0, Object arg1) {
                return arg0 == arg1;
            }
        }
    }

运行代码结果如下：  
![20160806115720785][]  
到此，最简单的ViewPager使用方式已经介绍完啦。

#### 3.PagerTitleStrip类和PagerTabStrip类 ####

我们在编写ViewPager的应用时，还会使用到两个组件类分别是PagerTitleStrip类和PagerTabStrip类，PagerTitleStrip类直接继承自ViewGroup类，用于设置每页的标题，而PagerTabStrip类继承PagerTitleStrip类用于控制Tab选择时指示条样式或者标题样式，这两个类也都是容器类。但是有一点我们需要特别需要注意，**在定义XML的layout的时候，这两个类必须是ViewPager标签的子标签，不然会出错**。由于PagerTabStrip类继承PagerTitleStrip类，因此PagerTabStrip拓展了PagerTitleStrip类功能，所以这里我们仅演示PagerTabStrip用法。  
首先我们在activity\_main.xml文件中添加PagerTabStrip控件：

接着我们在MainActivity.java文件中创建标题数据：

ArrayList<String> titleContainer = new ArrayList<String>();
    //页签项
     titleContainer.add("今日头条");
     titleContainer.add("今天热点");
     titleContainer.add("今日财经");
     titleContainer.add("今日军事");

想要为每个标签页添加标题，我们必须重写PagerAdapter类中的getPageTitle方法，然后根据位置position从集合数据中获取对应的title返回即可，该方法实现如下：

@Override
    public CharSequence getPageTitle(int position) {
        return titleContainer.get(position);
    }

接下来我们来通过PagerTabStrip控件改变每个Tab的下横线指示线的style。代码如下：

tabStrip = (PagerTabStrip) this.findViewById(R.id.tabstrip);
    //取消tab下面的长横线
    tabStrip.setDrawFullUnderline(false);
    //设置tab的背景色
    tabStrip.setBackgroundResource(R.color.bg);
    //设置当前tab页签的下划线颜色
    tabStrip.setTabIndicatorColorResource(R.color.red);
    tabStrip.setTextSpacing(400);

到此标题和指示器都设置完成，下面我们给出改版后的MainActivity代码：

package com.zejian.viewpager;
    
    import android.annotation.SuppressLint;
    import android.app.Activity;
    import android.os.Bundle;
    import android.support.v4.view.PagerAdapter;
    import android.support.v4.view.PagerTabStrip;
    import android.support.v4.view.ViewPager;
    import android.view.LayoutInflater;
    import android.view.View;
    import android.view.ViewGroup;
    
    import java.util.ArrayList;
    
    public class MainActivity extends Activity { 
    
        ViewPager pager = null;
        PagerTabStrip tabStrip = null;
        ArrayList<View> viewContainter = new ArrayList<View>();
        ArrayList<String> titleContainer = new ArrayList<String>();
    
        @SuppressLint("ResourceAsColor")
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
    
            pager = (ViewPager) this.findViewById(R.id.viewpager);
            tabStrip = (PagerTabStrip) this.findViewById(R.id.tabstrip);
            //取消tab下面的长横线
            tabStrip.setDrawFullUnderline(false);
            //设置tab的背景色
            tabStrip.setBackgroundResource(R.color.bg);
            //设置当前tab页签的下划线颜色
            tabStrip.setTabIndicatorColorResource(R.color.red);
            tabStrip.setTextSpacing(400);
    
            View view1 = LayoutInflater.from(this).inflate(R.layout.tab1, null);
            View view2 = LayoutInflater.from(this).inflate(R.layout.tab2, null);
            View view3 = LayoutInflater.from(this).inflate(R.layout.tab3, null);
            View view4 = LayoutInflater.from(this).inflate(R.layout.tab4, null);
            //viewpager开始添加view
            viewContainter.add(view1);
            viewContainter.add(view2);
            viewContainter.add(view3);
            viewContainter.add(view4);
            //页签项
            titleContainer.add("今日头条");
            titleContainer.add("今天热点");
            titleContainer.add("今日财经");
            titleContainer.add("今日军事");
    
            pager.setAdapter(new MyPagerAdapters());
    
        }
    
        /** * ViewPager的数据适配器 */
        class MyPagerAdapters extends PagerAdapter{
            //返回可以滑动的VIew的个数
            @Override
            public int getCount() {
                return viewContainter.size();
            }
            //滑动切换的时候销毁当前的组件
            @Override
            public void destroyItem(ViewGroup container, int position,
                                    Object object) {
                ((ViewPager) container).removeView(viewContainter.get(position));
            }
            //将当前视图添加到container中并返回当前View视图
            @Override
            public Object instantiateItem(ViewGroup container, int position) {
                ((ViewPager) container).addView(viewContainter.get(position));
                return viewContainter.get(position);
            }
    
            @Override
            public boolean isViewFromObject(View arg0, Object arg1) {
                return arg0 == arg1;
            }
    
            @Override
            public CharSequence getPageTitle(int position) {
                return titleContainer.get(position);
            }
        }
    }

最后我们来运行一下看看效果：  
![20160807104758940][]  
效果算一般吧，实际上在我们开发中很少会使用到PagerTabStrip与PagerTitleStrip，因为他们实现的标题栏效果很不好，不能指定一个页面一次显示一个，或者全部显示，而且标题还跟着界面滑动。因此实际应用中并不建议使用。我们更多的是去自定义指示器，这样的话效果也会更好，好了，到此，本篇到此告一段落。

[（app项目）源码GitHub下载地址][app_GitHub]

[ViewPager 从入门到带你撸个启动页之ViewPager基础入门（一）][http_blog.csdn.net_javazejian_article_details_52138962]

[ ViewPager 从入门到带你撸个启动页之Fragment+ViewPager（二）][ViewPager _Fragment_ViewPager]

[ ViewPager 从入门到带你撸个启动页之实战启动页（三）][ViewPager]

[ViewPager 从入门到带你撸个启动页之实战PageTransformer切换动画特效（四）][ViewPager _PageTransformer]

[http_blog.csdn.net_javazejian_article_details_52138962]: http://blog.csdn.net/javazejian/article/details/52138962
[ViewPager _Fragment_ViewPager]: http://blog.csdn.net/javazejian/article/details/52141393
[ViewPager]: http://blog.csdn.net/javazejian/article/details/52144889
[ViewPager _PageTransformer]: http://blog.csdn.net/javazejian/article/details/52160092
[20160806115720785]: /images/20220718/566915fed3c340b0914befdb5b42c055.png
[20160807104758940]: /images/20220718/337d87ad1f3c4a10b074f3e03ed901e6.png
[app_GitHub]: https://github.com/shinezejian/ViewPager