更改Android栏的颜色

时间:2019-02-25 22:25:49

标签: android nativescript nativescript-angular

我已经使用Nativescript Angular创建了一个应用程序,但是如果我所有正在运行的应用程序都显示在Android中,则该栏始终为白色。有谁知道我该如何自定义它?例如,来自Gmail或Playstore的那个。最好是我可以在应用本身中根据用户选择的主题对其进行动态调整,或者它始终代替操作栏的颜色。

enter image description here

编辑:

我发现了如何对颜色进行硬编码->在 colors.xml 文件中更改ns_primary

但是我没有设法采用ActionBar的颜色。我认为ActionBar的颜色将被我的xml文件覆盖,但是我不知道如何防止它。您知道要实现此目的我必须对文件进行哪些更改?

AndroidManifest.xml

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
      package="__PACKAGE__"
      android:versionCode="10001"
      android:versionName="1.0">

<supports-screens
    android:smallScreens="true"
    android:normalScreens="true"
    android:largeScreens="true"
    android:xlargeScreens="true"/>

<uses-sdk
    android:minSdkVersion="17"
    android:targetSdkVersion="__APILEVEL__"/>

<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.INTERNET"/>

<application
    android:name="com.tns.NativeScriptApplication"
    android:allowBackup="true"
    android:icon="@drawable/icon"
    android:label="@string/app_name"
    android:theme="@style/AppTheme">

    <activity
        android:name="com.tns.NativeScriptActivity"
        android:label="@string/title_activity_kimera"
        android:configChanges="keyboardHidden|orientation|screenSize"
        android:theme="@style/LaunchScreenTheme">

        <meta-data android:name="SET_THEME_ON_LAUNCH" android:resource="@style/AppTheme" />

        <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
    </activity>
    <activity android:name="com.tns.ErrorReportActivity"/>
</application>

styles.xml

<resources xmlns:android="http://schemas.android.com/apk/res/android">

<!-- theme to use FOR launch screen-->
<style name="LaunchScreenThemeBase" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="toolbarStyle">@style/NativeScriptToolbarStyle</item>

    <item name="colorPrimary">@color/ns_primary</item>
    <item name="colorPrimaryDark">@color/ns_primaryDark</item>
    <item name="colorAccent">@color/ns_accent</item>

    <item name="android:windowBackground">@drawable/splash_screen</item>

    <item name="android:windowActionBarOverlay">true</item>  
    <item name="android:windowTranslucentStatus">true</item>
</style>

<style name="LaunchScreenTheme" parent="LaunchScreenThemeBase">
</style>

<!-- theme to use AFTER launch screen is loaded-->
<style name="AppThemeBase" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="toolbarStyle">@style/NativeScriptToolbarStyle</item>

    <item name="colorPrimary">@color/ns_primary</item>
    <item name="colorPrimaryDark">@color/ns_primaryDark</item>
    <item name="colorAccent">@color/ns_accent</item>
</style>

<style name="AppTheme" parent="AppThemeBase">
</style>

<!-- theme for action-bar -->
<style name="NativeScriptToolbarStyleBase" parent="Widget.AppCompat.Toolbar">
    <item name="android:background">@color/ns_primary</item>
    <item name="theme">@style/ThemeOverlay.AppCompat.ActionBar</item>
    <item name="popupTheme">@style/ThemeOverlay.AppCompat</item>
</style>

<style name="NativeScriptToolbarStyle" parent="NativeScriptToolbarStyleBase">
</style>

colors.xml

<resources>
    <color name="ns_primary">#F5F5F5</color>
    <color name="ns_primaryDark">#757575</color>
    <color name="ns_accent">#33B5E5</color>
    <color name="ns_blue">#272734</color>
</resources>

3 个答案:

答案 0 :(得分:1)

您可以在App_resources-> values的styles.xml中定义主题

<style name="LaunchScreenThemeBase" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="toolbarStyle">@style/NativeScriptToolbarStyle</item>
    <item name="colorPrimary">@color/ns_primary</item>
    <item name="colorPrimaryDark">@color/ns_primaryDark</item>
    <item name="colorAccent">@color/ns_accent</item>
    <item name="android:windowBackground">@drawable/splash_screen</item>
    <item name="android:windowActionBarOverlay">true</item>

</style>
<style name="LaunchScreenTheme" parent="LaunchScreenThemeBase"></style>
<!-- theme to use AFTER launch screen is loaded-->
<style name="AppThemeBase" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="toolbarStyle">@style/NativeScriptToolbarStyle</item>
    <item name="colorPrimary">@color/ns_primary</item>
    <item name="colorPrimaryDark">@color/ns_primaryDark</item>
    <item name="colorAccent">@color/ns_accent</item>
    <item name="android:windowDrawsSystemBarBackgrounds">true</item>
    <item name="android:fitsSystemWindows">false</item>
</style>

,您可以在App_resources-> values-> colors.xml

中定义这些颜色
<resources>
<color name="ns_primary">#c66900</color>
<color name="ns_primaryDark">#c66900</color>
<color name="ns_mainbg">#E5E5E8</color>
<color name="ns_accent">#33B5E5</color>
<color name="ns_blue">#2196F3</color>
<color name="ns_transparent">#00000000</color>
<color name="ns_white">#FFFFFF</color>


<color name="ns_color_accent_custom">#4CAF50</color>
<color name="ns_color_primary_custom">#CDDC39</color>
<color name="ns_color_primary_secondary">#AFB42B</color>

答案 1 :(得分:0)

您只需在backgroundColor上设置colorActionBar属性。

<ActionBar title="ActionBar Style" color="white" backgroundColor="red">  
</ActionBar>

或者您可以简单地将其添加到app.css中以在整个应用中应用

ActionBar {
  color: white;
  background-color: red;
}

您可能对https://www.nativescriptthemebuilder.com/nativescript-themes插件也很感兴趣,它可以帮助您在运行时动态更改主题,这应该有助于您为主题用户提供帮助。

尽管您仍然可以通过修改styles.xml中的colors.xml / App_resources/Android/src/main/res来更改颜色。但这将特定于Android,并且在应用程序的所有页面上都是静态的。

答案 2 :(得分:0)

如果要动态更改,则可以使用:

window.statusBarColor = ContextCompat.getColor(applicationContext,R.color。colorPrimary)