摘要:抽時間寫了個,你想要的都在這里了。你可以狠狠的點擊下面的鏈接去往倉庫地址,一探究竟。你可以直接下來,直接運行。
ionic2實現透明狀態欄和透明工具欄
目錄
如何實現?
集成DEMO(2017/4/1更新)
簡短的分析
一個額外的小栗子
我想讓狀態欄變色怎么辦?
為什么這么做?
總結
以下是我的方案,不繞彎子,直接上實現過程.
首先貼效果圖,來張gif(2017/4/1更新)
第一步: 在MainActivity.java 中的super.onCreate() 函數后添加如下代碼:
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) { getWindow().getDecorView().setSystemUiVisibility( View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN | View.SYSTEM_UI_FLAG_LAYOUT_STABLE); }
不要忘了在MainActivity.java 中導入依賴包:
import android.os.Build; import android.view.View;
第二步:在項目根目錄的config.xml文件中添加下面配置,這里需要注意
顏色的設置至關重要,此處是八位hex color,前兩位是透明度,后六位是rgb顏色值.so根據自己的需要配置.
第三步: 在app.scss中添加樣式
.platform-android { ion-header { padding-top: $cordova-md-statusbar-padding; background-color: color($colors, primary); } }
ok!你現在有一個透明的狀態欄了.
集成DEMO(2017/4/1更新)
還是有點麻煩,我按照你的方法怎么都實現不了,能不能來點刺激的...
ok!你的要求我盡量滿足。
抽時間寫了個DEMO,你想要的都在這里了。你可以狠狠的點擊下面的鏈接去往倉庫地址,一探究竟。你可以直接clone下來,直接運行。
項目地址:ionic2-super-bar https://github.com/jeneser/io...
簡短的分析第一步,將視口設置全屏將狀態欄固定在視圖之上,第二步,配置狀態欄顏色,這一步有一個概念需要清楚,hex color是能定義透明度的,我們平常所見的類似#ffffff是六位的RGB顏色,這里在前面再加兩位便是能定義透明度的ARGB,也就是RGB色彩模式附加上Alpha(透明度)通道.所以可以根據自己的需要進行設置.第三步,由于我們將視口擴大至了整個屏幕,自然我們的頁面會被覆蓋在狀態欄下面,我的做法是給ion-header加一個內邊距,并且指定一個背景顏色,當然這里你可以自由發揮,你只要記著現在你寫的頁面已經在透明的狀態欄下面了,你要做的就是讓頁面下移狀態欄的高度,騰出位置避免覆蓋.
此時,你可能已經意識到,這個方案是比較靈活的,你可以自由的控制你的頁面和狀態欄的位置.很多同學想要這樣一種效果:圖片深入到透明的狀態欄下面.想一想是不是很容易實現呢?你只需要需改或添加第三步中的css樣式即可完成你的設計,是不是很酷...
補充:很多小伙伴記不住hex color各透明度的值,請參考Hex Opacity Values或者自行google我就不復制粘貼了.
一個額外的小栗子還是先貼效果圖
左側有一個隱藏的滑動菜單,在Material Design中,上面的那張圖片一般是延伸到透明的狀態欄下面的,如果狀態欄不透明,會很難看,對設計有潔癖的,肯定不能容忍...
其實實現起來也很簡單,還是上面的步驟,只是第三步有一些變化,在ion-header外面又套了一層.ion-page.
.platform-android { .ion-page { ion-header { padding-top: $cordova-md-statusbar-padding; background-color: color($colors, primary); } } }我想讓狀態欄變色怎么辦?
在上面第三步,我設置header的padding并指定了background-color,很容易理解這里的背景顏色深入到狀態欄下面,提供一種近似于沉浸式的效果,這樣做簡單,對不了解android的童鞋理解起來很輕松,當然再添加一些原生代碼,能自動實現沉浸效果,文章后面我會說為什么沒有這么做.
回到正題,想讓狀態欄變色可以使用cordova-plugin-statusbar插件,
在不同視圖加載時調用StatusBar.backgroundColorByHexString("#55C0C0C0");(同樣這里的顏色值也是能添加透明度的)來實現不同頁面不同顏色的狀態欄.
其實這一段套路夠深的話,應該是放在前面調胃口用的...
我為什么要這么做呢?
其實是我不會android的開發,我是前端,能力有限...大神勿噴...
下面是我解決問題的思路和做法 供參考
透明狀態欄網上能google出一大堆的解決方案,但大多是針對原生代碼的解決方案(我只能呵呵),有關于ionic2的解決方案少之又少,并且在google ionic2 statusbar transparent時結果的第一條答案還是有偏差的,它的標題是How can I make a transparent toolbar? - ionic 2 - Ionic注意是toolbar而不是statusbar,很多同學把這兩個東西混在了一起,導致很多童鞋云里霧里的傻傻分不清...
在那個帖子中,大家討論的是toolbar的透明,其實在Ionic 2 Beta 10中已經解決這個問題了.可以參考里面的做法.我這里就不說了.
好吧,接著google,從各種信息中篩選我想要的結果,未果...后來,發現了這個帖子感謝@peterbetos.
我按照peterbetos提供的方法,但是遇到很多編譯錯誤,尤其是下面這句,ContextCompat依賴android.support.v4.content.ContextCompat,各種嘗試各種錯誤,哪位大神若是解決了,可以分享出來.
getWindow().setStatusBarColor( ContextCompat.getColor(this, R.color.status_bar_transparet));
這就是不能實現沉浸效果的原因,能力有限,還請路過的大神賜教..
既然上面一小段代碼問題這么多,干脆不要,于是就有了上面那三步.我能通過第二步的hex color實現透明,就不用這么麻煩了,理解起來也更簡單...
最后ionic2正在快速迭代,前兩天剛發布2.2.0.很多東西在開發和完善中,就透明狀態欄來講,ionic官方給出的方案是使用cordova-plugin-statusbar插件,但是目前這個插件透明狀態欄在android下不支持,這就尷尬了,好消息是已經有人PR,壞消息是,一年了還沒有合并...
目前ionic2正在做他認為重要的事,像這種問題不知道要排到什么時候,所以你若是覺得這個方案可行,用以用也是極好的!
(完結)
原創文章轉載請注明.
作者:jeneser
原文地址:·ionic2實現透明狀態欄
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/88241.html
摘要:前言我們先一起來回顧一下實現沉浸式狀態欄的一般套路。從以上版本才是真正的可以設置沉浸式體驗,但也僅僅是操作狀態欄和導航欄的顯示與隱藏。屬性解釋設置了表明會負責系統的繪制,繪制透明背景的系統狀態欄和導航欄,然后用和的顏色填充相應的區域。 前言 我們先一起來回顧一下實現沉浸式狀態欄的一般套路。在Android上,關于對StatusBar(狀態欄)的操作,一直都在不斷改善,并且表現越來越好,...
摘要:首先設置侵入狀態欄,并設置狀態欄為透明色,相當于隱藏的狀態欄,然后在中封裝狀態欄,由控制自己的顏色即可但是狀態欄字體顏色還是需要通過控制。 目錄介紹 1.關于如何集成 2.關于如何使用 3.關于鳴謝 4.關于版本更新說明 5.關于其他介紹 0.說明 狀態欄工具類,應該可以滿足絕大多數的使用場景。具體可以參考代碼案例,歡迎star!! 1.技術博客匯總 2.開源項目匯總 3.生...
閱讀 3250·2023-04-25 22:47
閱讀 3765·2021-10-11 10:59
閱讀 2300·2021-09-07 10:12
閱讀 4243·2021-08-11 11:15
閱讀 3432·2019-08-30 13:15
閱讀 1750·2019-08-30 13:00
閱讀 968·2019-08-29 14:02
閱讀 1680·2019-08-26 13:57