Android自定义TabLayout无效

今天要实现这样的一个效果，下面的indicator是一个不规则的矩形，所以使用原生的TabLayout必须用定制的CustomView，在切换的时候动态更换CustomView的背景。

方法很简单，代码如下：

 val tabTitles = arrayOf("全部", "合格证", "发票", "打款凭证", "其他票据")
tabTitles.forEach {
            val tab = ui.tabLayout.newTab()
            tab.customView = createView(it)
            ui.tabLayout.addTab(tab)
     }
private fun createView(title: String): View {
        return TextView(mActivity).apply {
            text = title
            includeFontPadding = false
            gravity = Gravity.CENTER
            setPadding(dip(10), dip(5), dip(10), dip(5))
            textColor = mActivity.getColorKt(R.color.color_1F3F58)
            compoundDrawablePadding = mActivity.dip(3)
            textSize = 14f
        }
    }

本以为这样就搞定了，运行出来并不是我们想要的效果，给CustomView设置的效果没有效果，文字显示的默认的样式，点击tab还闪退了，这使我感到不解。经过排查发现我使用了 setupWithViewPager，当我们自定义TabLayout时，设置setupWithViewPager会删除所有TabLayout动态添加的View和设置的监听。简单的看下源码：

private void setupWithViewPager(
      @Nullable final ViewPager viewPager, boolean autoRefresh, boolean implicitSetup) {
  	//下面是移除我们自己设置的各种监听
    if (this.viewPager != null) {
      // If we've already been setup with a ViewPager, remove us from it
      if (pageChangeListener != null) {
        this.viewPager.removeOnPageChangeListener(pageChangeListener);
      }
      if (adapterChangeListener != null) {
        this.viewPager.removeOnAdapterChangeListener(adapterChangeListener);
      }
    }

    if (currentVpSelectedListener != null) {
      // If we already have a tab selected listener for the ViewPager, remove it
      removeOnTabSelectedListener(currentVpSelectedListener);
      currentVpSelectedListener = null;
    }

    if (viewPager != null) {
      this.viewPager = viewPager;

      // Add our custom OnPageChangeListener to the ViewPager
      if (pageChangeListener == null) {
        pageChangeListener = new TabLayoutOnPageChangeListener(this);
      }
      pageChangeListener.reset();
      viewPager.addOnPageChangeListener(pageChangeListener);

      // Now we'll add a tab selected listener to set ViewPager's current item
      currentVpSelectedListener = new ViewPagerOnTabSelectedListener(viewPager);
      addOnTabSelectedListener(currentVpSelectedListener);

      final PagerAdapter adapter = viewPager.getAdapter();
      if (adapter != null) {
        //移除所有的tab，根据我们传的adapter创建tab
        // Now we'll populate ourselves from the pager adapter, adding an observer if
        // autoRefresh is enabled
        setPagerAdapter(adapter, autoRefresh);
      }

      // Add a listener so that we're notified of any adapter changes
      if (adapterChangeListener == null) {
        adapterChangeListener = new AdapterChangeListener();
      }
     	...
    } else {
      // We've been given a null ViewPager so we need to clear out the internal state,
      // listeners and observers
      this.viewPager = null;
      setPagerAdapter(null, false);
    }
  }

void setPagerAdapter(@Nullable final PagerAdapter adapter, final boolean addObserver) {
   ...
    // Finally make sure we reflect the new adapter
    populateFromPagerAdapter();
  }

void populateFromPagerAdapter() {
  	//移除所有的Tab
    removeAllTabs();

    if (pagerAdapter != null) {
      final int adapterCount = pagerAdapter.getCount();
      for (int i = 0; i < adapterCount; i++) {
        addTab(newTab().setText(pagerAdapter.getPageTitle(i)), false);
      }

      // Make sure we reflect the currently set ViewPager item
      if (viewPager != null && adapterCount > 0) {
        final int curItem = viewPager.getCurrentItem();
        if (curItem != getSelectedTabPosition() && curItem < getTabCount()) {
          selectTab(getTabAt(curItem));
        }
      }
    }
  }

我们发现如果要自定义CustomView就不能使用setupWithViewPager和ViewPager进行关联，那还有没有其他的方法可以进行关联呢，答案是有的，方法如下：

//使用TabLayout中的一个静态内部类TabLayoutOnPageChangeListener监听ViewPager切换，传入tabLayout
ui.viewPager.addOnPageChangeListener(object : TabLayout.TabLayoutOnPageChangeListener(ui.tabLayout) {})
//监听TabLayout切换，当Tab被选中切换ViewPager
ui.tabLayout.addOnTabSelectedListener(object : TabLayout.OnTabSelectedListener {
            override fun onTabSelected(tab: TabLayout.Tab) {
                ui.viewPager.currentItem = tab.position
            }

            override fun onTabUnselected(tab: TabLayout.Tab) {
              
            }

            override fun onTabReselected(tab: TabLayout.Tab) {

            }
        })