
好吧,同一個話題的第三篇文章……坑有點多。
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