[Android开发] Fragment的子Fragment+TabLayout+ViewPager 的使用

Fragment的子Fragment+TabLayout+ViewPager 的使用

1 思路分析

本次项目中的设想的页面布局如下。可以看出，底部导航栏实现发现页面、发布页面、个人页面三个页面的切换，而对于发现页面则仍分为两栏，跑跑页面和点点页面。：

在具体实现中，一般会使用 Fragment+Viewpager 将发现、发布、个人三个页面作为主 Activtity 的三个 Fragment。如果要实现从子Fragment到同一父级Fragment的无缝滑动效果（即从发现-点点页面到发布页面效果），还要使用 TabLayout+ViewPager+Fragment。

本博客介绍在 Fragment 的子 Fragment 中使用 TabLayout+ViewPager 的方法。

2 具体实现

2.1 Activity 中 Fragment+ViewPager 的使用

首先来介绍一下在 Activity 中如何使用 Fragment+ViewPager。

布局文件如下。主要是为 Activity 添加一个 ViewPager：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".ui.activity.HomeActivity">

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

</LinearLayout>

Activity 要实现 ViewPager.OnPageChangeListener：

public class HomeActivity extends AppCompatActivity implements ViewPager.OnPageChangeListener{

}

初始化 Viewpager：

• 初始化 Fragment 页面

• 为 Viewpager 添加 addOnPageChangeListener监听器

• 为 Viewpager 设置 Adapter，其中要实现 getItem()方法，用以获取相应的 Fragment

ViewPager viewPager;

private HomeFragment homeFragment = new HomeFragment();
private SpaceFragment spaceFragment = new SpaceFragment();
private PublishFragment publishFragment = new PublishFragment();

private void initViewPager() {
    viewPager.addOnPageChangeListener(this);
    viewPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {
        @Override
        public Fragment getItem(int i) {
            switch (i) {
                case 0:
                    return homeFragment;
                case 1:
                    return publishFragment;
                case 2:
                    return spaceFragment;
            }
            return null;
        }

        @Override
        public int getCount() {
            return 3;
        }
    });
}

重写 onPageScrolled、onPageSelected、onPageScrollStateChanged三个方法：

    @Override
    public void onPageScrolled(int i, float v, int i1) {

    }

    @Override
    public void onPageSelected(int i) {
        bnve.getMenu().getItem(i).setChecked(true);
    }

    @Override
    public void onPageScrollStateChanged(int i) {

    }

2.2 Fragment 中子Fragment+TabLayout+ViewPager的使用

Fragment 中还有 Fragment 的情况下， TabLayout+ViewPager 要怎样使用呢？

2.2.1 为子Fragment 添加 Viewpager

首先为父 Fragment 编写xml 文件，添加 TabLayout组件和 ViewPager：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  android:background="@color/white"
  tools:context=".ui.fragment.HomeFragment">

  <android.support.design.widget.TabLayout
    android:id="@+id/tabs"
    android:layout_width="match_parent"
    android:layout_height="44dp"
    android:layout_marginTop="26dp"
    android:layout_marginRight="242dp"
    android:layout_gravity="top"
    app:tabIndicatorColor="#597EF7"
    app:tabSelectedTextColor="#303233"
    app:tabTextColor="#A2A2A2"
    app:tabIndicatorHeight="0dp"
    app:tabBackground="@drawable/tab_selector"
    app:tabRippleColor="@android:color/transparent"
    app:tabGravity="center">

    <!--<android.support.design.widget.TabItem-->
      <!--android:layout_width="wrap_content"-->
      <!--android:layout_height="wrap_content"-->
      <!--android:text="跑跑"/>-->

    <!--<android.support.design.widget.TabItem-->
      <!--android:layout_width="wrap_content"-->
      <!--android:layout_height="wrap_content"-->
      <!--android:text="点点"/>-->

  </android.support.design.widget.TabLayout>

  <View
    android:layout_width="match_parent"
    android:layout_height="1dp"
    android:layout_marginTop="70dp"
    android:background="#E1E1E1" />

  <android.support.v4.view.ViewPager
    android:id="@+id/fragment_home_viewpager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginTop="71dp" />

</FrameLayout>

一般父 Fragment 都会继承自自定义的 BaseFragment类：

public class HomeFragment extends BaseFragment {
    
}

然后依旧是初始化 Viewpager，基本与在Activity中实现的相同。要注意的是，在 Fragment 中，就不能使用 getSupportFragmentManager() 方法了，而需要使用 getChildFragmentManager() 方法，否则是获取不到子Fragment 的！

2.2.2 Tablayout+Viewpager 的联动

Android 设计者已经为我们提供了简洁的方法。当我们已经为 Viewpager 添加了事件之后，使用：

    tabLayout.setupWithViewPager(viewPager);

即可将 TabLayout 绑定到 Viewpager 上了，十分方便。

实际上，我们这种策略是将 TabLayout 绑定到 Viewpager，TabLayout 会伴随着 Viewpager 滑动，那么我们可能会想，可不可以将Viewpager 绑定到 TabLayout 上，使 Viewpager 会伴随着 TabLayout 滑动呢？当然可以！在这篇博客中，作者就介绍了这样的方法，有兴趣可以参考。

2.2.3 Fragment 懒加载

参考这篇博客

2.3 效果