探秘FragmentStateAdapter：当Fragment碰上ViewPager2

ViewPager2

---

2019初Google发布了ViewPager2预览版，并在同年I/O上推出正式版。只要你已经从Suppor库切换到AndroidX，便可以使用ViewPager2完全取代旧的ViewPager。

ViewPager2最显著的特点是基于RecyclerView实现，RecyclerView是目前Android端最成熟的AdapterView解决方案，这带来很多好处：

• 抛弃传统的PagerAdapter，统一了Adapter的API
• 通过LinearLayoutManager可以实现类似抖音的纵向滑动
• 支持DiffUitl，可以通过diff实现局部刷新
• 支持RTL（right-to-left）布局，对于一些有出海需求的APP非常有用
• 支持ItemDecorator

ViewPager2 + Fragment

---

跟ViewPager一样，除了View以外，ViewPager2更多的使用Fragment，这需要借助FragmentStateAdapter的协助：

Type	Adapter
ViewPager	FragmentStatePagerAdapter、PagerAdapter
ViewPager2	FragmentStateAdapter

gradle

 implementation 'androidx.viewpager2:viewpager2:1.0.0'

xml

<androidx.viewpager2.widget.ViewPager2
  android:id="@+id/doppelgangerViewPager"
  android:layout_width="match_parent"
  android:layout_height="match_parent" />

FragmentStateAdapter

import androidx.appcompat.app.AppCompatActivity
import androidx.fragment.app.Fragment
import androidx.viewpager2.adapter.FragmentStateAdapter

class DoppelgangerAdapter(activity: AppCompatActivity, val itemsCount: Int) :
    FragmentStateAdapter(activity) {
    
    

  override fun getItemCount(): Int {
    
    
    return itemsCount
  }

  override fun createFragment(position: Int): Fragment {
    
    
    return DoppelgangerFragment.getInstance(position)
  }
}

API使用起来跟旧的adapter很相似：

• getItemCount：返回Item的数量
• createFragment：用来根据position创建fragment
• DoppelgangerFragment：是实例中创建的Fragment类型

MainActivity

在Activity中为ViewPager2设置Adapter：

val doppelgangerAdapter = DoppelgangerAdapter(this, doppelgangerNamesArray.size) 
doppelgangerViewPager.adapter = doppelgangerAdapter

doppelgangerViewPager是通过kotlin-android-extension获取的ViewPager2控件

揭秘FragmentStateAdapter

---

因为ViewPager2继承自RecyclerView，因此可以推断出FragmentStateAdapter继承自RecyclerView.Adapter：

public abstract class FragmentStateAdapter extends 
  RecyclerView.Adapter<FragmentViewHolder> implements StatefulAdapter {
    
    
}

虽然是overide的关系，但两者的API却不一致，RecyclerView.Adapter关注的是ViewHolder的复用，但是在FragmentStateAdapter中的Framgent是不会复用的，即有多少个item就应该创建多少个Fragment，那么这其中是如何转换的呢？

我们来探究一下这个override是如何实现的：

onCreateViewHolder

通过FragmentStateAdapter声明中的泛型可以知道，ViewPager2之所以能够在RecyclerView的基础上能对外屏蔽对ViewHolder的使用，其内部是借助FragmentViewHolder实现的。
onCreateViewHolder中会创建一个FragmentViewHolder：

@NonNull
@Override
public final FragmentViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
    
    
  return FragmentViewHolder.create(parent);
}

FragmentViewHolder的主要作用是通过FrameLayout，为Fragment提供展示用的container：

@NonNull static FragmentViewHolder create(@NonNull ViewGroup parent) {
    
    
  FrameLayout container = new FrameLayout(parent.getContext());
  container.setLayoutParams(
    new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,
      ViewGroup.LayoutParams.MATCH_PARENT));
  container.setId(ViewCompat.generateViewId());
  container.setSaveEnabled(false);
  return new FragmentViewHolder(container);
}

onBindViewHolder

@Override
public final void onBindViewHolder(final @NonNull FragmentViewHolder holder, int position) {
    
    
  ...
  ensureFragment(position);
  ...
  gcFragments();
}

ensureFragment(position)，内部会最终回调到createFragment用来创建当前Fragment

   private void ensureFragment(int position) {
    
    
        long itemId = getItemId(position);
        if (!mFragments.containsKey(itemId)) {
    
    
            // TODO(133419201): check if a Fragment provided here is a new Fragment
            Fragment newFragment = createFragment(position);
            newFragment.setInitialSavedState(mSavedStates.get(itemId));
            mFragments.put(itemId, newFragment);
        }
    }

gcFragments，回收已经不再item集合中的Fragment，节省内存开销

placeFragmentInViewHolder

  @Override
    public final void onViewAttachedToWindow(@NonNull final FragmentViewHolder holder) {
    
    
        placeFragmentInViewHolder(holder);
        gcFragments();
    }

onViewAttachToWindow的时候调用placeFragmentInViewHolder，将FragmentViewHolder的container与当前Fragment绑定

    void placeFragmentInViewHolder(@NonNull final FragmentViewHolder holder) {
    
    
        Fragment fragment = mFragments.get(holder.getItemId());
        if (fragment == null) {
    
    
            throw new IllegalStateException("Design assumption violated.");
        }
        FrameLayout container = holder.getContainer();
        View view = fragment.getView();

		...
        if (fragment.isAdded() && view.getParent() != null) {
    
    
            if (view.getParent() != container) {
    
    
                addViewToContainer(view, container);
            }
            return;
        }
		...
    }

   void addViewToContainer(@NonNull View v, @NonNull FrameLayout container) {
    
    
        ...

        if (container.getChildCount() > 0) {
    
    
            container.removeAllViews();
        }

        if (v.getParent() != null) {
    
    
            ((ViewGroup) v.getParent()).removeView(v);
        }

        container.addView(v);
    }

通过上面源码分析可以知道，虽然Fragment没有被复用，但是通过复用了ViewHolder的container实现了Framgent的交替显示

OnPageChangeCallback

---

监听页面滑动是一个常见需求，ViewPager2的使用方式也不同

Type	Adapter
ViewPager	OnPageChangeListener
ViewPager2	OnPageChangeCallback

使用效果如下：

var doppelgangerPageChangeCallback = object : ViewPager2.OnPageChangeCallback() {
    
    
  override fun onPageSelected(position: Int) {
    
    
    Toast.makeText(this@MainActivity, "Selected position: ${
      
      position}", 
      Toast.LENGTH_SHORT).show()
  }
}

OnPageChangeCallback同样也有三个方法:

• onPageScrolled: 当前页面开始滑动时
• onPageSelected: 当页面被选中时
• onPageScrollStateChanged: 当前页面滑动状态变动时
  
  
  

纵向滑动

---

设置纵向滑动很简单，一行代码搞定

doppelgangerViewPager.orientation = ViewPager2.ORIENTATION_VERTICAL

源码也很简单

/**
* Sets the orientation of the ViewPager2.
*
* @param orientation {@link #ORIENTATION_HORIZONTAL} or {@link #ORIENTATION_VERTICAL}
*/
public void setOrientation(@Orientation int orientation) {
    
    
  mLayoutManager.setOrientation(orientation);
  mAccessibilityProvider.onSetOrientation();
}

TabLayout

---

配合TabLayout的使用也是一个常见需求，TabLayout需要引入material库

implementation 'com.google.android.material:material:1.2.0-alpha04'

然后在xml中声明

<com.google.android.material.tabs.TabLayout
  android:id="@+id/tabLayout"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:background="@color/colorPrimary"
  app:tabMode="scrollable"
  app:tabTextColor="@android:color/white" />

TabsLayoutMediator

要关联TabLayout和ViewPager2需要借助TabLayoutMediator：

public TabLayoutMediator(
  @NonNull TabLayout tabLayout,
  @NonNull ViewPager2 viewPager,
  @NonNull TabConfigurationStrategy tabConfigurationStrategy) {
    
    
  this(tabLayout, viewPager, true, tabConfigurationStrategy);
}

其中，TabConfigurationStrategy定义如下：根据position配置当前tab

/**
* A callback interface that must be implemented to set the text and styling of newly created
* tabs.
*/
public interface TabConfigurationStrategy {
    
    
  /**
   * Called to configure the tab for the page at the specified position. Typically calls {@link
   * TabLayout.Tab#setText(CharSequence)}, but any form of styling can be applied.
   *
   * @param tab The Tab which should be configured to represent the title of the item at the given
   *     position in the data set.
   * @param position The position of the item within the adapter's data set.
   */
  void onConfigureTab(@NonNull TabLayout.Tab tab, int position);
}

在MainActivity中具体使用如下：

TabLayoutMediator(tabLayout, doppelgangerViewPager) {
    
     tab, position ->
  //To get the first name of doppelganger celebrities
  tab.text = doppelgangerNamesArray[position].split(" ")[0]
}.attach()

attach方法很关键，经过前面一系列配置后最终需要通过它关联两个组件。

加入TabLayout后的最终效果如下：

最后

---

本文主要介绍了Fragment搭配ViewPager2的使用方法以及FragmentStateAdapter的实现原理，顺便介绍了一下TabLayout、OnPageChangeCallback等常见需求。ViewPager2的使用非常简单，在性能以及使用体验等各方面都要优于传统的ViewPager，没尝试的小伙伴抓紧用起来吧~