ViewPager适配器学习记录（ pageAdapter和FragmentPagerAdapter/FragmentStatePagerAdapter)）

1、概述

ViewPager，顾名思义实现控件的滚动功能，是Support-v4的包中类，使用前要先导包。使用的时候跟listView有点相似，需要设置对应的适配器，通常有俩大类

【pageAdapter】

【FragmentPagerAdapter/FragmentStatePagerAdapter】

fragment有着自己的生命周期，谷歌官方也推荐使用ViewPage+fragment的形式，一般简单的也可以使用ViewPage+pageAdapter形式

这里用这俩种适配器来搭个框架学习使用一下，先上使用FragmentPagerAdapter的效果图

1、FragmentPagerAdapter/FragmentStatePagerAdapter

首先他们都是继承自PagerAdapter，FragmentPagerAdapter适合使用在固定的数量较少的场景，比如本例的4个tab的fragment滑动界面，而FragmentStatePagerAdapter适合适合用在多个tab场景下，并且会保存当前界面以及下一个界面和上一界面，最多可以保留3个（具体源码分析参见http://blog.csdn.net/jackrex/article/details/9885469?utm_source=tuicool&utm_medium=referral）他们的使用方式一致，这里以FragmentPagerAdapter来看

在使用FragmentPagerAdapter时我们首先要实现它的俩个方法，如下

//初始化Adapter这里使用FragmentPagerAdapter
        mAdpter = new FragmentPagerAdapter(getSupportFragmentManager()) {
            @Override
            public Fragment getItem(int position) {

                return mFragments.get(position);
            }

            @Override
            public int getCount() {
                return mFragments.size();
            }

        };

方法一目了然，getCount()返回的是ViewPager页面的数量，getItem()返回的是要显示的fragent对象。

从这里看到我们管理的对象是不同的fragment对应不同的布局

2、pageAdapter

使用pageradapter，至少必须重写下面的四个方法

【 instantiateItem(ViewGroup, int)】

这个函数的实现的功能是创建指定位置的页面视图。适配器有责任增加即将创建的View视图到这里给定的container中，这是为了确保在finishUpdate(viewGroup)返回时这个已经完成

返回值：返回一个代表新增视图页面的Object

【public void destroyItem (ViewGroup container, int position, Object object)】

该方法实现的功能是移除一个给定位置的页面。适配器有责任从容器中删除这个视图。这是为了确保在finishUpdate(viewGroup)返回时视图能够被移除。

【 public int getCount()】

返回当前有效视图的个数。

【isViewFromObject(View, Object)】

功能：该函数用来判断instantiateItem(ViewGroup, int)函数所返回来的Key与一个页面视图是否是代表的同一个视图(即它俩是否是对应的，对应的表示同一个View)

返回值：如果对应的是同一个View，返回True，否则返回False。

3、viewpager+fragment demo代码实现

主要目录结构如下

主布局文件activity_main.xml如下

<?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:background="@color/white"
    android:orientation="vertical">

    <include layout="@layout/topbar_layout"/>

    <android.support.v4.view.ViewPager
        android:id="@+id/id_viewpager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">
    </android.support.v4.view.ViewPager>

    <include layout="@layout/bottom"/>

</LinearLayout>

可以看出这里通过include包含一头一尾，中间是V4包中的ViewPager

bottom.xml代码如下

<?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="horizontal"
              android:layout_marginBottom="5dp"
              android:background="@color/mainpage_mycrircle_leftview_item_auth_name"
    >

    <LinearLayout
        android:id="@+id/id_tab_mycircle"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical">
        <!-- android:clickable="false" 是为了防止ImageButton截取了触摸事件 ，这里事件要给它的上一级linearlayout-->
        <ImageButton
            android:id="@+id/id_tab_mycirlceImg"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#00000000"
            android:clickable="false"
            android:src="@drawable/mainpage_tab_mycircle_selected"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="我的圈子"
            />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/id_tab_discovery"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical">

        <ImageButton
            android:id="@+id/id_tab_discovery_img"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#00000000"
            android:clickable="false"
            android:src="@drawable/mainpage_tab_discovery_normal"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="发现"
            />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/id_tab_message"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical">

        <ImageButton
            android:id="@+id/id_tab_message_img"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#00000000"
            android:clickable="false"

            android:src="@drawable/mainpage_tab_message_normal"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="消息"
            />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/id_tab_setting"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical">

        <ImageButton
            android:id="@+id/id_tab_setting_img"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#00000000"
            android:clickable="false"
            android:src="@drawable/mainpage_tab_setting_normal"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="个人中心"
            />
    </LinearLayout>
</LinearLayout>

通过权重这里也可以使用RadioGroup来做这个底部

然后是MainActivity处理逻辑函数

package com.elvis.gachatest;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.ImageButton;
import android.widget.LinearLayout;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity implements View.OnClickListener {
    //定义控件
    private ViewPager mViewPager;
    private FragmentPagerAdapter mAdpter;
    private List<Fragment> mFragments = new ArrayList<>();

    //四个Tab每个Tab都有一个按钮
    private LinearLayout mTabMyCircle;
    private LinearLayout mTabMyDiscovery;
    private LinearLayout mTabMyMsg;
    private LinearLayout mTabMyCenter;
    //四个按钮
    private ImageButton myCircleImg;
    private ImageButton myDiscoveryImg;
    private ImageButton myMsgImg;
    private ImageButton myCenterImg;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        initViews();//初始化控件
        initEvent();//监听逻辑事件

        initViewPages();//初始化viewpager
    }

    private void initViews() {

        mViewPager = (ViewPager) findViewById(R.id.id_viewpager);
        //初始化四个布局
        mTabMyCircle = (LinearLayout) findViewById(R.id.id_tab_mycircle);
        mTabMyDiscovery = (LinearLayout) findViewById(R.id.id_tab_discovery);
        mTabMyMsg = (LinearLayout) findViewById(R.id.id_tab_message);
        mTabMyCenter = (LinearLayout) findViewById(R.id.id_tab_setting);
        //初始化四个按钮
        myCircleImg = (ImageButton) findViewById(R.id.id_tab_mycirlceImg);
        myDiscoveryImg = (ImageButton) findViewById(R.id.id_tab_discovery_img);
        myMsgImg = (ImageButton) findViewById(R.id.id_tab_message_img);
        myCenterImg = (ImageButton) findViewById(R.id.id_tab_setting_img);
    }

    private void initViewPages() {
        //初始化四个布局
        Fragment01 tab01 = new Fragment01();
        Fragment02 tab02 = new Fragment02();
        Fragment03 tab03 = new Fragment03();
        Fragment04 tab04 = new Fragment04();
        mFragments.add(tab01);
        mFragments.add(tab02);
        mFragments.add(tab03);
        mFragments.add(tab04);
        //初始化Adapter这里使用FragmentPagerAdapter
        mAdpter = new FragmentPagerAdapter(getSupportFragmentManager()) {
            @Override
            public Fragment getItem(int position) {

                return mFragments.get(position);
            }

            @Override
            public int getCount() {
                return mFragments.size();
            }

        };
        mViewPager.setAdapter(mAdpter);

    }

    private void initEvent() {
        //设置监听器
        myCircleImg.setOnClickListener(this);
        myDiscoveryImg.setOnClickListener(this);
        myMsgImg.setOnClickListener(this);
        myCenterImg.setOnClickListener(this);
        mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {
                //当viewPager滑动的时候
                int currentPage = mViewPager.getCurrentItem();
                switch (currentPage) {
                    case 0:
                        reSetImg();
                        myCircleImg.setImageResource(R.drawable.mainpage_tab_mycircle_selected);
                        break;
                    case 1:
                        reSetImg();
                        myDiscoveryImg.setImageResource(R.drawable.mainpage_tab_discovery_selected);
                        break;
                    case 2:
                        reSetImg();
                        myMsgImg.setImageResource(R.drawable.mainpage_tab_message_selected);
                        break;
                    case 3:
                        reSetImg();
                        myCenterImg.setImageResource(R.drawable.mainpage_tab_setting_selected);
                        break;
                    default:
                        break;
                }

            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });

    }

    private void reSetImg() {
        myCircleImg.setImageResource(R.drawable.mainpage_tab_mycircle_normal);
        myDiscoveryImg.setImageResource(R.drawable.mainpage_tab_discovery_normal);
        myMsgImg.setImageResource(R.drawable.mainpage_tab_message_normal);
        myCenterImg.setImageResource(R.drawable.mainpage_tab_setting_normal);

    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.id_tab_mycirlceImg:
                mViewPager.setCurrentItem(0);
                reSetImg();
                myCircleImg.setImageResource(R.drawable.mainpage_tab_mycircle_selected);
                break;
            case R.id.id_tab_discovery_img:
                mViewPager.setCurrentItem(1);
                reSetImg();
                myDiscoveryImg.setImageResource(R.drawable.mainpage_tab_discovery_selected);
                break;
            case R.id.id_tab_message_img:
                mViewPager.setCurrentItem(2);
                reSetImg();
                myMsgImg.setImageResource(R.drawable.mainpage_tab_message_selected);
                break;
            case R.id.id_tab_setting_img:
                mViewPager.setCurrentItem(3);
                reSetImg();
                myCenterImg.setImageResource(R.drawable.mainpage_tab_setting_selected);
                break;
            default:
                break;

        }

    }

}

这里要注意使用Fragment时统统使用V4包下的fragment，否则会出错

要是使用pageAdapter方式核心代码如下

 private void initViewPages() {
        //初始化四个布局
        LayoutInflater mLayoutInflater = LayoutInflater.from(this);
        View tab1 = mLayoutInflater.inflate(R.layout.tab01, null);
        View tab2 = mLayoutInflater.inflate(R.layout.tab02, null);
        View tab3 = mLayoutInflater.inflate(R.layout.tab03, null);
        View tab4 = mLayoutInflater.inflate(R.layout.tab04, null);
        //加入到list中
        mViews.add(tab1);
        mViews.add(tab2);
        mViews.add(tab3);
        mViews.add(tab4);

        //初始化ViewPager适配器
        mPagerAdapter = new PagerAdapter() {
            @Override
            public void destroyItem(ViewGroup container, int position, Object object) {
                //从container中删除指定position的View
                container.removeView(mViews.get(position));
            }

            @Override
            public Object instantiateItem(ViewGroup container, int position) {
                //将当前视图添加到View中
                View view = mViews.get(position);
                container.addView(view);
                //返回当前视图
                return view;
            }

            @Override
            public int getCount() {
                //返回要滑动的View个数
                return mViews.size();
            }

            @Override
            public boolean isViewFromObject(View view, Object object) {
                return view == object;
            }

        };
        //设置adapter
        mViewPager.setAdapter(mPagerAdapter);

    }

demo地址 http://download.csdn.net/detail/xsf50717/9259105