CODEWITHSUNDEEP
angularnativescript
Dat Nguyen
Dat Nguyen

Reputation: 232

Use mobile OS specific widgets

In my application, I need a sidedrawer. At first I thought using the plugin from Telerik which includes a sidedrawer. But then I found out here it wasn't possible to use this plugin in a Nativescript/Angular 2 project yet. Then I found out about the placeholder in Nativescript which allows to use iOS/Android native widgets.

So for the sidedrawer, I thought I could use the Navigation drawer from Android but the typescript compiler (tsc) sends me an error telling me it doesn't recognize the name 'android' (see link about placeholder).

Thank you for your help

Upvotes: 0

Views: 213

Answers (1)

Nick Iliev
Nick Iliev

Reputation: 9670

Here is a basic implementation of the native Android Drawer Layout as a side-drawer.

In your page.xml

<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo">
     <Placeholder creatingView="creatingView"/>
</Page>

In you page.js

var app = require("application");
var drawer;
var page;
var appContext;
function navigatingTo(args) {
    page = args.object;
    appContext = app.android.context;
}
exports.navigatingTo = navigatingTo;

function creatingView(args) {
    // init DrawerLayout
    drawer = new android.support.v4.widget.DrawerLayout(appContext);
    var frame = new android.widget.FrameLayout(appContext);

    // here you can use ListView with Adapters if you prefer
    var linearMenu = new android.widget.LinearLayout(appContext);
    linearMenu.setOrientation(1);

    // adding the menu options
    var textView1 = new android.widget.TextView(appContext);
    textView1.setText("ITEM 1");
    var textView2 = new android.widget.TextView(appContext);
    textView2.setText("ITEM 2");
    var textView3 = new android.widget.TextView(appContext);
    textView3.setText("ITEM 3");

    // setting layout params
    var lp = new android.support.v4.widget.DrawerLayout.LayoutParams(100,        android.widget.LinearLayout.LayoutParams.MATCH_PARENT);
    lp.gravity = android.view.Gravity.START;

    linearMenu.setLayoutParams(lp);
    linearMenu.addView(textView1);
    linearMenu.addView(textView2);
    linearMenu.addView(textView3);

    // finally adding the elements to the DrawerLayout and attaching it to the NativeScript placeholder
    drawer.addView(frame, new  android.support.v4.widget.DrawerLayout.LayoutParams(android.view.ViewGroup.Layou tParams.MATCH_PARENT, android.view.ViewGroup.LayoutParams.MATCH_PARENT));
    drawer.addView(linearMenu);
    args.view = drawer;
}
exports.creatingView = creatingView;

This is a very basic example with no transition effects and no vent listeners attached but still will work with swipe as a demonstration how to use the native APIs to create a drawer in {N} - hope that helps you in your project.

Upvotes: 1

Related Questions