ViewPager 從入門到帶你撸個啟動頁之ViewPager基礎入門（一）

一、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的子布局)：

然後這裡我們先創建4個要在ViewPager中顯示的界面，代碼如下：

ArrayList viewContainter = new ArrayList();
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 viewContainter = new ArrayList();

    @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;
        }
    }
}

運行代碼結果如下：

到此，最簡單的ViewPager使用方式已經介紹完啦。<喎?/kf/ware/vc/" target="_blank" class="keylink">vcD4NCjxoNCBpZD0="3pagertitlestrip類和pagertabstrip類">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 titleContainer = new ArrayList();
//頁簽項
?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 viewContainter = new ArrayList();
    ArrayList titleContainer = new ArrayList();

    @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);
        }
    }
}

最後我們來運行一下看看效果：

效果算一般吧，實際上在我們開發中很少會使用到PagerTabStrip與PagerTitleStrip，因為他們實現的標題欄效果很不好，不能指定一個頁面一次顯示一個，或者全部顯示，而且標題還跟著界面滑動。因此實際應用中並不建議使用。我們更多的是去自定義指示器，這樣的話效果也會更好，好了，到此，本篇到此告一段落。