[Digging] Android Translucent Status Bar 3

cover3

好吧，同一个话题的第三篇文章……坑有点多。

1号坑

前两篇文章讨论的是带有Header的CollapsingToolbarLayout，但是如果把Header移除，再添加TabLayout呢？

坑1.1

如果Toolbar的app:layout_collapseMode属性保持为pin，那么ToolBar将不会按照预期进行偏移：

tablayout_error01

4.4为什么没有问题？思考一下吧~（第一篇文章的内容哦）

这个问题其实是诸多原因导致的，我列在下面，同时后面标注了这个问题正确的处理方式，请对照源码阅读。

1. CTL的onMeasure没有考虑WindowInsets，所以CTL的高度变小（比期望值小-63）。（应该考虑WindowInsets）

2. CTL的内部类OffsetUpdateListener的方法onOffsetChanged在pin分支会对子View进行偏移（pin的实现就是根据ABL的偏移量同步改变子View的偏移量从而使子View“钉在”顶部的）。而此时，通过getMaxOffsetForPinChild方法获取到的Toolbar的最大偏移量的值，为-63（计算公式自己看源码吧，其实是问题1的副作用）。（getMaxOffsetForPinChild方法的返回值应该做边界检查，maxOffset不应为负值）

3. MathUtils.constrain(amount, low, high)方法（看参数名就知道什么意思了）的实现有bug：

   return amount < low ? low : (amount > high ? high : amount)
   

   当amount == low并且high < low时，amount将得到更小的high值。这个情景中：

   amount = 0, low = 0, high = -63，所以得到Toolbar的偏移量-63。

   第一篇文章中提到的CTL通过onLayout对Toolbar进行偏移，在这个情境中依然是生效的。onLayout之后，Toolbar的mTop值为63。

   偏移-63之后，Toolbar的mTop就变成了0，也就是上面截图看到的情况了。（constrain方法就是单纯的逻辑不严谨，没有做安全检查。）

在讨论如何解决之前，我们先看Toolbar的app:layout_collapseMode属性设置为none的情况，毕竟我们的目标是Toolbar向下偏移，让出状态栏的位置。（下面包含解决方法）

坑1.2

Toolbar的app:layout_collapseMode属性设置为none，按照预期向下偏移，但是被TabLayout盖住了。

tablayout_error02

这个问题和坑1.1的第一个原因一样，要看到CollapsingToolbarLayout的onMeasure方法：

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    ensureToolbar();
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}

其中并没有针对fitsSystemWindows属性做处理，也就是说虽然CTL会在onLayout方法里面对设置fitsSystemWindows属性的View正确偏移，但是CTL并没有留出充足的空间。

我的解决方法是继承CTL，覆写onMeasure方法并根据mLastInsets属性正确设置尺寸。

public class FitCollapsingToolbarLayout extends CollapsingToolbarLayout {

    Field mLastInsetsField;

    public FitCollapsingToolbarLayout(Context context) { this(context, null); }

    public FitCollapsingToolbarLayout(Context context, AttributeSet attrs) { this(context, attrs, 0); }

    public FitCollapsingToolbarLayout(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

        try {
            mLastInsetsField = CollapsingToolbarLayout.class.getDeclaredField("mLastInsets");
            mLastInsetsField.setAccessible(true);
        } catch (NoSuchFieldException e) {
            e.printStackTrace();
        }
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        if (mLastInsetsField != null) {
            try {
                WindowInsetsCompat insetsCompat = (WindowInsetsCompat) mLastInsetsField.get(this);
                if (insetsCompat != null && insetsCompat.getSystemWindowInsetTop() > 0) {
                    setMeasuredDimension(getMeasuredWidth(), getMeasuredHeight() + insetsCompat.getSystemWindowInsetTop());
                }
            } catch (IllegalAccessException e) {
                e.printStackTrace();
            }
        }
    }
}

因为无法直接获取到偏移量，所以用到了反射。

坑1.1的三个问题，其实只要解决一个，就能保证显示正常，我选择了简单并且侵入性较小的一个。另外两个bug，很难在黑盒外面解决。

tablayout_correct

解决完第一个坑，现在显示正确了，下面实现让Toolbar可以继续向上移出屏幕。

2号坑

为了上滑时Toolbar可以被移出屏幕，我们需要修改CTL的app:layout_scrollFlags属性，值为scroll|enterAlways|snap；同时为了让TabLayout留在屏幕内，我们需要将TabLayout提到AppBarLayout的直接子View的位置。

随后便引出了另外两个问题。

tablayout_error11

问题1

在v21以下系统中，Toolbar滑出屏幕之后，TabLayout会一直移动到最顶端，显然没有响应fitsSystemWindows属性。

解决方法是给ABL设置fitsSystemWindows属性（第一篇文章中的解决方案中，因为要显示Header，ABL的属性为false）。

这样在v21以下系统上就可以正常显示了。

问题2

还没有结束，因为状态栏是半透明的，所以Toolbar移出之后可以透过状态栏看见，显然我们并不想要这样的效果。

解决方式是给ABL添加监听器AppBarLayout.OnOffsetChangedListener，当偏移量变化的时候，将Toolbar完全移出屏幕。

// ...
mAppBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
    @Override
    public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
        if (verticalOffset <= -mToolbar.getHeight() && mToolbar.getTranslationY() == 0) {
            mToolbar.animate().translationY(/*-24dp*/).setDuration(100).start();
        } else if (verticalOffset > -mToolbar.getHeight() + mToolbar.getTop() && mToolbar.getTranslationY() == /*-24dp*/) {
            mToolbar.animate().translationY(0).setDuration(100).start();
        }
    }
});
// ...

/*-24dp*/表示24dp。

下图是最终效果。

tablayout_correct_all

Demo源码：Github