Transparent tabbar and actionbar using angular nativescript for android and ios

问题

I want to make the tab bar transparent and actionbar transparent over a swipelayout or page. The action or tab bar must sit on top of the page like in two layers

I have tried using css to make transparent but its doesnt become transparent over the page.

<ActionBar title="Name" backgroundColor="#00000000"></ActionBar>

<TabView androidTabsPosition="bottom" selectedTabTextColor="white">
   <page-router-outlet
      *tabItem="{iconSource: getIconSource('test')}"
       name="homeTab">
    </page-router-outlet>

    <page-router-outlet
        *tabItem="{iconSource: getIconSource('test2')}"
        name="locationTab">
    </page-router-outlet>

    <page-router-outlet
        *tabItem="{iconSource: getIconSource('test3')}"
        name="searchTab">
    </page-router-outlet>
</TabView>

transparent actionbar over the page

Example

回答1:

Style page / root layout with a background image or color of your choice

.page {
       background: url(https://cdn.pixabay.com/photo/2017/08/12/10/13/background-2633962__340.jpg);
       background-repeat: no-repeat;
       background-size: cover;
    }

Android

Set ActionBar's backgroundColor to transparent

Upon loaded event adjust Page elements unit system

onLoaded(event: EventData) {
    const layout = <GridLayout>event.object,
       page = layout.page;

    if (page.android) {
       page.android.removeRowAt(0);
    }
}

Adjust padding of root layout so the content will not overlap with ActionBar

iOS

Adjust ActionBar attributes upon loaded event

onActionBarLoaded(event: EventData) {
    const actionBar = <ActionBar>event.object;
    if (actionBar.ios) {
        (<any>actionBar).updateFlatness = function (navBar) {
            actionBar.ios.setBackgroundImageForBarMetrics(UIImage.new(), UIBarMetrics.Default);
            actionBar.ios.translucent = true;
        };
    }
}

Playground Sample (Compatibility verified against v5.x)

来源：https://stackoverflow.com/questions/56482879/transparent-tabbar-and-actionbar-using-angular-nativescript-for-android-and-ios

标签

nativescript

nativescript-angular