探秘FragmentStateAdapter：当Fragment碰上ViewPager2

左手的ㄟ右手 2022-12-29 04:33 395阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpdGF2aXZh_size_16_color_FFFFFF_t_70]

# 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`：

<table> 
 <thead> 
  <tr> 
   <th align="left">View</th> 
   <th align="left">Adapter</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">ViewPager</td> 
   <td align="left">FragmentStatePagerAdapter、PagerAdapter</td> 
  </tr> 
  <tr> 
   <td align="left">ViewPager2</td> 
   <td align="left">FragmentStateAdapter</td> 
  </tr> 
 </tbody> 
</table>

## 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控件

![在这里插入图片描述][20201219211921125.gif_pic_left]

# 揭秘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的使用方式也不同

<table> 
 <thead> 
  <tr> 
   <th align="left">View</th> 
   <th align="left">Callback</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">ViewPager</td> 
   <td align="left">OnPageChangeListener</td> 
  </tr> 
  <tr> 
   <td align="left">ViewPager2</td> 
   <td align="left">OnPageChangeCallback</td> 
  </tr> 
 </tbody> 
</table>

使用效果如下：

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`: 当前页面滑动状态变动时  
    ![在这里插入图片描述][2020121922050427.gif_pic_left]

# 纵向滑动 #

--------------------

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

doppelgangerViewPager.orientation = ViewPager2.ORIENTATION_VERTICAL

![在这里插入图片描述][20201219220645229.gif_pic_left]  
源码也很简单

/** * 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后的最终效果如下：  
![在这里插入图片描述][20201219221523643.gif_pic_left]

# 最后 #

--------------------

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpdGF2aXZh_size_16_color_FFFFFF_t_70]: /images/20221120/bd46bd78af7b4e2994499f9d390713f6.png
[20201219211921125.gif_pic_left]: /images/20221120/198db0e3f66c4a5596db6f9d8ee9cbda.png
[2020121922050427.gif_pic_left]: /images/20221120/109918fc47e44be89afc06a0a7fca234.png
[20201219220645229.gif_pic_left]: /images/20221120/532574ee0cd74fcfb0b0eda2e5574f2e.png
[20201219221523643.gif_pic_left]: /images/20221120/525be642c9e54605a6265413535079d4.png