好吧,同一个话题的第三篇文章……坑有点多。
1号坑
前两篇文章讨论的是带有Header的CollapsingToolbarLayout,但是如果把Header移除,再添加TabLayout呢?
坑1.1
如果Toolbar的app:layout_collapseMode
属性保持为pin
,那么ToolBar将不会按照预期进行偏移:
4.4为什么没有问题?思考一下吧~(第一篇文章的内容哦)
这个问题其实是诸多原因导致的,我列在下面,同时后面标注了这个问题正确的处理方式,请对照源码阅读。
CTL的
onMeasure
没有考虑WindowInsets,所以CTL的高度变小(比期望值小-63)。(应该考虑WindowInsets)CTL的内部类
OffsetUpdateListener
的方法onOffsetChanged
在pin
分支会对子View进行偏移(pin的实现就是根据ABL的偏移量同步改变子View的偏移量从而使子View“钉在”顶部的)。而此时,通过getMaxOffsetForPinChild
方法获取到的Toolbar的最大偏移量的值,为-63(计算公式自己看源码吧,其实是问题1的副作用)。(getMaxOffsetForPinChild
方法的返回值应该做边界检查,maxOffset不应为负值)-
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盖住了。
这个问题和坑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,很难在黑盒外面解决。
解决完第一个坑,现在显示正确了,下面实现让Toolbar可以继续向上移出屏幕。
2号坑
为了上滑时Toolbar可以被移出屏幕,我们需要修改CTL的app:layout_scrollFlags
属性,值为scroll|enterAlways|snap
;同时为了让TabLayout留在屏幕内,我们需要将TabLayout提到AppBarLayout的直接子View的位置。
随后便引出了另外两个问题。
问题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。
下图是最终效果。
Demo源码:Github