[Digging] Android Translucent Status Bar 3

cover3
cover3

好吧,同一個話題的第三篇文章……坑有點多。

1號坑

前兩篇文章討論的是帶有Header的CollapsingToolbarLayout,但是如果把Header移除,再添加TabLayout呢?

坑1.1

如果Toolbar的app:layout_collapseMode屬性保持為pin,那么ToolBar將不會按照預期進行偏移:

tablayout_error01
tablayout_error01

4.4為什么沒有問題?思考一下吧~(第一篇文章的內容哦)

這個問題其實是諸多原因導致的,我列在下面,同時后面標注了這個問題正確的處理方式,請對照源碼閱讀。

  1. CTL的onMeasure沒有考慮WindowInsets,所以CTL的高度變小(比期望值小-63)。(應該考慮WindowInsets)

  2. CTL的內部類OffsetUpdateListener的方法onOffsetChangedpin分支會對子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
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
tablayout_correct

解決完第一個坑,現在顯示正確了,下面實現讓Toolbar可以繼續向上移出屏幕。

2號坑

為了上滑時Toolbar可以被移出屏幕,我們需要修改CTL的app:layout_scrollFlags屬性,值為scroll|enterAlways|snap;同時為了讓TabLayout留在屏幕內,我們需要將TabLayout提到AppBarLayout的直接子View的位置。

隨后便引出了另外兩個問題。

tablayout_error11
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
tablayout_correct_all

Demo源碼:Github

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容