nativescript-nbmaterial-coordinator
A nativescript implementation of coordinator between layout for iOS and Android
npm i --save nativescript-nbmaterial-coordinator
  • Version: 1.0.0
  • GitHub:
  • Downloads:
    • Last Day:   0
    • Last Week:  0
    • Last Month: 3

Nativescript implementation of coordination between views

The module implements coordination for both platforms iOS and Android. It uses a producer/consumer pattern based on rxJs.

The module augment nativescript view in order to add behaviours:

    interface View {
addBehaviour(behaviour: Behaviour);
}


export interface Behaviour {
view: View;
onCreate?();
onInitNative?();
onDispose?();
onLoaded?();
onUnloaded?();
}

It also provide a Producer interface. The producer is the view that make other views moving (for example a scroll event on scroll view):

export interface Producer {
init();
start();
stop();
stream: Rx.Subject<ProducerData>;
}

The module provide some behaviours. But you can create your own behaviours.

Below the list of behaviour based on a scrollview (or listview):

  • FixedHeaderBehavior : hide/show (using translation and opacity) a header based on scroll position
  • ExpandableHeaderBehavior: augment the height of the header or reduce it based on scroll position
  • ScrollScaleBehavior: scale or unscale a view based on scroll position
  • AnchorBehaviour : the textinput is anchored to the top, bottom, middle when keyboard is shown. The input stay anchored even if autogrow is setup

FixedHeaderBehavior

let header: View = null;
let listView: ListView = null;
let behav = new FixedHeaderBehavior(listView);
behav.height = 112;
behav.speedFactor = 1; //HOW MUCH INCREASE OR DECREASE SIZE OF HEADER RELATIVE TO DELTA SCROLL
behav.deferHideFactor = 3; //START HIDING ONLY IF SCROLL IS 3 TIMES GREATER THAN HEADER HEIGHT
behav.deferShowFactor = 1;//START SHOWING ONLY IF SCROLL IS 1 TIMES GREATER THAN HEADER HEIGHT
behav.playOpacity = false; //PLAY WITH HEADER OPACITY WHEN HIDING
behav.maxTranslate = 56;//MAXIMUM TRANSLATION VALUE APPLIED TO HEADER
behav.thresholdFactor = 0.3;//IF HEADER HAS 1/3 OF HIS HEIGHT HIDDEN (SHOWN)=> SO PLAY ANIMATION TO HIDE (SHOW) ALL
header.addBehaviour(behav);

ScrollScaleBehavior

let btn: Button = null;
let listView: ListView = null;
let behavBtn = new ScrollScaleBehavior(listView);
behavBtn.height = 56;//HEIGHT OF BUTTON
behavBtn.deferHideFactor = 3;//START HIDING ONLY IF SCROLL IS 3 TIMES GREATER THAN HEADER HEIGHT
behavBtn.deferShowFactor = 1;//START SHOWING ONLY IF SCROLL IS 1 TIMES GREATER THAN HEADER HEIGHT
btn.addBehaviour(behavBtn);

ExpandableHeaderBehavior

let headerImage: Image = null;
let scrollview: ScrollView = null;
let behav = new ExpandableHeaderBehavior(scrollview);
behav.height = 400; //MAXIMUM HEIGHT OF THE IMAGE
behav.disappearAt = 56 + page.getStatusBarHeightDip();//HIDE IMAGE WHEN HEIGHT IS UNDER
behav.showAnimation = (ex) => {//PLAY AN ANIMATION WHEN SHOWN
appbar.animate({ backgroundColor: new Color("transparent"), duration: ex.animationDuration, curve: AnimationCurve.easeOut });
};
behav.hideAnimation = (ex) => {//PLAY AN ANIMATION WHEN HIDDEN
appbar.animate({ backgroundColor: new Color("purple"), duration: ex.animationDuration, curve: AnimationCurve.easeIn });
};
headerImage.addBehaviour(behav);
<Image src="~/img/logo.png" id="headerImage" stretch="aspectFill" height="400" verticalAlignment="top"/>
<app:AppBarLayout columns="auto,*,auto,auto" rows="auto" id="actionbar">
<app:AppBarIcon text="list" col="0"/>
<app:AppBarTitle text="My Application" col="1"/>
<app:AppBarIcon text="notifications" col="2" />
<app:AppBarIcon text="search" col="3" tap="openSearch"/>
</app:AppBarLayout>

AnchorBehaviour

The TextLayout is augmented. This make this new property available:

export interface TextLayout{
anchor:"bottom"|"middle"|"top"|"visible";
}
<TextLayout anchor="bottom">
...
</TextLayout>

See all modules here