ionic2 改变状态栏颜色

Posted 温温婉婉

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ionic2 改变状态栏颜色相关的知识,希望对你有一定的参考价值。

 

有一个点要特别注意,就是!安卓版本要5.0以上

参考文章:https://segmentfault.com/a/1190000009078477

其中头两项是修改MainActivity.java文件,以下是修改后的MainActivity.java文件的所有内容

MainActivity.java的路径为:platforms\android\src\com\ionicframework\

/*
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements. See the NOTICE file
distributed with this work for additional information
regarding copyright ownership. The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License. You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License.
*/

package com.ionicframework.smartwms328018;

import android.os.Bundle;
import org.apache.cordova.*;
import android.os.Build;
import android.view.View;

public class MainActivity extends CordovaActivity
{
@Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
// Set by <content src="index.html" /> in config.xml

//安卓状态栏透明
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
getWindow().getDecorView().setSystemUiVisibility(
View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN |
View.SYSTEM_UI_FLAG_LAYOUT_STABLE);
}

loadUrl(launchUrl);
}
}

第二步:在项目根目录的config.xml文件中添加下面配置,这里需要注意
颜色的设置至关重要,此处是八位hex color,前两位是透明度,后六位是rgb颜色值.so根据自己的需要配置.
<preference name="StatusBarBackgroundColor" value="#551b1d23" />

 

第三步: 在app.scss中添加样式

 
.platform-android {
    ion-header {
      padding-top: $cordova-md-statusbar-padding;
      background-color: color($colors, primary);
    }
}


第四步: 在appComponent.ts 文件中添加下面这段代码
platform.ready().then(() => {
   if (this.platform.is(‘android‘)) {
       this.statusBar.backgroundColorByHexString("#55fb7981");
   }
})

以上是关于ionic2 改变状态栏颜色的主要内容,如果未能解决你的问题,请参考以下文章

如何在 Ionic 2 中使状态栏颜色可变

状态栏图标颜色不会随主题而改变

状态栏在全屏对话框片段android中将其颜色更改为黑色

状态栏颜色在 v21 中不会改变

在android中动态设置状态栏颜色

沉浸式导航栏及状态栏系统图标颜色的改变