透明的标签栏和操作栏，使用针对Android和iOS的角度本机脚本 [英] Transparent tabbar and actionbar using angular nativescript for android and ios

问题描述

我想使标签栏和动作栏在swipelayout或页面上透明.操作或标签栏必须像两层一样位于页面顶部

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

我尝试使用css使其透明，但是在页面上并没有变得透明.

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>

页面上的透明操作栏

示例

推荐答案

具有您选择的背景图片或颜色的样式页/根布局

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

• 将ActionBar的backgroundColor设置为transparent

• 在loaded事件上调整Page元素单位系统

• 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);
    }
}

调整根布局的填充，使内容不会与ActionBar重叠

iOS

根据loaded事件调整ActionBar属性

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;
        };
    }
}

游乐场样品(已针对v5.x进行了兼容性验证)

Playground Sample (Compatibility verified against v5.x)

这篇关于透明的标签栏和操作栏，使用针对Android和iOS的角度本机脚本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！