[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

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 227,250評論 6 530
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 97,923評論 3 413
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 175,041評論 0 373
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 62,475評論 1 308
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,253評論 6 405
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 54,801評論 1 321
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 42,882評論 3 440
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,023評論 0 285
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 48,530評論 1 331
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,494評論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,639評論 1 366
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,177評論 5 355
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 43,890評論 3 345
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,289評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,552評論 1 281
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,242評論 3 389
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 47,626評論 2 370

推薦閱讀更多精彩內容