1. 程式人生 > >Android沈浸式狀態欄 + scrollView頂部伸縮 + actionBar漸變

Android沈浸式狀態欄 + scrollView頂部伸縮 + actionBar漸變

尺寸 android開發 頂部 系統 strip 還要 activit andro 顯示

最近需求要做一個拉縮漸變的狀態欄,往上拉的時候,需要顯示actionBar,這個過程是漸變的,頂部的圖片背景能實現拉縮,並且還要實現狀態欄沈浸式

效果如如下:

技術分享圖片

  • 實現狀態欄的透明化
  • 實現ScrollView的拉縮
  • 實現ActionBar的漸變

實現

1、至於試下實現ScrollView的拉縮這個效果很簡單重寫onTouchEvent方法,利用滑動的垂直方向的距離,然後在設置圖片的大小
技術分享圖片

這裏要註意的是:在手指釋放的時候需要進行恢復圖片的高度
如果有興趣的話可以加入Android工程師交流Q群:752016839 主要針對Android開發人員提升自己,突破瓶頸,相信你來學習,會有提升和收獲。在這個群裏會有你所需要的內容。

2、ActionBar的透明度很簡單了,在onScrollChanged裏進行操作即可
技術分享圖片

3、至於沈浸式狀態欄就很簡單了,之前寫過帖子

  • 你這樣玩過android沈浸式狀態欄嗎—教你玩出新花樣?

  • Activity樣式 、狀態欄透明、屏幕亮度問題全面解析

這裏我簡單的封裝了一些工具類
技術分享圖片

在相應的Activity或基類執行這段代碼就ok了。

可見在4.4到5.0的系統、5.0及以上系統的處理方式有所不同

除了這種代碼修改額方式外,還可以通過主題來修改,需要在values、values-v19、values-v21目錄下分別創建相應的主題:
技術分享圖片

給相應Activity或Application設置該主題就ok了。

兩種方式根據需求選擇就好了,到這裏我們就完成了第一步,將狀態欄透明化了。

完成了第一步,我們開始給狀態欄加上想要的色彩吧!

在values、values-v19目錄添加如下尺寸:
技術分享圖片

關於25dp,在有些系統上可能有誤差,這裏不做討論!

2.1 頁面頂部使用Toolbar(或自定義title) 一般情況狀態欄的顏色和Toolbar的顏色相同,既然狀態欄透明化後,布局頁面延伸到了狀態欄,何不給Toolbar加上一個狀態欄高度的頂部padding呢:
技術分享圖片

效果圖下:

技術分享圖片
技術分享圖片

Android沈浸式狀態欄 + scrollView頂部伸縮 + actionBar漸變