Nativescript: SplitView control

[kvelikov]

It would be nice to have split view control that will allow to build tablet friendly layout very easy.

---

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

[toddanglin]

Bumping this request. It would definitely come in handy for tablet UI scenarios.

[lidakis]

Yes, this is a "must" feature, and very usefull...
Is there any other way to reproduce a master-detail (splitview) app with nativescript, at this point (e.g with layouts) ?
Has anybody got his hands dirty with this ? If yes please provide some information...

[EddyVerbruggen]

Yes I have. It's rather easy with a gridlayout with 2 colums.

[toddanglin]

@EddyVerbruggen Can you elaborate? Are you able to host a second navigation frame in the GridLayout? I thought this was still an open issue:
https://github.com/NativeScript/NativeScript/issues/1043

[NathanaelA]

By using my NativeScript-DynamicLoader you can easily dynamically load in and out any content you want/need at any point at time. However, NS-DynamicLoader is only for PAN (Plain Awesome NativeScript) code, not NAN (NativeScript Angular) as NAN uses a different layout system that already allows dynamic partial navigation.

[EddyVerbruggen]

@toddanglin @lidakis I'm using NativeScript with Angular to create a Point of Sale app and needed different layouts on phone and tablet. What I currently have is this:

Phone (iPhone 6 in this case)

Tablet (iPad in this case)

So on tablets I have 1 screen (and we highlight the selected item - "Nike MD Runner v3" in this case), on phone you need to navigate from the master list to the detail screen.

How was this done?

Both tablet and phone use the same "master" view. In its component we expose an "isTablet" property that's implemented as isTablet: boolean = device.deviceType == DeviceType.Tablet;

The view roughly looks like this:

<ActionBar></ActionBar>
<GridLayout [columns]="isTablet ? '*,*' : '*'">
  <StackLayout>
    <!-- master -->
  </StackLayout>
  <StackLayout col="1" *ngIf="isTablet">
    <!-- detail, pass the selected item from the list (not shown here) to the details directive -->
    <article-details [item]="item"></article-details>
  </StackLayout>
</GridLayout>

So on tablet we're rendering the details in the second column, on phone we need a separate detail page.

In order to keep things DRY we've moved the contents of the detail page into a directive (see <article-details></article-details> above) which we can reuse on the phone's detail page:

<ActionBar></ActionBar>
<StackLayout>
  <article-details></article-details>
</StackLayout>

I'm using this layout for three different usecases in this app and it works like a charm.