CODEWITHSUNDEEP
iosnativescript
Aron
Aron

Reputation: 1179

NativeScript ActionBar Opacity

I try to change the opacity of the actionbar. For test i try to change the color over native method but this won't work.

I don't understand why, other native functions like UIAlert works fine. I have no error or anything else only that the actionbar looks like this:

enter image description here

My target is completely transparent because the background has a gradient.

This is my page loaded function:

loaded(args){
        let page = <Page>args.object;
        page.bindingContext = appViewModel;

        if (page.ios) {
            var controller = frameModule.topmost().ios.controller;
            var navigationBar = controller.navigationBar;
            navigationBar.barTintColor = UIColor.blueColor();
        }
    }

thanks for help

UPDATE

my ts code:

var frameModule = require("ui/frame");
import {topmost} from "ui/frame";
import {Page} from "ui/page";
import {Observable, EventData} from "data/observable";
import {View} from "ui/core/view";

let appViewModel = new Observable({selectedPage: "dashboard"});
export abstract class BasePage {
    //implement this function in the inheriting pages to set their specific binding context
    abstract mainContentLoaded(args:EventData);

    loaded(args){
                let page = <Page>args.object;
                page.bindingContext = appViewModel;

                if (page.ios) {
            frameModule.topmost().ios.navBarVisibility = "always";

            page.ios.title = "Test Application";

            var controller = frameModule.topmost().ios.controller;

            var navBar = controller.navigationBar;
            navBar.barTintColor = UIColor.redColor();
            navBar.navigationBarHidden = false;
            navBar.barStyle = UIBarStyle.UIBarStyleBlackTranslucent;
        }

    }

    toggleDrawer(){
        let page = <Page>topmost().currentPage;
        let drawer = <any>page.getViewById("sidebar");
        drawer.toggleDrawerState();
    }
    navigate(args){
        let pageName = args.view.text.toLowerCase();
        appViewModel.set("selectedPage", pageName);
        topmost().navigate("modules/" + pageName + "/" + pageName);
    }

}

my xml:

<page
  xmlns="http://schemas.nativescript.org/tns.xsd"
  xmlns:drawer="nativescript-telerik-ui/sidedrawer"
  xmlns:widgets="shared/widgets"
  loaded="loaded">

  <page.actionBar>
    <action-bar>
      <navigation-button icon="res://ic_menu" tap="toggleDrawer" ios:visibility="collapsed" />
      <action-bar.actionItems>
        <ios>
          <action-item icon="res://ic_menu" ios.position="left" tap="toggleDrawer" />
        </ios>
      </action-bar.actionItems>
    </action-bar>
  </page.actionBar>

  <drawer:rad-side-drawer id="sidebar">
    <drawer:rad-side-drawer.mainContent>

    </drawer:rad-side-drawer.mainContent>
    <drawer:rad-side-drawer.drawerContent>
      <widgets:drawer-content />
    </drawer:rad-side-drawer.drawerContent>
  </drawer:rad-side-drawer>

</page>

Upvotes: 0

Views: 1370

Answers (1)

Nick Iliev
Nick Iliev

Reputation: 9670

The following solution worked out for me (iOS 9.3 with NativeScript 2.0.1)

if (page.ios) {
    frameModule.topmost().ios.navBarVisibility = "always";

    page.ios.title = "Test Application";

    var controller = frameModule.topmost().ios.controller;

    var navBar = controller.navigationBar;
    navBar.barTintColor = UIColor.redColor();
    navBar.navigationBarHidden = false;
    navBar.barStyle = UIBarStyle.UIBarStyleBlackTranslucent;
}

Upvotes: 1

Related Questions