ActionBar like in Instagram


#1

Hi {N} community,

I would like to build a custom ActionBar like in Instagram (cf: picture)

Which looks kind of like TabView on Android!

Here is my attempt for now:

XML

<ActionBar title="Test" class="action-bar social">
    <StackLayout orientation="horizontal" horizontalAlignment="center">
        <Button #social class="whity" text="Social">
            <FormattedString>
                    <Span text="Home &#x000a;" foregroundColor="#FFFFFF"></Span>
                    <Span class="special" text="" foregroundColor="#FFFFFF"></Span>
            </FormattedString>
        </Button>
    </StackLayout>
</ActionBar>

NG

@ViewChild('social') myBtn: ElementRef;

 

    ngOnInit() {
        this.myBtn.nativeElement.ios.titleLabel.textAlignment = NSTextAlignmentCenter;
        this.myBtn.nativeElement.ios.titleLabel.lineBreakMode = NSLineBreakMode.NSLineBreakByWordWrapping;
    }

What I am trying to do here is to have a simple button with two line in it the first one would be the title and the second one the ‘selected bar style’ which would take the whole width of the button and be white.

And the result:

If someone got any ideas or directions that would be great :smile:


#2

I think you’re on the right track using Layouts instead of trying to do something weird with the ActionBar itself :slight_smile:

Looks like this is a StackLayout with orientation=horizontal. You can create those buttons as circles using CSS:

https://github.com/jlooper/practicebuddy/blob/master/app/home/home.html

<StackLayout class="instrumentBackground">
          <Image class="instrumentImage" [src]="'~/images/'+student.Instrument+'.png'" height="50"></Image>
</StackLayout>

with CSS to set the circle:

.instrumentBackground {
    height: 60;
    width: 60;
    background-color: #fff;
    border-radius: 30;
}


#3

Thanks for the reply,

I am not tyring to build the story part of Instagram, I am actually trying to direclty integrate a TabView system in the ActionBar like they do to switch between the main view, the message view and the camera view.

Cheers from France :smile:


#4

oh I totally misunderstood, my apologies!

Wow, that’s quite the custom ActionBar. You might consider removing the native ActionBar completely (e.g. don’t use that component at all) and just build a completely custom Layout that will be parked at the top of your view. Otherwise all the craziness that ActionBar brings to your app on each platform may kick in.


#5

Thank you for your answer. I already thought about it but one down side is that on iOS you can’t have the StatusBar’s color customised without an ActionBar ! But I think it will be ok for now !

Thanks again for your time :slight_smile:


#6

Should be able to change the iOS status bar color with the native api :smile:so no need for the component on your actual interface. I’m not an iOS dev but it’s still possible - this might be what you need

   if (isIOS) {
        let navigationBar = topmost().ios.controller.navigationBar;
        navigationBar.barStyle = 1;
    }

#7

Thanks for the tip ! Actually topmost().ios.controller is type of UINavigationController api reference here, and there is no method to change the StatusBar color the only thing I found is the barStyle property from the navigationBar object but it does only change the text color. The only thing that I found natively if this.

Then I found this so I should be able to something like this:

- (void)setStatusBarBackgroundColor:(UIColor *)color {

    UIView *statusBar = [[[UIApplication sharedApplication] valueForKey:@"statusBarWindow"] valueForKey:@"statusBar"];

    if ([statusBar respondsToSelector:@selector(setBackgroundColor:)]) {
        statusBar.backgroundColor = color;
    }
}

I will try tommorow (it’s late in France :wink:)

Thank you very much for your help @bradwaynemartin !!


#8

I manage to change the statusBarColor even without an ActionBar like this:

let iosFrame = topmost().ios;
iosFrame.controller.view.window.backgroundColor = new Color('red').ios;

This work when you have you page.actionBarHidden = true, but the text color is always black so I had to change the app delegate like this:

app.delegate.ts

import application = require("application");
declare class UIResponder {};
declare class UIApplicationDelegate{};
declare let UIApplication;
export class AppDelegate extends UIResponder implements UIApplicationDelegate {
    public static ObjCProtocols = [UIApplicationDelegate];

    applicationDidFinishLaunchingWithOptions(application: any, launchOptions: any): boolean {
        UIApplication.sharedApplication.statusBarStyle = 1; 
        return true;
    }

    applicationDidBecomeActive(application: any): void {}
}

main.ts

// this import should be first in order to load some required settings (like globals and reflect-metadata)
import { platformNativeScriptDynamic } from "nativescript-angular/platform";
import { AppModule } from "./app.module";
import application = require("application");
import {AppDelegate} from './app.delegate';


application.ios.delegate = AppDelegate;
platformNativeScriptDynamic().bootstrapModule(AppModule);

info.plist

// add
<key>UIViewControllerBasedStatusBarAppearance</key>
		<false/>

But I can’t get the text back to black which is ok for my app, but if someone need to be able to change the text color this is not the solution

:beers: :smile: