[Digging] Android Translucent Status Bar 3

cover3
cover3

好吧,同一個(gè)話題的第三篇文章……坑有點(diǎn)多。

1號(hào)坑

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

坑1.1

如果Toolbar的app:layout_collapseMode屬性保持為pin,那么ToolBar將不會(huì)按照預(yù)期進(jìn)行偏移:

tablayout_error01
tablayout_error01

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

這個(gè)問題其實(shí)是諸多原因?qū)е碌?,我列在下面,同時(shí)后面標(biāo)注了這個(gè)問題正確的處理方式,請(qǐng)對(duì)照源碼閱讀。

  1. CTL的onMeasure沒有考慮WindowInsets,所以CTL的高度變?。ū绕谕敌?63)。(應(yīng)該考慮WindowInsets)

  2. CTL的內(nèi)部類OffsetUpdateListener的方法onOffsetChangedpin分支會(huì)對(duì)子View進(jìn)行偏移(pin的實(shí)現(xiàn)就是根據(jù)ABL的偏移量同步改變子View的偏移量從而使子View“釘在”頂部的)。而此時(shí),通過getMaxOffsetForPinChild方法獲取到的Toolbar的最大偏移量的值,為-63(計(jì)算公式自己看源碼吧,其實(shí)是問題1的副作用)。getMaxOffsetForPinChild方法的返回值應(yīng)該做邊界檢查,maxOffset不應(yīng)為負(fù)值)

  3. MathUtils.constrain(amount, low, high)方法(看參數(shù)名就知道什么意思了)的實(shí)現(xiàn)有bug:

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

    當(dāng)amount == low并且high < low時(shí),amount將得到更小的high值。這個(gè)情景中:

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

    第一篇文章中提到的CTL通過onLayout對(duì)Toolbar進(jìn)行偏移,在這個(gè)情境中依然是生效的。onLayout之后,Toolbar的mTop值為63。

    偏移-63之后,Toolbar的mTop就變成了0,也就是上面截圖看到的情況了。(constrain方法就是單純的邏輯不嚴(yán)謹(jǐn),沒有做安全檢查。)

在討論如何解決之前,我們先看Toolbar的app:layout_collapseMode屬性設(shè)置為none的情況,畢竟我們的目標(biāo)是Toolbar向下偏移,讓出狀態(tài)欄的位置。(下面包含解決方法)

坑1.2

Toolbar的app:layout_collapseMode屬性設(shè)置為none,按照預(yù)期向下偏移,但是被TabLayout蓋住了。

tablayout_error02
tablayout_error02

這個(gè)問題和坑1.1的第一個(gè)原因一樣,要看到CollapsingToolbarLayout的onMeasure方法:

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

其中并沒有針對(duì)fitsSystemWindows屬性做處理,也就是說雖然CTL會(huì)在onLayout方法里面對(duì)設(shè)置fitsSystemWindows屬性的View正確偏移,但是CTL并沒有留出充足的空間。

我的解決方法是繼承CTL,覆寫onMeasure方法并根據(jù)mLastInsets屬性正確設(shè)置尺寸。

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();
            }
        }
    }
}

因?yàn)闊o法直接獲取到偏移量,所以用到了反射。

坑1.1的三個(gè)問題,其實(shí)只要解決一個(gè),就能保證顯示正常,我選擇了簡(jiǎn)單并且侵入性較小的一個(gè)。另外兩個(gè)bug,很難在黑盒外面解決。

tablayout_correct
tablayout_correct

解決完第一個(gè)坑,現(xiàn)在顯示正確了,下面實(shí)現(xiàn)讓Toolbar可以繼續(xù)向上移出屏幕。

2號(hào)坑

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

隨后便引出了另外兩個(gè)問題。

tablayout_error11
tablayout_error11

問題1

在v21以下系統(tǒng)中,Toolbar滑出屏幕之后,TabLayout會(huì)一直移動(dòng)到最頂端,顯然沒有響應(yīng)fitsSystemWindows屬性。

解決方法是給ABL設(shè)置fitsSystemWindows屬性(第一篇文章中的解決方案中,因?yàn)橐@示Header,ABL的屬性為false)。

這樣在v21以下系統(tǒng)上就可以正常顯示了。

問題2

還沒有結(jié)束,因?yàn)闋顟B(tài)欄是半透明的,所以Toolbar移出之后可以透過狀態(tài)欄看見,顯然我們并不想要這樣的效果。

解決方式是給ABL添加監(jiān)聽器AppBarLayout.OnOffsetChangedListener,當(dāng)偏移量變化的時(shí)候,將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

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容