Phonegap Cordovaステータスバーダブルバーを作成するプラグイン

Question

私はphonegapを使用しているアプリケーションで作業しています。 CLIgを使ってビルドし、phonegapビルドはビルドしない。私はcordova-plugin-statusbarプラグインに問題があります。オンにすると、バーの高さが追加されます。ここに、それがどのように見えるかがあります。

ダブルハイトのメニューバー：

私は2つの方法でステータスバーを実装しています。最初のタグを追加することによって、私はまた私のDeviceReady関数に以下と追加（最初の設定タグを除去することで）、JavaScriptでこれを行っている

<platform name="ios"> 
    <preference name="StatusBarOverlaysWebView" value="false" /> 
    <preference name="StatusBarStyle" value="default" /> 
    <preference name="StatusBarBackgroundColor" value="#000000" /> 
</platform> 

をconfig.xmlに

StatusBar.overlaysWebView(false); 
StatusBar.backgroundColorByHexString('#000000'); 
StatusBar.styleDefault(); 

何であったかを確認するには

：起こって、2色を私は色を変えていると私は、この

ダブルステータスバーを取得します

また、overlaysWebViewをすべて 'true'に設定すると、空白がなくなり、コンテンツはメニューバーの下に表示されます。

StatusBar.overlaysWebView(true); 

私にはCSSの問題はないと私は信じています。また、私は私のCSSを通過し、これを追加するものは見えません。私のCSSはかなり基本的です。

/* Style Reset */ 
html, body, div, span, applet, object, iframe, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
a, abbr, acronym, address, big, cite, code, 
del, dfn, em, img, ins, kbd, q, s, samp, 
small, strike, strong, sub, sup, tt, var, 
b, u, i, center, 
dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td, 
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary, 
time, mark, audio, video { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    font-size: 100%; 
    font: inherit; 
    vertical-align: baseline; 
} 
/* HTML5 display-role reset for older browsers */ 
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section { 
    display: block; 
} 

body { 
    line-height: 1; 

} 
ol, ul { 
    list-style: none; 
} 
blockquote, q { 
    quotes: none; 
} 
blockquote:before, blockquote:after, 
q:before, q:after { 
    content: ''; 
    content: none; 
} 
table { 
    border-collapse: collapse; 
    border-spacing: 0; 
} 
/* End of style reset */ 

* { 
    -webkit-tap-highlight-color: rgba(0,0,0,0); /* make transparent link selection, adjust last value opacity 0 to 1.0 */ 
} 

body { 
    -webkit-touch-callout: none;    /* prevent callout to copy image, etc when tap to hold */ 
    -webkit-text-size-adjust: none;    /* prevent webkit from resizing text to fit */ 
    -webkit-user-select: none;     /* prevent copy paste, to allow, change 'none' to 'text' */ 
/* background-color:#E4E4E4; 
    background-image:linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%); 
    background-image:-webkit-linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%); 
    background-image:-ms-linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%); 
    background-image:-webkit-gradient(
     linear, 
     left top, 
     left bottom, 
     color-stop(0, #A7A7A7), 
     color-stop(0.51, #E4E4E4) 
    ); 
    background-attachment:fixed;*/ 
    font-family:'HelveticaNeue-Light', 'HelveticaNeue', Helvetica, Arial, sans-serif; 
    font-size:12px; 
/* height:100%; 
    margin:0px; 
    padding:0px; 
    text-transform:uppercase; 
    width:100%;*/ 
    background-color: #333333; 
} 

.md-button { 
    color:#DFE5E6; 
    background-color:#1D1D1D; 
} 

.md-button[disabled] { 
    border: 1px solid black; 
    color : rgba(0, 0, 0, 0.26); 
    background-color: transparent; 
} 


/* Portrait layout (default) */ 
.app { 
    background:url(../img/logo.png) no-repeat center top; /* 170px x 200px */ 
    position:absolute;    /* position in the center of the screen */ 
    left:50%; 
    top:50%; 
    height:50px;     /* text area height */ 
    width:225px;     /* text area width */ 
    text-align:center; 
    padding:180px 0px 0px 0px;  /* image height is 200px (bottom 20px are overlapped with text) */ 
    margin:-115px 0px 0px -112px; /* offset vertical: half of image height and text area height */ 
            /* offset horizontal: half of text area width */ 
} 

/* Landscape layout (with min-width) */ 
@media screen and (min-aspect-ratio: 1/1) and (min-width:400px) { 
    .app { 
     background-position:left center; 
     padding:75px 0px 75px 170px; /* padding-top + padding-bottom + text area = image height */ 
     margin:-90px 0px 0px -198px; /* offset vertical: half of image height */ 
             /* offset horizontal: half of image width and text area width */ 
    } 
} 

/* Custom Fonts */ 
@font-face { 
    font-family: "sapient_sans_regular"; 
    src: url("../fonts/sapient_sans_regular.TTF") format("opentype"); 
} 
@font-face { 
    font-family: "sapient_sans_regular_italic"; 
    src: url("../fonts/sapient_sans_regular_italic.TTF") format("opentype"); 
} 
@font-face { 
    font-family: "sapient_sans_bold"; 
    src: url("../fonts/sapient_sans_bold.TTF") format("opentype"); 
} 
@font-face { 
    font-family: "sapient_sans_bold_italic"; 
    src: url("../fonts/sapient_sans_bold_italic.TTF") format("opentype"); 
} 


.material-icons { 
    margin:0px; 
    color:white; 
    height:40px; 
    width:40px; 
    line-height:40px; 
    vertical-align: middle; 
    text-align: center; 
    background: #1D1D1D; 
} 
.material-icons.md-menu-item.md-icon { 
    text-align: left; 
} 

.material-icons.menuItem { 
    background: transparent; 
    color:#DFE5E6; 
} 

#menuBar ul { 
    position:fixed; 
    top:0; 
    width:100%; 
    list-style-type: none; 
    background-color: #1D1D1D; 
} 
#menuBar li { 
    text-align:center; 
    display: inline; 
} 

.logo { 
    line-height:11px; 
    padding:13px 2px; 
    display: inline-block; 
    vertical-align: middle; 
    //float:left; 
    //margin: auto; 
    overflow: auto; 
    width:100%; 
    background-color: #1D1D1D; 
    border-bottom: 1px solid white; 
} 
.my { 
    //line-height:40px; 
    text-transform: capitalize; 
    font-family: "sapient_sans_bold"; 
    //display: inline-block; 
    font-size:20px; 
    color: #DFE5E6; 
} 
.company { 
    //line-height:40px; 
    text-transform: capitalize; 
    font-family: "sapient_sans_bold"; 
    font-size:20px; 
    color: #6D6E70; 
} 

#menuListing ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    width: 100%; 
    background-color: #f1f1f1; 
} 

#menuListing li a { 
    font-family:'sapient_sans_regular'; 
    display: block; 
    color: #000; 
    padding: 8px 16px; 
    text-decoration: none; 
} 

/* Change the link color on hover */ 
#menuListing li a:hover { 
    background-color: #555; 
    color: white; 
} 
.content { 
    color: white; 
    padding:10px; 
} 

h1 { 
    font-size:18px; 
    font-weight:normal; 
    //margin:0px; 
    //overflow:visible; 
    //padding:0px; 
    //text-align:center; 
} 

.hidden { 
    display: none; 
} 

#map 
{ 

    //margin: auto; 
    //width: 100%; 
    border: 3px solid green; 
    padding: 100px; 
    //height: 90%; 
    //width: 60%; 
} 

プラグインとiosプラットフォームをアンインストールして再インストールしてみましたが、この問題は修正されていません。

私はこれを複数のIOSシミュレータ（異なる電話機）でテストしたが、すべて同じ結果を示していますが、私はまだデバイス上で直接テストしていませんが、違いはないと思います。

私は、アンドロイドにもステータスバーバッファがあることに気がつきましたが（そうではないはずですが）、ただ1つの白いバーです。私はCSSを示唆していると仮定し、しかし、私は

は、PhoneGapのサーブ、私が実行し、ブラウザでこれを見ない

クイックアップデート：私は、ステータスバーから休憩を取って、私のグーグルを得ることに取り組んでいますプラグインも動作するようにマップして、私はいくつかの変更を行い、ステータスバーは現在動作しているようです。何らかの相互作用があったに違いない。私は正確に何が分かるか見てみよう。参照 ため

一部のHTML Index.htmlと

<!DOCTYPE html> 
<html ng-app="snApp"> 
<head> 

    <title>My Test App</title> 
</head> 

<!-- Actual Content --> 
<body ng-cloak> 

    <div ng-include="'app/menuBar/menuBar.html'"></div> 
    <!-- Main content Area --> 
    <md-content flex id="main"> 
     <ng-view></ng-view> 
    </md-content> 

</body> 
</html> 

MenuBar.html（ノート、私はこの元の投稿からいくつかの調整を行いました。私はそれらを元に戻すことを試みた。）

<div ng-controller="menuBarController as menuBarController" id="menuBarContainer"> 

<md-toolbar id="menuBar" class="md-short" layout="row"> 
    <div class="menuButton"> 
     <md-icon ng-click="menuBarController.toggleLeftMenu();" md-font-library="material-icons">menu</md-icon> 
    </div> 

    <div class="logo"> 
     <span class="my">My</span><!-- this removes the space (for some reason) --><span class="app">App</span> 
    </div> 
</md-toolbar> 

<md-sidenav md-component-id="left" class="md-sidenav-left" > 
    <md-menu-item> 
    </md-menu-item> <!-- remove this after adding in the buffer --> 

    <md-menu-item> 
     <md-button ng-click="menuBarController.toggleLeftMenu();" ng-href="#/"> 
      <md-icon md-font-library="material-icons" class="menuItem">home 
      </md-icon> Home 
     </md-button> 
    </md-menu-item> 

    <md-menu-item> 
     <md-button ng-click="menuBarController.toggleLeftMenu();" ng-href="#/locations"> 
      <md-icon md-font-library="material-icons" class="menuItem">location_city 
      </md-icon>Locations 
     </md-button> 
    </md-menu-item> 

    <md-menu-item> 
     <md-button ng-click="menuBarController.toggleLeftMenu();" ng-href="#/map"> 
      <md-icon md-font-library="material-icons" class="menuItem">map 
      </md-icon>Map 
     </md-button> 
    </md-menu-item> 

    <md-menu-item> 
     <md-button ng-click="menuBarController.toggleLeftMenu();" ng-href="#/navigate"> 
      <md-icon md-font-library="material-icons" class="menuItem">navigation 
      </md-icon>Navigate 
     </md-button> 
    </md-menu-item> 

    <md-menu-item> 
     <md-button ng-click="menuBarController.toggleLeftMenu();" ng-href="#/about"> 
      <md-icon md-font-library="material-icons" class="menuItem">info 
      </md-icon>About 
     </md-button> 
    </md-menu-item> 
</md-sidenav> 
</div> 

MenuBar用コントローラ

console.log("menuBar.controller.js file loaded"); 

snApp.controller('menuBarController', ['$mdSidenav', '$window', MenuBarController]); 


function MenuBarController($mdSidenav, $window) { 
    var vm = this; 

    // vm.operatingSystem = $window.operatingSystem; 
    vm.operatingSystem = null; 
    vm.toggleLeftMenu = toggleLeftMenu; 
    vm.checkForIos = checkForIos; 

    function toggleLeftMenu() { 
     $mdSidenav('left').toggle(); 
    } 
} 

ビューの例 - ホーム。ここに地図が表示される - -

<!-- home.html --> 
<div class="content" ng-controller="HomeController as home"> 
    <h1>Home Page</h1> 
    <p>{{ home.message }}</p> 
</div> 

home.controller.js

console.log("home.controller.js file loaded"); 

angular.module('snApp') 
.controller("HomeController", HomeController); 

function HomeController() { 
    //debugger; 
    var vm = this; 
    vm.message = "this is a home message"; 
} 

map.html多くは今だけのテストのためにそこにある：htmlページは、テストのために、今、超簡単です。

<!-- map.html --> 
<div class="content" ng-controller="MapController as map"> 
    <h1>Map Page</h1> 
    <md-content layout-gt-sm="row" layout-padding> 
     <md-button ng-click="map.setMapToDiv();">show map</md-button> 
     <md-button ng-click="map.getLocation();" ng-disabled="map.buttonDisabled">{{ map.buttonText }}</md-button> 
     <md-input-container> 
      <label>Div Adjustent</label> 
      <input ng-model="map.divAdjustment"> 
     </md-input-container> 
     <md-button ng-click="map.adjustDiv();" > Adjust Div Height </md-button> 
     <p></p> 
     <p>For testing - buttonEnabled value: <span ng-bind="map.buttonDisabled"></span></p> 
     <p>{{ map.latitude }}</p> 
     <p>{{ map.longitude }}</p> 
     <p>{{ map.message }}</p> 
     <p></p> 
     <md-button ng-click="map.showMapDialog();">make map full screen</md-button> 
     <!-- <div id="map" ng-show="map.locationUpdated"> --> 
     <div id="map" ng-show="true"></div> 
    </md-content> 
</div> 

map.controller.js

console.log("map.controller.js file loaded"); 

angular.module('snApp') 
.controller("MapController", ['$scope', MapController]); 

function MapController($scope) { 
    // Variables 
    var vm = this; 
    vm.latitude = 0; 
    vm.longitude = 0; 
    vm.locationUpdated = false; 
    vm.buttonTextDefault = "Get Location"; 
    vm.buttonText = vm.buttonTextDefault; 
    vm.buttonDisabled = false; 

    vm.divAdjustment = 0; 
    vm.message = "Map will display after getting Geolocation"; 

    // Method Declarations 
    vm.getLocation = getLocation; 
    vm.setMapToDiv = setMapToDiv; 
    vm.showMapDialog = showMapDialog; 
    // vm.adjustDiv = adjustDiv; 

    // Gets the Current Geolocation for user 
    function getLocation() { 
     vm.buttonDisabled = true; 
     vm.buttonText = "Working..."; 
     var options = { maximumAge: 0, timeout: 10000, enableHighAccuracy: true }; 
     navigator.geolocation.getCurrentPosition(getLocationSuccess,getLocationError,options); 
     vm.buttonDisabled = false; 
    } 

    function getLocationSuccess(position) { 
     console.log("found geolocation"); 
     vm.latitude = position.coords.latitude; 
     vm.longitude = position.coords.longitude; 
     vm.buttonText = vm.buttonTextDefault; 
     googleMaps.positionMapToCoords(vm.latitude, vm.longitude); 
     vm.locationUpdated = true; 
     $scope.$apply(); 
    } 

    function getLocationError(error) { 
     console.log("Error finding geolocation"); 
     alert('code: ' + error.code + '\n' + 
       'message: ' + error.message + '\n'); 
     vm.buttonText = vm.buttonTextDefault; 
     $scope.$apply(); 
    } 

    function setMapToDiv() { 
     googleMaps.setMapToDiv(); 
    } 

    function showMapDialog() { 
     googleMaps.showMapDialog(); 
    } 

} 

Answer 1

誰もが同じ問題を抱えて、このバンプにした場合。私は基本的に、直接的な答えではなく回避策のほうが良い解決策を見つけましたが、参考になるかもしれません。私は、テキストを適切に着色するためにプラグインを使用することにしましたが、残りは手動で管理しています。

StatusBar.overlaysWebView(true); 
    StatusBar.backgroundColorByHexString('#1D1D1D'); 
    StatusBar.styleLightContent(); 

その後、いくつかのCSS

#statusBar { 
    background-color:#1D1D1D; 
    width:100%; 
    min-width:100%; 
    overflow: auto; 
    min-height:20px; 
    height:20px; 
} 

私はこれが私のメニューバーの一部としてDIV持っています。メニューバーは独自の角度成分です。コントローラには、私はOSのバージョンを確認するメソッドがあります。この投稿への感謝：OSに基づいてのdivを表示または非表示になります

<!-- Status Bar --> 
<div ng-show="menuBarController.isIos()" id="statusBar"></div> 

：Detecting iOS/Android Operating system

snApp.controller('menuBarController', ['$mdSidenav', '$window', '$googleMapsService', MenuBarController]); 


function MenuBarController($mdSidenav, $window, $googleMapsService) { 
    var vm = this; 
    var leftMenuId = 'left'; 
    vm.isIosValue = false; 

    vm.$onInit = function() { 
     vm.isIosValue = vm.checkForIos(); 
    } 

    vm.operatingSystem = null; 
    vm.toggleLeftMenu = toggleLeftMenu; 
    vm.getMobileOperatingSystem = getMobileOperatingSystem; 
    vm.checkForIos = checkForIos; 
    vm.isIos = isIos; 

    vm.googleMaps = $googleMapsService; 

    function toggleLeftMenu() { 
     mapDivManagement(); 
     $mdSidenav(leftMenuId).onClose(mapDivManagement).toggle(); 
    } 

    function mapDivManagement() { 
     if(vm.googleMaps.checkMap() && $window.location.hash == "#/map") 
     { 
      if($mdSidenav(leftMenuId).isOpen()) { 
       console.log("vm.googleMaps.revealMap(true);"); 
       vm.googleMaps.revealMap(true); 
      } 
      else { 
       console.log("vm.googleMaps.revealMap(false);"); 
       vm.googleMaps.revealMap(false); 
      } 
     } 
    } 


    /** 
    * Determine the mobile operating system. 
    * This function sets global variable to one of 'iOS', 'Android', 'Windows Phone', or 'unknown'. 
    * 
    * @returns {String} 
    * 
    * Source: https://stackoverflow.com/questions/21741841/detecting-ios-android-operating-system 
    */ 
    function getMobileOperatingSystem() { 
     var userAgent = navigator.userAgent || navigator.vendor || window.opera; 
     //debugger; 
      // Windows Phone must come first because its UA also contains "Android" 
     if (/windows phone/i.test(userAgent)) { 
      // return "Windows Phone"; 
      vm.operatingSystem = "Windows Phone"; 
     } 
     else if (/android/i.test(userAgent)) { 
      // return "Android"; 
      vm.operatingSystem = "Android"; 
     } 
     // iOS detection from: https://stackoverflow.com/a/9039885/177710 
     else if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) { 
      // return "iOS"; 
      vm.operatingSystem = "iOS"; 
     } 
     else { 
      vm.operatingSystem = "unknown"; 
     } 
      // return "unknown"; 
    } 

    function checkForIos() { 
     vm.getMobileOperatingSystem(); 
     //vm.operatingSystem = $window.operatingSystem; 
     if(vm.operatingSystem == 'iOS') { 
      return true; 
     } 
     else { 
      return false; 
     } 
    } 

    function isIos() { 
     return vm.isIosValue; 
    } 
} 

最後に、私のmenubar.htmlファイルで、私はこのdiv要素を持っています。

これはすべてどのように通話で動作するのか分かりませんが、それ以外のところではかなり難しくなります。