ViewPager 嵌套ViewPager来搭建首页

我们平时在搭建项目的主页的时候，经常会使用Fragment+FragmentPagerAdapter来搭建，然后通过继承FragmentActivity来实现，但是有时候我们可能遇到首页可能是一个滑动的页面，然后每个页面中有需要嵌套多个页面，而且更变态的时候嵌套的页面中还需要滑动，这个时候我们想是不是可以使用ViewPager嵌套ViewPager呢？ 但是实践之后我们发现ViewPager嵌套ViewPager的话，会导致嵌套的ViewPager里面的子布局是不能进行滑动的，只能滑动外面的ViewPager的，这个时候就应该要思考是不是要重写外面的ViewPager来改变里面的交点滑动问题。 其实要解决上面的这个焦点滑动的问题很简单，我们只需要重写父类的ViewPager的canScroll()方法，然后在方法中做一些手脚就可以了。具体解决如下：

1、首先重写嵌套的ViewPager( 也就是内部的ViewPager )，然后重新ViewPager的 canScroll()方法。详细代码如下：

public class ParentViewPager extends ViewPager
{
     public ParentViewPager(Context context, AttributeSet attrs)  {
      super(context, attrs);
     }

     //该函数用于控制是子View滑动还是父类进行滑动，false表示是子类滑动
     protected boolean canScroll(View v, boolean checkV, int dx, int x, int y)  {
       if(v != this && v instanceof ViewPager) {
           //获取嵌套的子View，然后强制转换为ViewPager。
           ViewPager childViewPager = ((ViewPager)v);
           //这里别的需要说明就是判断子ViewPager的adapter是否为空，如果为空的话， 下面会报空指针
           if(childViewPager.getAdapter() == null) return true;
           int currentItem = childViewPager.getCurrentItem();
           int countItem = childViewPager.getAdapter().getCount();
           //这里进行判断当父类滑倒第一个或者是最后一个的时候，就不滑动了， 
           //这个时候就禁止父ViewPager     滑动，让子ViewPager进行滑动
           if((currentItem == (countItem - 1) && dx < 0) || (currentItem == 0 && dx > 0)) {
                return false;
           }
                return true;
          }
       return super.canScroll(v, checkV, dx, x, y);
     }
}

2、activity_main.xml 首页布局文件 如下：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

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

    <View 
        android:layout_width="fill_parent"
        android:layout_height="0.5dip"
        android:background="#e5e5e5"
        />

    <LinearLayout
        android:id="@+id/main_footer"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_vertical"
        android:orientation="horizontal" >

        <LinearLayout
            android:id="@+id/tab0"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center_horizontal"
            android:orientation="vertical"
            android:paddingBottom="3dp"
            android:paddingLeft="20dp"
            android:paddingRight="20dp"
            android:paddingTop="5dp" >

            <FrameLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content" >

                <ImageView
                    android:id="@+id/iv_message_press"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:src="@drawable/message_press" />

                <ImageView
                    android:id="@+id/iv_message_normal"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:alpha="0"
                    android:src="@drawable/message_normal" />
            </FrameLayout>

            <TextView
                android:id="@+id/tv_message"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:text="消息"
                android:textColor="#999999"
                android:textSize="12sp" />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/tab1"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center_horizontal"
            android:orientation="vertical"
            android:paddingBottom="3dp"
            android:paddingLeft="20dp"
            android:paddingRight="20dp"
            android:paddingTop="5dp" >

            <FrameLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content" >

                <ImageView
                    android:id="@+id/iv_contact_press"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:alpha="0"
                    android:src="@drawable/contact_press" />

                <ImageView
                    android:id="@+id/iv_contact_normal"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:src="@drawable/contact_normal"
                    android:visibility="visible" />
            </FrameLayout>

            <TextView
                android:id="@+id/tv_contact"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:text="通讯录"
                android:textColor="#999999"
                android:textSize="12sp" />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/tab2"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center_horizontal"
            android:orientation="vertical"
            android:paddingBottom="3dp"
            android:paddingLeft="20dp"
            android:paddingRight="20dp"
            android:paddingTop="5dp" >

            <FrameLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content" >

                <ImageView
                    android:id="@+id/iv_discovery_press"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:alpha="0"
                    android:src="@drawable/discovery_press" />

                <ImageView
                    android:id="@+id/iv_discovery_normal"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:src="@drawable/discovery_normal"
                    android:visibility="visible" />
            </FrameLayout>

            <TextView
                android:id="@+id/tv_discovery"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:text="发现"
                android:textColor="#999999"
                android:textSize="12sp" />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/tab3"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center_horizontal"
            android:orientation="vertical"
            android:paddingBottom="3dp"
            android:paddingLeft="20dp"
            android:paddingRight="20dp"
            android:paddingTop="5dp" >

            <FrameLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content" >

                <ImageView
                    android:id="@+id/iv_mine_press"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:alpha="0"
                    android:src="@drawable/mine_press" />

                <ImageView
                    android:id="@+id/iv_mine_normal"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:src="@drawable/mine_normal"
                    android:visibility="visible" />
            </FrameLayout>

            <TextView
                android:id="@+id/tv_mine"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:text="我的"
                android:textColor="#999999"
                android:textSize="12sp" />
        </LinearLayout>
    </LinearLayout>

</LinearLayout>

3、接下来就是被嵌套的ViewPager布局文件(fragment_children.xml)，我们把我们刚才重写的子ViewPager作为自定义View加入到我们的xml 文件中。

<LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent" 
    >

    <com.luooh.wxtab.SimpleViewPagerIndicator
        android:id="@+id/spi_indicator"
        android:layout_width="fill_parent"
        android:layout_height="50dip"
        android:background="#ffffff" 
        />

    <com.luooh.wxtab.ParentViewPager
        android:id="@+id/vp_indicator"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        />

</LinearLayout>

4、其他的地方就跟我们平时搭建首页的方式没有什么两样了，首先是通过ViewPager+FragmentActivity 来管理Fragment，同时Fragment里面又嵌套一个ViewPager（多页面滑动），也就是我们刚才所说的ViewPager嵌套ViewPager的方法，下面我们就来看看最后实现出来的效果：

5、最后的最后附上下载源代码：
https://github.com/ACMNexus/NestViewPager