{N}& {NG2}:如何使操作栏透明并叠加在nativescript中

时间:2017-04-05 12:02:51

标签: android angular nativescript tns

我试图使用nativescript 2.5.2(最新版)构建一个Android应用程序,所以我希望home组件的actionbar是透明的,当我滚动它时会变得不透明(渐弱效果)。

所以我的方法是让操作栏从一开始就透明,我将使用ScrollView订阅一个事件,我将更新操作栏属性以缓慢添加不透明度我不知道它是否是一个好的解决方案还是有其他好的东西

所以我试着跟随很多教程让android动作栏变得透明和叠加,但没有一个对我有用,动作栏变得透明但它仍然有底部的白色默认页面颜色,即使我添加了一个边缘 - 在我想要在操作栏底部和设置窗口可见的元素的顶部:背景为透明。

所以这是我的values / styles.xml(目标API17):

    <?xml version="1.0" encoding="utf-8"?>
<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: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 actioon-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">
        <item name="android:background">@android:color/transparent</item>
        <!--For compatibility-->
        <item name="background">@android:color/transparent</item>
    </style>
</resources> 

这是我的家庭组件模板

<ActionBar title="" class="action-bar" (loaded)="actionbarloaded()">
        <ActionBar.titleView>

            <StackLayout orientation="horizontal" ios:horizontalAlignment="center" android:horizontalAlignment="right">
                <Label text="ActionBar Title"  class="action-label"></Label>
            </StackLayout> 
        </ActionBar.titleView>

    </ActionBar>

<ScrollView id="scrollView" style="margin-top: -64">...</ScrollVie>

这是我的actionbarloaded()方法:

actionbarloaded(){
        const toolbar = <android.support.v7.widget.Toolbar> (<any>this._page.actionBar)._toolbar;
        toolbar.setBackgroundColor(android.graphics.Color.TRANSPARENT);
    }

PS:默认操作栏背景不是黄色

0 个答案:

没有答案