HBuilder設置APP狀態欄

一、 前言

　　狀態欄就是手機屏幕最頂部的區域，包括了：信號、運營商、電量等信息。通常APP都有屬於自己的色調風格，為了達到整體視覺美觀，通常會設置狀態欄和標題欄的色調設置成一致。

　　圖例：

　　

 

---

 

 

二、狀態欄狀態類型

1. 默認
2. 變色（設置顏色）
3. 透明（沉浸式）
4. 消失（全屏）

 

---

 

 

三、狀態欄變色

　　1.效果如圖：

　　2.根據色調設置狀態欄文字顏色，文字顏色只提供兩種值：light（白色）、dark（黑色）

　　3.設置標題欄背景顏色

　　4.設置狀態欄背景顏色，顏色值為16進制

　　示例代碼：

<link href="css/mui.min.css" rel="stylesheet"/>
.mui-bar{ background-color: red;}
</link>
<script>        
mui.plusReady(function(){             
plus.navigator.setStatusBarStyle('light');  
plus.navigator.setStatusBarBackground('#FF0000');             
});    
</script>    

　　注意事項：

　　背景色終端支持僅：Android5及以上系統支持；iOS7.0及以上系統支持。

　　文字色終端支持僅：Android5只有小米和魅族支持，Android6及以上所有安卓支持；iOS7及以上支持。

 

---

　　

四、狀態欄透明（沉浸式）

　　1.效果如圖：

　　

　　　　　　　　　　（將背景圖片和狀態欄、標題欄貫通了）

 

 　　

　　2.運用實戰（登錄界面）

　　需求描述：將背景設置成圖片，圖片可以適應不同設備的分配率（響應式），將狀態欄的背景設置成透明，背景圖片覆蓋狀態欄至屏幕頂部。　　

 <style>       
    html,body{height: 100%;width: 100%;}  
    body{  
      background:url(image/background.png)no-repeat;   
      background-size:100% 100%;                  
        filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image/background.png',sizingMethod='scale');  
    }            
    </style>

 

mui.plusReady(function(){             
    plus.navigator.setStatusBarStyle('light');               
});

 

"plus": {
    "statusbar": {
        "immersed": true
    }
}

 

 　　3.沉浸式延伸的問題

　　 由於沉浸式模式是在manifest.json文件配置，作為了一個固定全局的設置，沉浸式的設置可能只是針對部分頁面，那么對其他的頁面都牽連了。

　　 導致的效果如圖：

　　

　　　　　　　　　　　　　　（狀態欄的高度被忽略）

　　解決代碼：

  mui.plusReady(function(){                      
    plus.webview.currentWebview().setStyle({
        statusbar:{background:'#ff0000'},top:0,bottom: 0
　　});
　});

　　background屬性，設置狀態欄的背景色。

 

---

 

 

五、 全屏顯示（沒有狀態欄）

在應用中可調用5+ API動態改變應用是否全屏顯示的狀態：

function fullscreen(){
        // 設置應用全屏顯示！
        plus.navigator.setFullscreen(true);
}
function unfullscreen(){
        // 設置應用非全屏顯示！
        plus.navigator.setFullscreen(false);
}
function isfullscreen(){
        // 查詢應用當前是否全屏顯示！
        console.log( "是否全屏："+(plus.navigator.isFullscreen()?"是":"否") );
}

 

---